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)