AngularJS - A Quick View

AngularJS is a javascript framework and it is best for creating single page applications. AngularJS is based on the MVC pattern (Model View Control). The views are specified using HTML + AngularJS's own template language. The models and controllers are specified via JavaScript objects and JavaScript functions. Thus, the views are specified declaratively, as HTML normally is, and the models and controllers are specified imperatively, as JavaScript normally is.

Above code shows a javascript HelloWold sample. Here the code can splitup into two portions a View part and a Controller part. The portion which html writtern is called view part and currosponding attached portion is called Controller part

In this example I set the ng-app value to myapp. This means that all controller functions must be added to the myapp module. In other words, the AngularJS module named myapp contains all the controllers for this AngularJS application. The name myapp is something I have chosen. It is also run the above specific code without specifying the ng-app attribute value, but it must that you need to specify the tag ng-app with or without value. Below example shows the above specified angularjs application without having the ng-app attribute.

The div element contains ng-controller attribute with the value AngularController. This means, that the controller function used by this view is named AngularController.

This is standard HTML except for the {{helloTo.title}} part. This part tells AngularJS to insert the model value named helloTo.title into the HTML at that location.

A controller function is a normal JavaScript function which takes a single parameter: The $scope parameter. $scope as an object that links Controller to the View. It is controllers responsibility to initialize the data that the view needs to display. This is done by making changes to $scope. The controller function can insert data and functions into the model object. The view can then use the data and the functions.

Directly bind the state with model

From the following example you can bind the values directly without using any controller logic using ng-model attribute. The ng-model binds the state of textbox with model value. In the above sample the model value is bound with the value of textbox using ng-model attribute. Thus when the textbox value changes, Angular automatically changes the model angulartext with this value. This is called Two way data binding. Similarly, if we change the model value than Angular will change the value of textbox.

How the AngularJS Application Executes

The following steps describes the process of execution of AngularJS Application

Step 1 : The HTML document is loaded into the browser, and evaluated by the browser. At this time the AngularJS JavaScript file is loaded, the angular global object is created, and your JavaScript which registers controller functions is executed.

Step 2 : AngularJS scans through the HTML to look for AngularJS apps and views. When AngularJS finds a view it connects that view to the corresponding controller function.

Step 3 : AngularJS executes the controller functions and update (render) the views with data from the model populated by the controller. The page is now ready

Step 4 : AngularJS listens for browser events (e.g. input fields being changed, buttons clicked, the mouse moved etc.). If any of these browser events require a view to change, AngularJS will update the view correspondingly. If the event requires that the corresponding controller function is called, AngularJS will do that too. Not all events require the controller function to be called, even if the view is updated as a result of the event.