Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Manual and Automatic bootstrapping in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 895
    Comment on it

    In Javascript framework like AngularJS there is a bootstrapping process involved and there are certain flow that is involved in it.

    There are two types bootstrapping involved in AngularJS:

    1. Automatic bootstrapping
    2. Manual Bootstrapping

    Let us discuss it one by one.

    1. Automatic Bootstrapping:

    Automatic bootstrapping in AngularJS starts with placing the script tag at the bottom of the page to improve the application loading time and it also ensure us that the HTML would not block HTML.
    Here are the following points which are involved in the process:

    1. As soon as the AngularJS is loaded in the DOM, it will look for ng-app directive, which is also the entry point of the application.
    2. Then it will create the app injector which will retrieve object instances, invoke methods and load modules.
    3. Then it processes all other angular directives only under that DOM element. 

    Example:

    <html>
    <body ng-app="myApp">
     <div ng-controller="Ctrl">
     	Hello {{msg}}!
     </div>
     
     <script src="angular.min.js"></script>
     <script>
    	 var app = angular.module('myApp', []);
    	 app.controller('Ctrl', function ($scope) {
    	 	$scope.msg = 'World';
    	 });
     </script>
    </body>
    </html>

    2. Manual Bootstrapping:

    There are many cases where we use manual bootstrapping suppose we want to load the data asynchronously for some specific task which should be loaded before the AnguarJS compiles the page but in the automatic process it wouldn't wait for that long.

    Few steps to notice:

    1. The ng-app directive should not be used in the HTML.
    2. Mixing of automiatic and manula boostrapping is not allowed.
    3. Modules, contoller and other stuff should be defined before manual bootstrapping.

    Example:

    <html>
    	<body>
    		 <div ng-controller="Ctrl">
    		 	Hello {{msg}}!
    		 </div>
    	 	<script src="lib/angular.js"></script>
    	 
    		 <script>
    			 var app = angular.module('myApp', []);
    			 app.controller('Ctrl', function ($scope) {
    				 $scope.msg = 'World';
    		 	});
    		 
    		 //manual bootstrap process
    		 angular.element(document).ready(function () {
    		 	angular.bootstrap(document, ['myApp']);
    		 });
    		 </script>
    	</body>
    </html>

     

    Hope this makes you clear how the process works.

 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: