AngularJS initialization process with example

AngularJS initialization process with example

AngularJS Bootstrap Process includes from AngularJS initialization to compilation Process . AngularJS data format will be worn out 2 ways in which, automatic initialization and manual initialization.

Automatic initialization : AngularJS initialization process

In automatic initialization, AngularJS initializes mechanically upon DOMContentLoaded event or once the angular.js script is scan if at that point document.readyState is ready to ‘complete’. At now Angular appearance for the ng-app directive that is root of the AngularJS compilation Process . If the ngApp directive is found then Angular will:

  • Start compilation of DOM from ng-app directive, the basis of the compilation.
  • Create the appliance convenience.
  • Load the module related to the directive.

Example : AngularJS initialization process

<!DOCTYPE html>          
<html>          
<head> <!-- www.onlinecode -->          
<title>Automatic Initialization for AngularJS Bootstrap Process</title>          
<script SRC="http://onlinecode/example/angularjs/1.4.8/angular.min.js"></script>  
 <script>   
    var ajsBootstrap = angular.module('controllerBootstrap', [])              
    ajsBootstrap.controller('autoInitController', ['$scope', function($scope) {          
       $scope.siteUrl = "www.onlinecode"          
    }]);          
</script>          
</head>          
<body style="background-color:#e2e2e2;" ng-app="controllerBootstrap">          
    <fieldset style="background-color:#e2e2e2;">            
		<legend>Automatic Initialization Example using AngularJS Bootstrap Process</legend>            
		<div ng-controller="autoInitController">          
		<p style="font-family:Arial;color:green;background:steelblue;padding:2px;width:340px;">{{siteUrl}}</p> 
    </fieldset>           
</body>          
</html>

AngularJS Manual Initialization : AngularJS initialization process

Sometimes you’ll got to manual Initialize AngularJS so as to own additional management over the initialization move. you’ll be able to try this by career angular.bootstrap() operate within angular.element(document).ready() operate.

The angular.bootstrap() operate takes 2 parameters, the document and module name convenience because the second parameter to the angular.bootstrap operate.

<!DOCTYPE html>          
<html>          
<head> <!-- www.onlinecode -->          
    <title>Manual Initialization AngularJS Bootstrap Process</title>          
    <script SRC="http://onlinecode/example/angularjs/1.4.8/angular.min.js"></script>
    <script>   
		var ajsBootstrap = angular.module('controllerBootstrap', [])              
        ajsBootstrap.controller('manualInitController', ['$scope', function($scope) {          
			$scope.siteUrl = "www.onlinecode"       
        }]);      
        angular.element(document).ready(function() {    
			angular.bootstrap(document, ['controllerBootstrap']);    
		});          
</script>          
</head>          
<body style="background-color:#e2e2e2;">          
	<fieldset style="background-color:#e2e2e2;">            
		<legend>AngulerJS Manual Initialization Using AngularJS Bootstrap Process</legend>            
		<div ng-controller="manualInitController">          
		<p style="font-family:Arial;color:green;background:steelblue;padding:2px;width:340px;">{{siteUrl}}</p>                  
	</fieldset>           
</body>          
</html>

You May also like Angularjs mvc architecture example

Leave a Comment

Your email address will not be published. Required fields are marked *

1  +  3  =  

We accept paid advance and paid guest Posting on our Site : Contact US