• AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
• Applications written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser and it is a clean Model View Controller (MVC)

• Basic understanding of JavaScript and any text editor.
• Web technologies such as HTML, CSS, AJAX and so on.
• First, you will learn the basics of AngularJS: directives, expressions, filters, modules and controllers.
• Then you will learn everything else you need to be familiar with Angular.
• Events, DOM, Forms, Input, Validation, HTTP.
• Any other editor like JsFiddle or W3 Schools editor to test the output.

• ng-app: This directive defines and links an AngularJS application to HTML.
• ng-model: This directive binds the values of AngularJS application data to HTML input controls (input, select, text area).
• ng-bind: This directive binds the AngularJS application data to HTML tags and views.

Example

Step 1

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.



Step 2

The ng-model directive binds the value of the input field to the application variable name.



Step 3

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.



ng-init: The ng-init directive initializes AngularJS application variables.



Expressions: AngularJS expressions are written inside double braces: {{ expression }}. Sample: if you want to add a two digit use , {{4+5}}



AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.



You will learn about models and controllers later in this tutorial.

Basics of AngularJS: Part 1

In this article I would like to share MVC patterns in Angular js.

• Model
  
  It is the lowest level of the pattern responsible for maintaining data. The model is responsible for managing application data. It responds to the request from the view and to the instructions from the controller to update itself.
  
  
• View
  
  The View is responsible for displaying all, or a portion of, the data to the user. A presentation of data in a specific 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
  
  A Controller is software code that controls the interactions between the Model and View. The controller 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.
  
  AngularJS is a MVC based framework. In the future chapters, we will see how AngularJS uses MVC methodology.
  
  

AngularJS Controllers

An AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using the ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions.

Each controller accepts $scope as a parameter that refers to the application/module that the controller is to control.

 

1. <div ng-app="" ng-controller="inputController">  
2. ...  
3. </div>  

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

 

1. < div ng - app = "myApp"  
2. ng - controller = "inputctrl" > First Name: < input type = "text"  
3. ng - model = "firstName" > < br > Last Name: < input type = "text"  
4. ng - model = "lastName" > < br > < br > Full Name:  
5. {  
6.     {  
7.         firstName + " " + lastName  
8.     }  
9. }  
10.   
11. < /div>  
12.   
13. <script>  
14. var app = angular.module(‘myApp‘, []);  
15. app.controller(‘inputctrl‘, function($scope)  
16. {  
17. $scope.firstName = "";  
18. $scope.lastName = "";  
19. });  
20. </script >  

Explanation

In this example ng-app runs inside a <div>.

This ng-controller directive defines a controller.

The inputtrl function is a JavaScript function. AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of the application variables and functions).

The controller creates two properties (variables) in the scope (firstName and lastName).

The ng-model directives bind the input fields to the controller properties (firstName and lastName).



In the preceding example we have used two properties, first name and last name.

The same as in the preceding example, here we are returning the first name and last name to the HTML value.

Explanation

 

1. Full Name: {{fullName()}}  
2.   
3. $scope.fullName = function() 
   {  
4. return $scope.firstName + " " + $scope.lastName;  
5. }  

Source Code

 

1. <div ng-app="myApp" ng-controller="inputCtrl">  
2.   
3. First Name: <input type="text" ng-model="firstName"><br>  
4. Last Name: <input type="text" ng-model="lastName"><br>  
5. <br>  
6. Full Name: {{fullName()}}  
7.   
8. </div>  
9.   
10. <script>  
11. var app = angular.module(‘myApp‘, []);  
12. app.controller(‘ inputCtrl‘, function($scope) {  
13. $scope.firstName = "";  
14. $scope.lastName = "";  
15. $scope.fullName = function() {  
16. return $scope.firstName + " " + $scope.lastName;  
17. }  
18. });  
19. </script>  

Controllers In External Files

We can use an external file also for this method. In larger applications, it is common to store controllers in external files.



The following is another example to bind the employee details from an external file:

 

1. angular.module(‘myApp‘, []).controller(‘namesCtrl‘, function($scope) {  
2.     $scope.Employees = [{  
3.         name: ‘Gowtham‘,  
4.         country: ‘karur‘  
5.     }, {  
6.         name: ‘kiruthiga‘,  
7.         country: ‘Tirupur‘  
8.     }, {  
9.         name: ‘GK‘,  
10.         country: ‘Chennai‘  
11.     }];  
12. });