Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
By default, an Angular application is initialized automatically by loading the angular.js script and placing the ng-app directive to the root element of your application (e.g. <html> tag), like the following:
<!doctype html> <html ng-app> <body> ... <script src="angular.js"></script> </body> </html>
Alternatively, you can also initialize your application manually if you need, using the angular.bootstrap() function. This is especially useful when you want your application to initialize only after a certain period or bound to another event taking place. See this page for further details about the initialization methods in Angular.
angular.bootstrap is a function component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application. The syntax for angular.bootstrap is as follows:
angular.bootstrap(element, [modules], [config]);
element is a DOM element (e.g. document) that is the root of the Angular application, modules (optional) is an array of modules to be loaded and config (optional) is an object used for configuration options. You can check this page on the official developer guide to read more about angular.bootstrap syntax.
In the following example, we manually bootstrap our application which displays a welcome message once the user logs in.
<!doctype html> <html> <body> <div ng-controller="LoginMessage">{{message}}</div> <script src="angular.js"></script> <script> angular.module('example', []) .controller('LoginMessage', function($scope) { $scope.message = 'Welcome to Members Area!'; }); angular.bootstrap(document, ['example']); </script> </body> </html>
Note how we selected document as the root of the application and how we passed the example module to the angular.bootstrap() function.
In the following example, we will display the current year in our application and bootstrap it by selecting a specific element as the application root.
<!doctype html> <html> <body> <div id="year" ng-controller="Year">{{CurrentYear}}</div> <script src="angular.js"></script> <script> angular.module('example', []) .controller('Year', function($scope) { $scope.CurrentYear = new Date().getFullYear(); }); angular.bootstrap(document.getElementById('year'), ['example']); </script> </body> </html>
We selected the div element with the id #year as the root of our application.
Using the angular.bootstrap function, you can bootstrap multiple angular applications on a single page. Let’s say we have two applications (app1 and app2) defined by two div elements:
<div id="app1">...</div> <div id="app2">...</div>
We use the following code to start up these two applications:
angular.module('app1', []); angular.module('app2', []); angular.bootstrap(document.getElementById('app1'), ['app1']); angular.bootstrap(document.getElementById('app2'), ['app2']);
Before ending this tutorial, we will list a number of things you should pay attention while manually starting your applications using angular.bootstrap.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareThank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2020 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.