AngularJS Directives

In the last article we studied how AngularJS implements MVC architecure. We also briefly reviewed directives in the last article. Now is the time to study AngularJS directives in detail. Simply put, AngularJS directives are basically attributes that are required for proper functioning of AngularJS applications. In other words, AngularJS directives extend the HTML DOM via additional attributes. Following are the four main directives in AngularJS applications.

  • ng-app
  • ng-init
  • ng-model
  • ng-bind

ng-app

To start an AngularJS application you need to add the “ng-app” directive to any element. Now you can perform AngularJS functionalities within this element. The “ng-app” directive basically initializes an AngularJS application. Whenever a page containing AngularJS application is loaded to the browser, this “ng-app” directive tells the browser where to start the AngularJS application.

ng-init

The “ng-init” directive is used to initialize the application data. For instance if you want to create any variable at the time of initialization of AngularJS application, you could do so via “ng-init”.

ng-model

If you want to bind the value of any html input element to AngularJS application variable, you can do so via ng-model.

ng-bind

Finally if you want to bind the value of AngularJS application variable to the innerhtml of any html element, you can us “ng-bind” directive.

Take a look at the following example to see all of the aforementioned AngularJS directives in action.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="num1=10;num2=3">

Number 1: <input type="number"	ng-model="num1">
Number 2:    <input type="number" ng-model="num2">
    
<h1 ng-bind="num1"></h1>
Number1 multiplied by Number2: {{ num1 * num2 }}


</div>

</body>
</html>

Download the code Try the code

In the above code “ng-app” directive sets a div inside a body as the starting point for AngularJS application. Similarly, “ng-init” directive is added to the opening tag of the div. It is used to initialize “num1” and “num2” application variables. These variables are assigned value “10” and “3” respectively. You can access these variables anywhere inside the application via “ng-model” attribute. Next, using “ng-model” directives, the value of two input text boxes is bound to “num1” and “num2” variables.

Changing the value in first text box will update the value of “num1” variable at run time. Similarly, updating the value in the second text box will update the value of “num2” variable. Next, “ng-bind” directive is used to display the value of “num1” variable inside an “h1” tag. Finally the product of “num1” and “num2” variables have been displayed via AngularJS expression. Now if you change the numbers in the text boxes, you will see the that the product of the numbers will update at run time. This is because the value of the application variables “num1” and “num2” will be changes at run time.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .