Differentiation of AngularJS Directives

Navdeep kaur Angular Js

If you are interested to learn about the AngularJS module

AngularJS lets you extend HTML with new attributes called Directives. AngularJS has a set of built-in directives which offers functionality to your applications. AngularJS also lets you define your own directives.

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix eg-. The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Example

<div ng-app="" ng-init="firstName='John'">
  <p>Name: <input type="text" ng-model="firstName"><
/p><br>&lt;p>You wrote: {{ firstName }}&lt;/p> &lt;/div>

The ng-app directive also tells AngularJS that the <div> element is the “owner” of the AngularJS application.

Data Binding

The {{ firstName }} expression, in the example above, is an AngularJS data binding expression. Data binding in AngularJS binds AngularJS expressions with AngularJS data.

<code>{{ firstName }}</code>&nbsp;is bound with&nbsp;<code>ng-model="firstName"</code>.

In the next example two text fields are bound together with two ng-model directives:

Example

&lt;div ng-app="" ng-init="quantity=1;price=5"> Quantity: &lt;
input type="number" ng-model="quantity"><br>Costs:    &lt;input type="number" ng-model="price"> Total in dollar:
 {{ quantity * price }} &lt;/div>

Using ng-init is not very common. You will learn how to initialize data in the chapter about controllers.

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

Example

&lt;div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<br>  &lt;ul><br>    &lt;li ng-repeat="x in names"><br>      {{ x }}<br>    &lt;/li><br>  &lt;/ul><br>&lt;/div><br>

The ng-repeat directive actually clones HTML elements once for each item in a collection. The ng-repeat directive used on an array of objects:

Example

&lt;div ng-app="" ng-init="names=[<br>{name:'Jani',country:'Norway'},
<br>{name:'Hege',country:'Sweden'},<br>{name:'Kai',country:'Denmark'}]"> &lt;ul><br>  &lt;
li ng-repeat="x in names"><br>    {{ x.name + ', ' + x.country }}<br>  &lt;/li><br>&lt;/ul> &lt;/div>

AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

The ng-init Directive

The ng-init directive defines initial values for an AngularJS application. Normally, you will not use ng-init. You will use a controller or module instead. You will learn more about controllers and modules later.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data .The ng-model directive can also:

  • Provide type validation for application data (number, email, required).
  • Provide status for application data (invalid, dirty, touched, error).
  • Provide CSS classes for HTML elements.
  • Bind HTML elements to HTML forms.

Read more about the ng-model directive in the next chapter.

Create New Directives

In addition to all the built-in AngularJS directives, you can create your own directives. New directives are created by using the .directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive. When naming a directive, you must use a camel case name, w3TestDirective, but when invoking it, you must use - separated name, w3-test-directive:

Example

&lt;body ng-app="myApp"> &lt;w3-test-directive>&lt;
/w3-test-directive> &lt;script><br>var app = angular.module("myApp", []);<br>app.directive("w3TestDirective", function() {<br>  return {<br>    template : "&lt;h1>Made by a directive!&lt;/h1>"<br>  };<br>});<br>&lt;/script> &lt;/body>

You can invoke a directive by using:

  • Element name
  • Attribute
  • Class
  • Comment

Restrictions

You can restrict your directives to only be invoked by some of the methods.

Example

By adding a restrict property with the value "A", the directive can only be invoked by attributes:

var app = angular.module("myApp", []);<br>app.directive("w3TestDirective", function()
 {<br>  return {<br>    restrict : "A",<br>    template : "&lt;h1>Made by a directive!&lt;/h1>"<br>  };<br>});<br>

The legal restrict values are:

  • E for Element name
  • A for Attribute
  • C for Class
  • M for Comment

By default the value is EA, meaning that both Element names and attribute names can invoke the directive. The following table lists the important built-in AngularJS directives.

DirectiveDescription
ng-appAuto bootstrap AngularJS application.
ng-initInitializes AngularJS variables
ng-modelBinds HTML control’s value to a property on the $scope object.
ng-controllerAttaches the controller of MVC to the view.
ng-bindReplaces the value of HTML control with the value of specified AngularJS expression.
ng-repeatRepeats HTML template once per each item in the specified collection.
ng-showDisplay HTML element based on the value of the specified expression.
ng-readonlyMakes HTML element read-only based on the value of the specified expression.
ng-disabledSets the disable attribute on the HTML element if specified expression evaluates to true.
ng-ifRemoves or recreates HTML element based on an expression.
ng-clickSpecifies custom behavior when an element is clicked.

ng-app

The ng-app directive initializes AngularJS and makes the specified element a root element of the application. Visit ng-app section for more information.

ng-init

