Angular js : Directives
1) ng-app
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Directives</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Script guru Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
- The “ng-app” directive is added to our div tag to indicate that this application is an angular.js application. Note that the ng-app directive can be applied to any tag, so it can also be put in the body tag as well.
- Because we have defined this application as an angular.js application, we can now make use of the angular.js functionality. In our case, we are using expressions to simply concatenate 2 strings.
2) ng-init
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Directives</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Script guru Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
- The ng-init directive is added to our div tag to define a local variable called “TutorialName” and the value given to this is “AngularJS”.
- We are using expressions in AngularJs to display the output of the variable name “TutorialName” which was defined in our ng-init directive.
3) ng-model
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Directives</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Script guru Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
- The ng-init directive is added to our div tag to define 2 local variables; one is called “quantity” and the other is “price”.
- Now we are using the ng-model directive to bind the text boxes of “People” and “Registration price” to our local variables “quantity” and “price” respectively.
- Finally, we are showing the Total via an expression, which is the multiplication of the quantity and price variables.
4) ng-repeat
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Directives</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Script guru Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
- The ng-init directive is added to our div tag to define a variable called “chapters” which is an array variable containing 3 strings.
- The ng-repeat element is used by declaring an inline variable called “names” and going through each element in the chapters array.
- Finally, we are showing the value of the local inline variable ‘names.’
Leave a Reply