Introduction
In my previous article I told you How to Create Hello World Application Using AngularJS in ASP.NET Application.
In this article I provide three ways to initialize AngularJS in your application.
There are three ways to initialize AngularJS in your application, the first one is Automatic Initialization and is the simplest one that you saw in the previous article, the second one is also Automatic Initialization but is a little difficult from the first one, the third is the most difficult and is done manually.
In all the methods, one thing is common; that is that the external JS file must be added, so the first thing you need to do is to add the AngularJS file in the Head Section of the application. You can download it from the Angular Website or download it from the following Link: ANGULARJS.
First Method
In the first method a simple ng-app is written in the HTML tag and the controller is defined as the function name, for example:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
function HelloWorld($scope) {
$scope.test = 'World';
}
</script>
</head>
<body>
<div ng-controller="HelloWorld">
Your Name: <input type="text" ng-model="test"/>
<hr/>
Hello {{test || "World"}}!
</div>
</body>
</html>
You can see that in the HTML tag ng-app is simply written, no value is assigned to it, the function name is written as HelloWorld that is later defined as the Controller name.
It's output will be as follows:
![AngularJS]()
Second Method
In the second method the ng-app value is defined in the angular.module defined in a JavaScript Tag, the Controller name is also defined in the Controller() and not as a function name. For example:
<html ng-app="demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
angular.module('demo', []).controller('HelloWorld', function ($scope) {
$scope.test = 'World';
});
</script>
</head>
<body>
<div ng-controller="HelloWorld">
Your Name: <input type="text" ng-model="test"/>
<hr/>
Hello {{test || "World"}}!
</div>
</body>
</html>
Here in the Script tag you can see that the angular.module consists of "demo" that is the value for ng-app, Then "HelloWorld" is provided in the Controller() that is the value for ng-controller, the function is created within the controller but the variable test is defined as it was defined previously.
It's output will be as follows:
![AngularJS]()
Third Method
Normally only one AngularJS application can be initialized per HTML document but if we want to initialize more AngularJS applications in a single document then we need to use the Bootstrap method and initialize them manually. The third method is a manual method, this method is used in the case where we want more control over the initialization process. In this we use the Bootstrap Method. The an example of this type of method is:
<html ng-app="demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
angular.element(document).ready(function() {
angular.module('demo', []).controller('HelloWorld', function ($scope) {
$scope.test = 'World'});
angular.bootstrap(document, ['demo']);
});
</script>
</head>
<body>
<div ng-controller="HelloWorld">
Your Name: <input type="text" ng-model="test"/>
<hr/>
Hello {{test || "World"}}!
</div>
</body>
</html>
Here first the ready function is created since it is created in a normal JavaScript program.
Then similar things are done that were done in the second method, but the noticeable thing is that the name of the module is defined at the second place in the bootstrap.
It's output will be as follows:
![AngularJS]()
You can see that similar output is obtained in all the Methods.