AngularJS directives are used to extend HTML. Angular JS Directives starts with prefix ng-. In this article we will try to understand the use of below Angular JS Directives
ng-app: It represents Angular JS Application
ng-init: Its used for initializing application data
ng-model : Binding data between elements data and application data
ng-repeat: Its used for repeating element
Directive ng-app:
Lets see the below example
[example]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div>
{{2+2}}
</div>
</body>
</html>
[/example]The above code display simply {{2+2}} but actually it should display 4. In angular JS an expression starts with { { and ends with } }. In the above code the expression is ignored by angular JS because the code is not associated with any Angular JS Application. Here is the modified version of the above code.
[example]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=””>
{{2+2}}
</div>
</body>
</html>
[/example]
Now the output of the above code is 4. In the above code div element is associated with Angular JS application and that’s the reason the angular js expression is evaluated. In angular JS {{}} is called expression.
[example title=”ng-app directive”]
ng-app directive starts an AngularJS Application. It automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application.In general its used as an attribute of html and body element.
[/example]
There are many other interesting thing about this directive. We will discuss those details in some other article.
Directive ng-init:
Lets see the below example where age is initialized to 25.
[example]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”age=’25′”>
<p>Your age: {{ age}}</p>
</div>
</body>
</html>
[/example]
Output:
Your age: 25
Directive ng-model:
ng-model directive binds data between html elements and application data. Look at the bellow example. In this example we are binding data between input box and the application. As soon as you type something in the input box the data will be binned to myData variable which will be displayed in each key press.
[example]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” >
Enter something: <input name=”anyName” ng-model=”myData”>
<br/>
<br/>
You have entered: {{ myData}}
</div>
</div>
</body>
</html>
[/example]
Directive ng-repeat:
This directive is used for repeating element. Its used on array of objects. In the below example fruits is an array. In the iteration logic eachFruit is just temporary variable which holds fruit name in each iteration. So for each fruit the li element will be repeated.
[example]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”fruits=[‘Apple’,’Mango’,’Orange’]”>
<ul>
<li ng-repeat=”eachFruit in fruits”>
{{ eachFruit }}
</li>
</ul>
</div>
</body>
</html>
[/example]
Output:
- Apple
- Mango
- Orange
