This AngularJS Bootstrap article will introduce you to the concept of Bootstrapping In AngularJS with a practical demonstration. Following pointers will be covered in this article,
Angular.bootstrap()
A functional component, known as the angular.bootstrap() function is present in the Core ng model. It is used to manually start up the Angular application.
Syntax:
angular.bootstrap(element, [modules], [config])
Parameters:
- element– DOM element is an element, which is considered to be the root of the angular application.
- Modules– The array of modules to be loaded is known as modules. It is specified optionally.
- Config– An object used for configuration options is known as Config. This too is optional.
Moving on with Angular Bootstrap example
Example:
<html>
<head>
<title>ANGULAR BOOTSTRAP EXAMPLE</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
<style>
.id
{
font-size: 1.5em;
color:blue;
}
</style>
</head>
<body ng-app="app" style="text-align:Center">
<h1 style="color:blue">Bootstrap</h1>
<h2>angular.bootstrap()</h2>
<div ng-controller="Bootstrap">
<span class="id">{{name}}</span>
is easy to use.
</div>
<script>
var app = angular.module("app", []);
app.controller('Bootstrap', ['$scope', function ($scope) {
$scope.name = "Bootstrap";
}]);
angular.bootstrap(document, ['app']);
</script>
</body>
Output:
Moving on with Angular Bootstrap example
Example2:
</div>
<html>
<head>
<title>angular.bootstrap()</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:Center">
<h1 style="color:blue">Bootstrap</h1>
<h2>angular.bootstrap()</h2>
<div ng-controller="Bootstrap">
<div class="col-md-3 well" ng-init="count=0">
Rock:
<input type="radio" ng-model="Music" value="Rock"
ng-change="layout(Music)" />
Metal:
<input type="radio" ng-model="Music" value="Metal"
ng-change="layout(Music)" />
<pre><b>You selected:</b> {{result}} </pre>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('Bootstrap', ['$scope', function ($scope) {
$scope.layout = function (Music) {
$scope.result = Music;
}
}]);
angular.bootstrap(document, ['app']);
</script>
</body>
</html>
Output:
On selecting the radio button, the following output is shown:
The angular.bootstrap() function provides a major control over the initialization of the application.
This bring us to the end of this article on AngularJS Bootstrap.
If you wish to learn more check out the Angular Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications.
With Angular framework adoption being high, performance management of the application is community driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development. Check out this web developer course online to learn more about Angular.
Got a question for us? Please mention it in the comments section of “AngularJS Bootstrap” and we will get back to you.