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

Your email address will not be published. Required fields are marked *