Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Understanding AngularJS Bootstrap Process

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 765
    Comment on it

    Bootstrap process in angularJs is simple and you should know about it. There are two ways of bootstrap process in angularJs:

    • Automatic Bootstrap
    • Manual Bootstrap

    Automatic Bootstrap:
    When we run our angularJs App the DOM(Document Object Model) is loaded, then angularJs looks for ngApp directive in the DOM which specifies the root of the application. If the ngApp directive is found, it will load the module that is written inside ngApp directive. Lets understand it with an example:

    Example:
     

    <html ng-app=firstApp'> 
    <head> 
    <script src='angular.js'> 
      </script> 
       <script> 
           var app = angular.module(firstApp', []); 
            app.controller('myController', function($scope) { 
                $scope.message = John; 
            }); 
        </script> 
    </head>
    <body> 
        <div ng-controller="myController"> 
            <p> Here is {{ message}} </p> 
        </div> 
    </body>
    </html>

    In the above example, first it will load the firstApp, then create application injector. Then it compile DOM where we have defined ngApp directive i.e. root for our application.

     

    Manual Bootstrap:
    Manual bootstrap process is different from automatic bootstrap. Here you would not need to use ngApp directive with the HTML element. It is used when you want to have control over initialization of angularJs process or if you want to perform some task before angular compiles initial page.
    You have to define Modules, contoller and other things before writing code for manual bootstrapping.

    Example:
     

    <!doctype html> 
    <html> 
     <body> 
     <div ng-controller="myController"> Name: {{name}}! </div> 
       <script src='angular.js'> </script> 
        <script> 
            angular.module(firstApp', []).controller(myController', ['$scope', function($scope) 
            { 
                $scope.name = John; 
            }]); 
            angular.element(document).ready(function()  
            { 
                angular.bootstrap(document, [firstApp']); 
            }); 
        </script> 
    </body> 
    </html> 

    Hope this will help you to understand bootstrap process in angularJs.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: