Total Pageviews

Wednesday 4 May 2016

AngularJs :: Create Custom Directives

AngularJs has an essential segment called "Directives", used to enhance the capability of HTML by extending its attributes and making new one as your application requirements and with numerous implicit one's.

Directives used to manipulate DOM elements and also it can change the behavior of DOM element by adding custom functionality.

Image Courtesy from Internet


AngularJs built-in directives :
  • ng-init
  • ng-app
  • ng-click
  • ng-show
  • ng-model
  • ng-repeat
Image Courtesy from Internet


By using 'ng-' prefix, AngularJs directives extends HTML attribute.

Sometimes a question popups into our mind that why Directives used?

Directives are designed to create standalone reusable component which can be used in applications required an existing element with different functionality. Very common example is <input> button with date-picker functionality.

Directives used to make HTML more interactive by adding event listeners.

Best Practices : All DOM manipulations should be done by directives only no controller should be involved to manipulate DOM.

To create a your own directive (Custom Directive), there is a list of steps :
  • Create a new html tag like <test></test>.
  • Name of html tag should follow the camelCase naming convention. If directive name is like "myTestTag", then this should be invoke like <my-test-tag>. Name should be separated by -.
  • Define custom directive using .directive function with the same name as custom html tag.

Below is the example of custom directive :

var app = angular.module('myapp', []);
app.directive('test', function() {
  return {
      restrict: 'AE',
      template: '<h3>Hello World!!</h3>'
  };
});

Here,

directive function used to create directive which returns an object called as Directive Defination Object(DDO) in its callback function.
'restrict' option used to specify that how directive will be used as element, class, or attribute.
There are few predefined valid values for restrict option.

'A' - directive will be used as attribute i.e. <div test></div>
'E' - directive will be used as element i.e. <test></test>
'C' - directive will be used as class i.e. <div class="test"></div>
'M' - directive will be used as comment i.e. <!- directive:test ->

By default restrict has option 'EA' that is we can use it as class and attribute.
Its recommend that custom directive doesn't support by IE and older browser so we should not use it as element.

A custom directive just replaces the component for which it is initiated. AngularJS application during bootstrap finds the matching components and do one time action utilizing its compile() method of custom directive then process the element using link() method of the custom directive based on the scope of the directive.

Another option of DDO object is 'scope', used to distinguish each element based on criteria.

Found a very simple example of custom directive usage here.

Hope this article will be useful.








10 comments:




  1. The great service in this blog and the nice technology is visible in this blog. I am really very happy for the nice approach is visible in this blog and thank you very much for using the nice technology in this blog
    Angularjs course in chennai

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. The great service in this blog and the nice technology is visible in this blog. I am really very happy for the nice approach is visible on Angualrjs Course

    ReplyDelete
  4. Thank you for sharing valuable information.
    Angularjs online training

    ReplyDelete
  5. Great, thanks for sharing this post .Much thanks again. Awesome.
    python training
    angular js training
    selenium trainings

    ReplyDelete
  6. Impressive web site, Distinguished feedback that I can tackle. Im moving forward and may apply to my current job as a pet sitter, which is very enjoyable, but I need to additional expand. Regards. check this site

    ReplyDelete

Microsoft Logo using flexbox and Reactjs

 <!DOCTYPE html> <html> <head>     <script src="https://unpkg.com/react@18/umd/react.development.js" crossori...