AngularJS (39 Blogs) Become a Certified Professional

What is AngularJS Bootstrap And How To Use It Practically?

Published on Sep 13,2019 30 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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,

Lets begin!!

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:

Output - AngularJS Bootstrap - Edureka

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:

Output - AngularJS Bootstrap - Edureka

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.

Got a question for us? Please mention it in the comments section of “AngularJS Bootstrap” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.