Menu
I am a beginner in Angular JS. I was going through the below link. http://docs.angularjs.org/tutorial/step_00
What are the bootstrap files? Where are they located?
What is automatic booting and manual initialization of bootstrapping? I read the disadvantage of manual initialization as below.. from the link http://docs.angularjs.org/guide/bootstrap
Can anyone explain exactly what is the disadvantage here?
677
The process of loading the index. html page, app-level module, and app-level component is called bootstrapping, or loading the app. In this guide, you will learn about the internals of the bootstrapping process. Angular takes the following steps to bootstrap the application: Load index.
A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule. bootstrap .
Front-end application development tools like Angular Material and Bootstrap are necessary to create a high-functioning and responsive website. Angular Material is a User Interface module that offers pre-built component collections for frameworks like Vue.
In computing, the term bootstrap means to boot or to load a program into a computer using a much smaller initial program to load in the desired program, which is usually an OS.
Bootstrapping is the equivalent of initializing, or starting, your Angular app. There are 2 main ways to do so.
The first is automatically bootstrapping by adding ng-app to the an element in your HTML, like so:
<html ng-app="myApp"> ... </html> The second would be to bootstrap from the JavaScript, like so, after having creating your app through angular.module("myApp", []);
angular.bootstrap(document, ['myApp']); Though Everyone above has answered perfectly and I found what I was looking for but still a working example seem missing.
While understanding about Auto / Manual bootstrapping in AngularJS below examples can help a lot :
AngularJS : Auto Bootstrapping :
Angular initializes / bootstraps automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive. When the ng-app directive is found then Angular will:
Load the module associated with the directive.
Create the application injector.
Compile the DOM starting from the ng-app root element.
This process is called auto-bootstrapping.
<html> <body ng-app="myApp"> <div ng-controller="Ctrl">Hello {{msg}}!</div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('Ctrl', function($scope) { $scope.msg = 'Nik'; }); </script> </body> </html> JSFiddle : http://jsfiddle.net/nikdtu/ohrjjqws/
AngularJS - Manual Bootstrapping :
You can manually initialized your angular app by using angular.bootstrap() function. This function takes the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.
<html> <body> <div ng-controller="Ctrl">Hello {{msg}}!</div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('Ctrl', function($scope) { $scope.msg = 'Nik'; }); //manual bootstrap process angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); }); </script> </body> </html> JSFiddle : http://jsfiddle.net/nikdtu/umcq4wq7/
Note :
You should not use the ng-app directive when manually bootstrapping your app.
You should not mix up the automatic and manual way of bootstrapping your app.
Define modules, controller, services etc. before manually bootstrapping your app as defined in above examples.
Reference : http://www.dotnettricks.com/books/angularjs/interview
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
