In this tutorial, we are going to discuss Bootstrapping in Angular application and also discuss the ng-app directive. When the document is loaded the ng-app directive will bind the Angular js functions with an application. Ng-app is the simplest attribute in angular, it has no value. Bootstrapping is done by the ng-app directive. Ng-app is most important directive in angular which informs that the document has the angular controls.
When you put ng-app inside HTML, it will tell angular js to control the entire application of HTML. It can also be added in other element of the HTML like body. It is important to add in the parent element so that the child element can run the directives of the angular. The double curly brackets syntax shows that the it has used one-way data binding or expression. If it is related with the variable it will keep the UI updated with the changes in value. If it is related to the expression, it will keep the UI update when the expression changes.
Bootstrapping the Application
When the application starts first and loading the AngularJs, this process is called Bootstrapping. Loading the library of Angular JS the process of bootstrap starts working. The file compiler looking for ng-app when the HTML file is considered. The above code shows the ng-app is defined with the value of "helloWorldApp". The variable in the file can be named anything.
<html lang="en" ng-app="helloWorldApp"></html>
This is how we make a module in which you can add this variable in javascript file.
'use strict';
/* App Module */
var helloWorldApp = angular.module('helloWorldApp', [
'ngRoute',
'helloWorldControllers'
]);
We can save our module in js file like helloworld.js into the js directory. Then create a HTML file called index.html which will use module defined in js file.
myAppModule.js
// create a new module called 'myAppModule' and save
// a reference to it in a variable called myAppModule
var myAppModule = angular.module('myAppModule', []);
// use the myAppModule variable to
// configure the module with a controller
myAppModule.controller('MyFilterDemoCtrl', function ($scope) {
//controller code would go here
}
);
// use the myAppModule variable to
// configure the module with a filter
myAppModule.filter('stripDashes', function() {
return function(txt) {
// filter code would go here
};
});
In this file we define a module named "myAppModule", then make a controller and a filter. This file has a module name "myAppModule" we name a variable that stores a value which can be used in HTML file.
Now we create HTML file for using angular module inside the HTML file.
index.html
<!DOCTYPE html >
<html ng-app="myAppModule">
<head lang="en">
<meta charset="UTF-8">
<title>Listing 4-10</title>
<script src="js/angular.min.js"></script>
<script src="js/myAppModule.js"></script>
</head>
<body ng-controller="MyFilterDemoCtrl">
</body>
</html>
We have created our default module now we put a module inside the HTML within ng-app attribute, it bootstraps the angular js process. We have to put the reference for the js file in which we created a module before so that the angular js find its module.
When you run the HTML file in a browser the angular js bootstraps the application and the output will be shown on the browser.
0 Comment(s)