Introduction
I am here with another blog on AngularJs as I promised to cover directives in my next blog. If you are new, then please refer to “Introduction to Angular”, my previous blog.
We covered so far!
- Angular Architecture
- How AngularJS is MV*
- Controllers and Scope
Now we learn about AngularJS innovative concept, which they called as directives. According to the Angular documentation, directives are a way to teach HTML new tricks. Essentially, directives give HTML new functionality. As Angular parses through your HTML, it will look for directives and then take action based on what it finds.
First, let's talk about why we need directives. When HTML was first created, it was never intended to do the things that we do with it today.
It was intended to create static documents, but before long we started trying to use it as a platform for collecting and showing dynamic data. We wanted dynamic documents. And as our needs grew, we started trying to stretch HTML to do more and more. As our needs evolve, we find ourselves needing HTML to be more of a programming language than just markup for creating static documents.
Evidence of this can be found in Web Components. If you aren't familiar with web components, it is a draft proposal in the current W3C specification and it allows for creating your own custom HTML elements with embedded functionality. Consider the following markup from the W3C draft specification. This markup is creating a new custom element called FancyButton. Notice that it has built-in functionality, razzle and dazzle.
The bad news is web components is currently a draft specification and so is not currently supported in most browsers, a big problem for most sites.
But the good news is, AngularJS directives give you cross-browser, web component-like functionality today. And, especially when you consider its integration with the rest of the AngularJS framework, I actually believe that Angular's directives are more powerful and once you understand them, easier to write than web components will be.
Essential Parts of Directives
There are actually four ways to specify directives with Angular. The first one is actually as a tag itself. For example, the ng-form directive is a tag. The other way is where the directive is an attribute of a tag. Here, we can ng-form written as an attribute. And the third way that we can write directives is as a class.
Now, not all directives can be written out as tags, attributes, and as classes. Often times, a particular directive can only be written out in one or two of these forms. I mentioned that there are four ways to write out directives and we have only looked at three. The fourth way to write out a directive is inside of an HTML comment.
Let’s Create Our First Directive
We take our last example for creating calculator, and now for showing result, we will use calcResult directive.
HTML
JS
To create our calcResult directive, on our calc module, we call special function directive provided by angularjs which accepts name of directive “calcResult” and function which returns the below explained things.
restrict - Specify how a directive should be used in HTML. In our case, we have set it to ‘E’. So, the directive can be used as a new HTML element. To allow this directive to be used as an attribute, we can set restrict to ‘A’ or for both ‘AE’.replace - Specifies if the generated template will replace the HTML element on which the directive is attached. In our case, we have used the directive as <calc-result></calc-result>, and replace is set to true. So, after the directive is compiled, the produced output template replaces with final output. If we set replace to false, the default, the output template will be inserted into the element on which the directive is invoked.template – Specifies the HTML markup that will be produced when the directive is compiled and linked by Angular. Template can be complex, often involving other directives, expressions ({{ }}), etc. I will recommend to use templateUrl instead of template to separate HTML into another file and make templateUrl point to the path.scope – Specify use a child scope that inherits from parent, by set true, the default. Most of the case we should isolate the scope of the directive. To isolate scope and use locally for directive use scope: {}, this will not inherit scope from parent. Isolated scopes are good when we want to create reusable components.
See this working @ http://codepen.io/anon/pen/VeZRMB.
Summary
In this post, we learn about essential part of directive and we create our first directive. And then, we talked about scope, template, replace and restrict in directive.
