Component in AngularJS

When we are working on front-end part, then many times we face a situation where same HTML repeats on the same page or different pages, at that time we think of making that HTML a component. When using AngularJS framework, we can easily make components with the help of directives. Let’s quickly understand what a directive is?
A directive is a marker on DOM element, which tells AngularJS to bind a specified behavior to the DOM element and its children elements. AngularJS itself provides many built-in directives e.g. ngRepeat, ngShow, ngModel etc. AngularJS is case-sensitive while html is case-insensitive, so defining a directive with AngularJS and using a directive with html have a slightly different signature. Let’s see a very commonly used directive ngModel:

[js]

[/js]

We have marked ngModel directive to DOM element (input). We are using directive on html as ‘ng-model‘ (small letters with dash/minus as delimiter for camelCase words) while its actually defined with AngularJS as ngModel. Now let’s create a simple custom directive (We define a directory to register it with module via module.directive API).

[js]
var directiveTestApp = angular.module(‘directiveTest’, []);
directiveTestApp.directive(‘myTemplate’, function () { // Registering myTemplate directive to directiveTest module
return {
/*
* Restricting a directive by providing a restrict field so that it can be used as:
* E stands for Element
* C stand for Class name
* M stands for Comment
* A stands for Attribute
* Here we are defining directive with all the types, if we don’t provide restrict field then default value is
* ‘A’ means directive can be used as attribute only.
* */
restrict: "ECMA", // directive can be used as attribute, element, class or comment.
replace: true, // replace indicates that we want to replace whole div or only inner HTML, default value is false.
template: "</pre>
<div>this is directive template test</div>
<pre>
" // DOM element should be replaced with this.
// If you want to provide template content from HTML file use templateUrl option instead of template
};
});
[/js]

To define a directive, we use module.directive API, in which first argument is name of directive, and second argument is function which returns an object with all the options. This function is called at the time of initializing the directive. Therefore this function is also know as factory function. For the first time when AngularJS finds the use of directive, it calls this factory function and stores the results for future use.

We can use directive on html as attribute, tag element, class name and comment as below:

[js]
1. Attribute Directive:</pre>
<div></div>

<hr />

<pre>2. Element Directive:</pre>

<hr />

<pre>3. Class Directive:</pre>
<div class="my-template"></div>

<hr />

<pre>4. Comment Directive: <!– directive: my-template hello –></pre>

<hr />

<pre>[/js]

NOTE: You can checkout full working source code from this link.
More Blogs by Me