❮ Ng Ng Keyup Angularjs Html Events ❯

AngularJS Directives

AngularJS extends HTML with new attributes called directives.

AngularJS comes with built-in directives that add functionality to your applications.

AngularJS allows you to create your own custom directives.

AngularJS Directives

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.

For a complete list of directives, refer to the AngularJS Reference Manual.

AngularJS Example

<div ng-app="" ng-init="firstName='John'">

     <p>Try entering text in the input field:</p>
     <p>Name: <input type="text" ng-model="firstName"></p>
     <p>You entered: {{ firstName }}</p>

</div>

The ng-app directive 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 synchronizes AngularJS expressions with AngularJS data.

{{ firstName }} is synchronized with ng-model="firstName".

In the next example, two text fields are synchronized with two ng-model directives:

AngularJS Example

<div ng-app="" ng-init="quantity=1;price=5">

<h2>Price Calculator</h2>

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Total:</b> {{ quantity * price }}</p>

</div>

| | Using ng-init is not common. You will learn a better way to initialize data in the chapter on controllers. | | --- | --- |

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

AngularJS Example

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

The ng-repeat directive also works on object arrays:

AngularJS Example

&lt;div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>Looping through objects:</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

| | AngularJS is perfect for CRUD (Create, Read, Update, Delete) applications. Think of the objects in the example as database records. | | --- | --- |

ng-app Directive

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive automatically bootstraps the application when the web page is loaded.

You will learn later how ng-app can be connected to a module with a value (e.g., ng-app="myModule").

ng-init Directive

The ng-init directive defines initial values for an AngularJS application.

Normally, you would not use ng-init. Instead, you would use a controller or module.

You will learn more about controllers and modules later.

ng-model Directive

The ng-model directive binds HTML elements to application data.

The ng-model directive also:

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

ng-repeat Directive

The ng-repeat directive clones an HTML element once for each item in a collection (array).

Creating Custom Directives

In addition to built-in directives, you can create custom directives.

You can use the .directive function to add custom directives.

To invoke a custom directive, add the custom directive name to an HTML element.

Use camelCase to name a directive, tutorialproDirective, but use hyphens when invoking it, tutorialpro-directive:

AngularJS Example

<body ng-app="myApp"><tutorialpro-directive></tutorialpro-directive>
    <script>var app = angular.module("myApp", []);app.directive("tutorialproDirective", 
    function() {    return {        
    template : "<h1>Custom Directive!</h1>"    };
    });</script>
    </body>

You can invoke a directive by:

Element name
Attribute
Class
Comment

The following examples produce the same result:

Element name

<tutorialpro-directive></tutorialpro-directive>

Attribute

<div tutorialpro-directive></div>

Class

<div class="tutorialpro-directive"></div>

Comment

<!-- directive: tutorialpro-directive -->

Restrictions

You can restrict your directive to be invoked only in certain ways.

Example

By adding the restrict property and setting its value to "A", you can restrict the directive to be invoked only as an attribute:

var app = angular.module("myApp", []);app.directive("tutorialproDirective", 
    function() {    return {        
    restrict : "A",        
    template : "<h1>Custom Directive!</h1>"    };
    });

The restrict property can have the following values:

E for element name
A for attribute
C for class
M for comment

The default value for restrict is EA, allowing the directive to be invoked by element name and attribute.

❮ Ng Ng Keyup Angularjs Html Events ❯