What is AngularJS Bootstrap And How To Use It Practically?
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
- Example 1
- Example 2
Let us 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=
"<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js</a>">
</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=
"<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js</a>">
</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 brings us to the end of this article on AngularJS Bootstrap. If you wish to check out more articles on the market’s most trending technologies like Artificial Intelligence, Python, Ethical Hacking, then you can refer to Edureka’s official site.
Do look out for other articles in this series which will explain the various other aspects of Web Development.
7. Animating AngularJS Apps with ngAnimate Directive
8. PHP Tutorial
10. NodeJS Tutorial
11. Top 10 JavaScript Frameworks
12. Build a CRUD Application Using Node.js and MySQL
13. Build CRUD Application using Node.JS and MongoDB
14. Build REST API with Node.js
15. Best 3 Ways to Make Node.js Requests
16. HTML vs HTML5
Originally published at www.edureka.co on September 13, 2019.
