AngularJS Basic Application Life Cycle

• ng-app: This directive ng-app tells that this element is the "owner" of an AngularJs application.
  
• ng-model: This directive ng-model binds the value of the input field to the application variable firstName.
  
• ng-bind: This directive ng-bind binds the innerHTML of the specific element to the application variable firstName.
  
  
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>DotNetPiper.com</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  6. <script type="text/javascript" src="main1.js"></script>
  7. <script></script>
  8. </head>
  9. <body ng-app="myApp">
  10. <div ng-controller="Myctrl">
  11. <strong>First name:</strong> {{firstName}}
  13. <strong>Last name:</strong>
  14. <span ng-bind="lastName"></span>
  15. <strong>{{ CompDetails() }} </strong>
  16. <input type="text" ng-model="firstName"></input>
  17. <input type="text" ng-model="lastName"></input>
  18. </div>
  19. </body>
  20. </html>

In the code segment shown above, there is <strong>{{ CompDetails() }} <br /><br />. This code calls the function CompDetails defined in the controller Myctrl. As soon as this line executes it goes to the controller and does the required actions.

Please refer to the following image:



Code segment for main.js
As soon as you run BasicAngularApp.html it shows you the result as shown in the following image:



Notice that in the image shown above is main1.js. We've set some value to $scope.firstName and $scope.lastName that is returned by the function at the bottom of main.js file. Scope is the glue between the application controller and the view and somewhere it shows two-way binding (my understanding). As soon as you change the value of input type it updates the application data and for the same reason the CompDetails function returns the updated value. Kindly have a look at the life cycle of the basic application as depicted in the following image:



I hope it'll help you some day.

Enjoy MVC and Routing.
Kindly inform me if you have any query.