AngularJS (54 Blogs) Become a Certified Professional

What is AngularJS Bootstrap And How To Use It Practically?

Last updated on Nov 22,2022 1.7K Views


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. 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.

Upcoming Batches For Angular Certification Training Course
Course NameDateDetails
Angular Certification Training Course

Class Starts on 30th March,2024

30th March

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

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.

image not found!
image not found!

What is AngularJS Bootstrap And How To Use It Practically?

edureka.co