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:
- Automatic bootstrapping
- 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:
- 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.
- Then it will create the app injector which will retrieve object instances, invoke methods and load modules.
- 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:
- The ng-app directive should not be used in the HTML.
- Mixing of automiatic and manula boostrapping is not allowed.
- 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)