Basic 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.

Example

<div ng-app=”” ng-init=”firstName=’Demo'”>

<p>Name: <input type=”text” ng-model=”firstName”></p>

<p>You wrote: {{ firstName }}</p>

</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. {{ firstName }} is bound with ng-model=”firstName”.

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

Example

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

Quantity: <input type=”number” ng-model=”quantity”>

Costs:    <input type=”number” ng-model=”price”>

Total in dollar: {{ quantity * price }}

</div>

Using ng-init is not very common.

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

Example

<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”>

<ul>

<li ng-repeat=”x in names”>

{{ x }}

</li>

</ul>

</div>

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

<div ng-app=”” ng-init=”names=[

{name:’Jani’,country:’Norway’},

{name:’Hege’,country:’Sweden’},

{name:’Kai’,country:’Denmark’}]”>

<ul>

<li ng-repeat=”x in names”>

{{ x.name + ‘, ‘ + x.country }}

</li>

</ul>

</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.

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.

With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>

Name: <input ng-model=”name”>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

$scope.name = “Demo User”;

});

</script>

Two-Way Binding – The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value:

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>

Name: <input ng-model=”name”>

<h1>You entered: {{name}}</h1>

</div>

Validate User Input – The ng-model directive can provide type validation for application data (number, e-mail, required):

Example

<form ng-app=”” name=”myForm”>

Email:

<input type=”email” name=”myAddress” ng-model=”text”>

<span ng-show=”myForm.myAddress.$error.email”>Not a valid e-mail address</span>

</form>

In the example above, the span will be displayed only if the expression in the ng-show attribute returns true.

If the property in the ng-model attribute does not exist, AngularJS will create one for you.

Application Status – The ng-model directive can provide status for application data (invalid, dirty, touched, error):

Example

<form ng-app=”” name=”myForm” ng-init=”myText = ‘[email protected]'”>

Email:

<input type=”email” name=”myAddress” ng-model=”myText” required>

<h1>Status</h1>

{{myForm.myAddress.$valid}}

{{myForm.myAddress.$dirty}}

{{myForm.myAddress.$touched}}

</form>

CSS Classes – The ng-model directive provides CSS classes for HTML elements, depending on their status:

Example

<style>

input.ng-invalid {

background-color: lightblue;

}

</style>

<body>

<form ng-app=”” name=”myForm”>

Enter your name:

<input name=”myName” ng-model=”myText” required>

</form>

The ng-model directive adds/removes the following classes, according to the status of the form field:

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

ng-pristine

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

<body ng-app=”myApp”>

<w3-test-directive></w3-test-directive>

<script>

var app = angular.module(“myApp”, []);

app.directive(“w3TestDirective”, function() {

return {

template : “<h1>Made by a directive!</h1>”

};

});

</script>

</body>

You can invoke a directive by using:

• Element name
• Attribute
• Class
• Comment

The examples below will all produce the same result:

Element name

<w3-test-directive></w3-test-directive>

Attribute

<div w3-test-directive></div>

Class

<div class=”w3-test-directive”></div>

Comment

<!– directive: w3-test-directive –>

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”, []);

app.directive(“w3TestDirective”, function() {

return {

restrict : “A”,

template : “<h1>Made by a directive!</h1>”

};

});

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.