Post
Ask Question

AngularJS Basic Application Life Cycle

This article esplains how to work with AngularJs.

I've designed a program to help you become familiar with a few words that you may be confronting in the future. Those keywords are shown  in the following.

Component of Angular Description
Module Modules serve as containers to assist in organizing code within your AngularJs application. Modules can contain sub-modules.
Services Services are a point where you can put common functionality to an AngularJs application. For example if you would like to share data with more than one controller then the best way is to promote that data to a service and then make it available via the service. Services extend controllers and make them more globally accessible.
Routes Routes allow us to determine ways to navigate to specific states within our application. It also allows us to define configuration options for each specific route, such as which template and controller to use.
View The view in AngularJs is what exists after AngularJs has compiled and rendered the DOM. It's a representation of whatever outcome from
@scope $scope is essentially the “glue” between the view and controller within an AngularJs application. And somewhere supports two-way binding within the application.
Controller The controller is responsible for defining methods and properties that the view can bind to and interact with. Controllers should be lightweight and only focus on the view they're controlling.
directive A directive is an extension of a view in AngularJs in that it allows us to create custom, reusable elements. You can also consider directives as decorators for your HTML. Directives are used to extend views and to make these extensions available for use in more than one place.
Config The config block of an AngularJs application allows for the configuration to be applied before the application actually runs. This is useful for setting up routes, dynamically configuring services and so on.

I've created an HTML page as a View and named it BasicAngularApp.html that keeps a reference of an Angular.min.js file. You can download and add to you solution as well.

As a newbie to AngularJs, you must be familiar with the following few main keywords that you will be using in an application:

  • 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.

    element to the application
    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}}  
    12.               
    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

Code segment for main.js
  1. var app = angular.module('myApp', []);  
  2.   
  3. app.controller('Myctrl', function($scope,$rootScope) {  
  4.     debugger;  
  5.     $scope.firstName = "Sachin Kalia";  
  6.     $scope.lastName = "DotnetPiper.com";  
  7.   
  8.   
  9.     $rootScope.testProp="sachin";  
  10.     $rootScope.CompDetail = function CompDetail()  
  11.     {  
  12.          alert('INSIDE THIS');  
  13.     };  
  14.   
  15.    $rootScope.CompDetail2 = function CompDetail2(data)  
  16.      {        
  17.         alert(data + " I am called from Controller's RootScope(Global) method name CompDetail2");// + $CompDetail.data);  
  18. return "I am called from Controller1 RootScope(Global) method name CompDetail2;"  
  19.            
  20.      };  
  21.   
  22.      $scope.CompDetails = function CompDetails()  
  23.      {  
  24.         return "Welcome to DotnetPiper.com " + $scope.firstName + " "  + $scope.lastName;  
  25.   
  26.      };  
  27. });  
As soon as you run BasicAngularApp.html it shows you the result as shown in the following image:

result

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:

Basic Angular App

I hope it'll help you some day.

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


Similar Articles