{"id":12988,"date":"2014-04-15T18:51:17","date_gmt":"2014-04-15T13:21:17","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=12988"},"modified":"2017-08-03T16:01:32","modified_gmt":"2017-08-03T10:31:32","slug":"component-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/component-in-angularjs\/","title":{"rendered":"Component in AngularJS"},"content":{"rendered":"

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<\/a>, we can easily make components<\/strong> with the help of directives<\/strong>. Let’s quickly understand what a directive<\/strong> is?
\nA directive<\/a> is a marker on DOM element, which tells AngularJS to bind a specified behavior<\/a> to the DOM element and its children elements. AngularJS<\/strong> itself provides many built-in directives<\/strong> e.g. ngRepeat<\/strong>, ngShow<\/strong>, ngModel<\/strong> etc. AngularJS<\/strong> is case-sensitive while html is case-insensitive, so defining a directive<\/strong> with AngularJS<\/strong> and using a directive<\/strong> with html have a slightly different signature. Let’s see a very commonly used directive<\/strong> ngModel<\/strong>:<\/p>\n

[js]<\/p>\n

[\/js]<\/p>\n

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

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

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

We can use directive<\/strong> on html as attribute, tag element, class name and comment as below:<\/p>\n

[js]
\n1. Attribute Directive:<\/pre>
\n<div><\/div><\/p>\n

<hr \/><\/p>\n

<pre>2. Element Directive:<\/pre><\/p>\n

<hr \/><\/p>\n

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

<hr \/><\/p>\n

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

<hr \/><\/p>\n

<pre>[\/js]<\/p>\n

NOTE<\/strong>: You can checkout full working source code from this link<\/a>.
\nMore Blogs by Me<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[1185],"tags":[3955,955,4697,1387,1189,1388],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/12988"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=12988"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/12988\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=12988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=12988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=12988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}