{"id":59694,"date":"2018-05-02T17:23:33","date_gmt":"2018-05-02T11:53:33","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59694"},"modified":"2024-04-12T14:20:44","modified_gmt":"2024-04-12T08:50:44","slug":"angular-bootstrapping","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-bootstrapping\/","title":{"rendered":"Angular Bootstrapping"},"content":{"rendered":"

Angular Bootstrapping<\/h1>\n

AngularJS Auto Bootstrapping :<\/p>\n

Angular initializes \/ bootstraps automatically upon DOMm Content loaded 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:<\/p>\n

Load the module associated with the directive.<\/p>\n

Create the application injector.<\/p>\n

Compile the DOM starting from the ng-app root element.<\/p>\n

This process is called Auto-bootstrapping.<\/p>\n

AngularJS – Manual Bootstrapping :<\/p>\n

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.<\/p>\n

<html><\/p>\n

<body>
\n<div ng-controller=”Ctrl”>Hello {{msg}}!<\/div>
\n<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.5\/angular.min.js”><\/script>
\n<script>
\nvar app = angular.module(‘myApp’, []);
\napp.controller(‘Ctrl’, function($scope) {
\n$scope.msg = ‘Nik’;
\n});
\n\/\/manual bootstrap process
\nangular.element(document).ready(function () { angular.bootstrap(document, [‘myApp’]); });
\n<\/script>
\n<\/body><\/p>\n

 <\/p>\n

The bootstrap array<\/span><\/strong><\/p>\n

The application launches by bootstrapping the root AppModule, which is also referred to as an entryComponent. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.<\/p>\n

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.<\/p>\n

While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component.<\/p>\n

This one root component is usually called AppComponent and is in the root module’s bootstrap array.<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n