The ng-init directive can be used to initialize variables in AngularJS application. The following example demonstrates ng-init directive that initializes variable of string, number, array, and object.Example: ng-init

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 100; myArr = [100, 200]; person = { firstName:'Steve', lastName :'Jobs'}">
        {{amount}}      <br />
        {{myArr[1]}}    <br />
        {{person.firstName}}
    </div>
</body>
</html>

Result:

100
200
Steve

In the above example, we initialized variables of string, number, array and object. These variables can be used anywhere in the DOM element hierarchy where it is declared e.g variables in the above example cannot be used out of <div> element.

ng-model

The ng-model directive is used for two-way data binding in AngularJS. It binds <input>, <select> or <textarea> elements to a specified property on the $scope object. So, the value of the element will be the value of a property and vica-versa.Example: ng-model

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <input type="text" ng-model="name" />
    <div>
       Hello {{name}}
    </div>
</body>
</html>

The property set via ng-model can be accessed in a controller using $scope object. We will look at it in the next section.Note : Variables initialized in ng-init are different from the properties defined using ng-model directive. The variables initialized in ng-init are not attached to $scope object whereas ng-model properties are attached to $scope object.

ng-bind

The ng-bind directive binds the model property declared via $scope or ng-model directive or the result of an expression to the HTML element. It also updates an element if the value of an expression changes.Example: ng-bind

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="">
    <div>
        5 + 5 = <span ng-bind="5 + 5"></span> <br />

        Enter your name: <input type="text" ng-model="name" /><br />
        Hello <span ng-bind="name"></span>
    </div>
</body>
</html>

In the above example, ng-bind directive binds a result of an expression “5 + 5” to the <span>. The same way, it binds a value of a model property “name” to the <span>. The value of “name” property will be the value entered in a textbox.

ng-repeat

The ng-repeat directive repeats HTML once per each item in the specified array collection.Example:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            border: 1px solid green;
            width: 100%;
            height: 50px;
            display: block;
            margin-bottom: 10px;
            text-align:center;
            background-color:yellow;
        }
    </style>
</head>
<body ng-app="" ng-init="students=['Bill','Steve','Ram']">
    <ol>
        <li ng-repeat="name in students">
            {{name}}
        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>

In the above example, ng-repeat is used with students array. It creates <li> element for each item in the students array. Using the same way it repeats the <div> element.

ng-if

The ng-if directive creates or removes an HTML element based on the Boolean value returned from the specified expression. If an expression returns true then it recreates an element otherwise removes an element from the HTML document.

ng-readonly

The ng-readonly directive makes an HTML element read-only, based on the Boolean value returned from the specified expression. If an expression returns true then the element will become read-only, otherwise not.

ng-disabled

The ng-disabled directive disables an HTML element, based on the Boolean value returned from the specified expression. If an expression returns true the element will be disabled, otherwise not. The following example demonstrates ng-if, ng-readonly, and ng-disabled directives.Example: ng-if, ng-readonly, ng-disabled

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        div {
            width: 100%;
            height: 50px;
            display: block;
            margin: 15px 0 0 10px;
        }
    </style>
</head>
<body ng-app ng-init="checked=true" >
    Click Me: <input type="checkbox" ng-model="checked" /> <br />
    <div>
        New: <input ng-if="checked" type="text" />
    </div>
    <div>
        Read-only: <input ng-readonly="checked" type="text" value="This is read-only." />
    </div>
    <div>
        Disabled: <input ng-disabled="checked" type="text" value="This is disabled." />
    </div>
</body>
</html>

Directive Syntax

AngularJS directives can be applied to DOM elements in many ways. It is not mandatory to use ng- syntax only. Directive can start with x- or data-, for example ng-model directive can be written as data-ng-model or x-ng-model. Also, the - in the directive can be replaced with : or _ or both. For example, ng-model can be written as ng_model or ng:model. It can also be a mix with data- or x-.

The following example demonstrates all the rules of a directive syntax.Example: Directives syntax variation

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    Enter Name:  <input type="text" ng-model="name" /> <br />
    data-ng-bind: <span data-ng-bind="name"></span><br />
    data-ng:bind: <span data-ng:bind="name"></span><br />
    data:ng:bind: <span data:ng:bind="name"></span><br />
    x:ng:bind:    <span x:ng:bind="name"></span><br />
    ng:bind:      <span ng:bind="name"></span><br />
    x-ng-bind:    <span x-ng-bind="name"></span><br />
    x_ng_bind:    <span x_ng_bind="name"></span><br />
    ng_bind:      <span ng_bind="name"></span>
</body>
</html>
Differentiation of AngularJS Directives
Show Buttons
Hide Buttons