{"id":10226,"date":"2013-04-25T17:06:57","date_gmt":"2013-04-25T11:36:57","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=10226"},"modified":"2017-08-03T16:04:05","modified_gmt":"2017-08-03T10:34:05","slug":"angularjs-getting-started-with-directives","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angularjs-getting-started-with-directives\/","title":{"rendered":"AngularJS : Getting started with Directives"},"content":{"rendered":"

In this post we will go through an important aspect of AngularJS<\/a> i.e., Directives<\/strong>.<\/p>\n

Directives<\/a> helps us do things in a better and cleaner way. Lets get into the code rather going into\u00a0theoretical\u00a0explanations, which will make it more clear what actually directives do.<\/p>\n

We have written a simple directive below which shows some HTML when the element being created is encountered.<\/p>\n

[html]<\/p>\n

<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.1\/angular.min.js" type="text\/javascript"><\/script><\/p>\n

<\/pre>
\n<div><\/div>
\n<pre>
\n<script>\/\/ <![CDATA[<\/p>\n

myApp = angular.module("FirstDirective",[]);<\/p>\n

myApp.directive(‘mytag’,function(){
\n return {
\n restrict: "E",
\n template: "<strong>This is a great First Directive<\/strong>",
\n replace: true,
\n }
\n})<\/p>\n

\/\/ ]]><\/script><\/p>\n

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

In the above code, we have “mytag” element which when encountered in HTML renders the corresponding template. \u00a0Lets see what the code does,<\/p>\n

myApp.directive()<\/strong> is another syntax that we have to remember. The first argument in this is the name of the tag that you want, in our case its “mytag”<\/strong>. Second thing is a factory function which returns an object that defines the directive properties.<\/p>\n

In this object we have set “restrict”<\/strong> as E which makes it an Element that can be used like any of HTML tags. The second option “template”<\/strong> defines the HTML template to be loaded and the third option “replace”<\/strong> if set to true replaces the current element with the template.<\/p>\n

We will learn more about other options available to us in the next post.<\/p>\n

Hope it Helps! Feel free to ask if you have any queries.<\/p>\n

Read Further on AngularJS Series<\/p>\n