LogoLoading Please Wait...

How To Work With AngularJs Directives

# Custom Web Development
By divine_admin_infosys

AngularJS Directives :

  • It extends HTML with most recent highlights that is Directives.
  • It has a collection of implicit directives which provides support to our applications.
  • You can define your own Directives.

AngularJS Directives

Its directives are expanded HTML features with the affix ng-

  • ng-app : With this we can do initialization in AngularJS application.
  • ng-init: It initializes the data of application.
  • ng-model: impasses the value of HTML controls like:-input, select, textarea to data of your application.

Example

<div ng-app=”” ng-init=”product=’Bread'”>
<p>Product Name: <input type=”text” ng-model=”product”></p>
<p>Product Name is: {{ product }}</p>
</div>

The ng-app directive additionally describes that the <div> component is the proprietor of the angular application.

Data Binding

We can bind the data using ng-model directive.

In the below example we are going to bind two text fields using ng-model directives:

Example

<div data-ng-app=”” data-ng-init=”firstname=Angular;lastname=Js”>
First Name: <input type=”text” ng-model=”firstname”>

Last Name <input type=”text” ng-model=”lastname”>

<p><b>Name:</b> {{firstname + ” ”  + lastname}}</p>
</div>

Repeating HTML Elements

  • For repeating html elements in AngularJs you can use ng-repeat
  • The element set of HTML will be repeated once per item in a bunch.
  • The Bunch should be an object or an array.

Example Using Array of Objects

<div ng-app=”” ng-init=”productdetail=[
{name:’Bread’,price:’40’},
{name:’Cheese’,price:’100′}]”>
<ul>
<li ng-repeat=”product in productdetail”>
{{ product.name + ‘, ‘ + product.price }}
</li>
</ul>
</div>

The ng-app Directive

  • In AngularJs ng-app describe the root element of application.
  • It will automatically initialize/auto-bootstrap the application at that time of web page loading.
  • In your HTML document, you can only have one ng-app directive. If you use ng-app directive multiple place and time than firstly seen ng-app directive will be used.

The ng-init Directive

  • For AngularJs application it defines initial values.
  • Fundamentally, you won’t utilize ng-init. You will utilize a controller or module.

The ng-model Directive

For binding the data of HTML controls like:-input, select, textarea to application data.

The ng-model directive can likewise:

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

Create New Directives

  • Using AngularJs you can built your own directives.
  • You can create your own directive using .directive function.
  • To invoke the new directive, make an HTML element with the same tag name as the new directive.
  • Make a HTML component with a similar label name like the new mandate to summon the order that is made by you.
  • Camel case names were used to name the directive (aNewDirective) and at time of invoking you have to use hyphen (-) separator (a-new-directive).

Example

<body ng-app=”directive1″>
<a-new-directive></a-new-directive>
<script>
var dir = angular.module(“directrive1”, []);
dir.directive(“aNewDirective”, function() {
return {
template : “<p>Created New Directive</p>”
};
});
</script>
</body>

Directives can be invoked by using:

  • Element name
  • Attribute
  • Class
  • Comment

Example

Element name

<a-new-directive></a-new-directive>

Attribute

<p a-new-directive></p>

Class

<p class=”a-new-directive”></p>

Comment

<!—New Directive: a-new-directive –>

Restrictions

If you want to restrict your directive usage. Like,If you want that your directives will be invoked by some of the methods.

For restricting the directives use restrict property.

Example

var dir = angular.module(“directive1”, []);
dir.directive(“aNewDirective “, function() {
return {
restrict : “E”,
template : “<p>Created New Directive</p>”
};
});

The legal restrict values are:

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

Utilizing value CM, It implies that both class and remark can summon the order.

Conclusion

After summarizing all the AngularJs directives that are listed above. We can say that directives are attribute on a DOM element that tell AngularJS to join a specified actions to that DOM element or even convert the DOM element and its children. it broadens the HTML.

Refer more AngularJs Directive.

Source:- http://www.w3schools.com

 Back to Blogs
Divine Infosys