What Is AngularJS?
AngularJS is a client side JavaScript MVC framework to develop a dynamic web application. AngularJS was originally started as a project in Google but now, it is open source framework.
AngularJS is entirely based on HTML and JavaScript, so there is no need to learn another syntax or language. know more at Angular js online training
Advantage of AngularJS
There are a lot of JavaScript frameworks for building web applications. So, it is a genuine question, why to use Angular JS.
Following are the advantages of AngularJS over other JavaScript frameworks:
- Dependency Injection: Dependency Injection specifies a design pattern in which components are given their dependencies instead of hard coding them within the component.
- Two way data binding: AngularJS creates a two way data-binding between the select element and the orderProp model. orderProp is then used as the input for the orderBy filter.
- Testing: Angular JS is designed in a way that we can test right from the start. So, it is very easy to test any of its components through unit testing and end-to-end testing.
- Model View Controller: In Angular JS, it is very easy to develop application in a clean MVC way. You just have to split your application code into MVC components i.e. Model, View and the Controller.
AngularJS MVC Architecture
MVC stands for Model View Controller. It is a software design pattern for developing web applications. It is very popular because it isolates the application logic from the user interface layer and supports separation of concerns.
The MVC pattern is made up of the following three parts:
- Model: It is responsible for managing application data. It responds to the requests from view and to the instructions from controller to update itself.
- View: It is responsible for displaying all data or only a portion of data to the users. It also specifies the data in a particular format triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
- Controller: It is responsible to control the relation between models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model. know more at Angular js Training
AngularJS Hello World Application: Your First Example Program
The best way to see the power of an AngularJS Application is to create your first basic program "Hello World" app in Angular.JS.
There are many integrated development environments you can use for AngularJS development, some of the popular ones are mentioned below. In our example, we are using Webstorm as our IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Hello world, AngularJS
The example below shows the easiest way to create your first "Hello world" application in AngularJS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf 8"> <title>Guru99</title> </head> <body ng-app="app"> <h1 ng-controller="HelloWorldCtrl">{{message}}</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script> angular.module("app", []).controller("HelloWorldCtrl", function($scope) { $scope.message="Hello World" } ) </script> </body> </html>- The "ng-app" keyword is used to denote that this application should be considered as an angular js application. Any name can be given to this application.
- The controller is what is used to hold the business logic. In the h1 tag, we want to access the controller, which will have the logic to display "HelloWorld", so we can say, in this tag we want to access the controller named "HelloWorldCtrl".
- We are using a member variable called "message" which is nothing but a placeholder to display the "Hello World" message.
- The "script tag" is used to reference the angular.js script which has all the necessary functionality for angular js. Without this reference, if we try to use any AngularJS functions, they will not work. know more at Angular js online training from India
- "Controller" is the place where we are actually creating our business logic, which is our controller. The specifics of each keyword will be explained in the subsequent chapters. What is important to note that we are defining a controller method called 'HelloWorldCtrl' which is being referenced in Step2.
- We are creating a "function" which will be called when our code calls this controller. The $scope object is a special object in AngularJS which is a global object used within Angular.js. The $scope object is used to manage the data between the controller and the view.
- We are creating a member variable called "message", assigning it the value of "HelloWorld" and attaching the member variable to the scope object.
Comments
Post a Comment