{"id":11570,"date":"2014-04-17T13:26:57","date_gmt":"2014-04-17T11:26:57","guid":{"rendered":"https:\/\/blog.trifork.com\/?p=11570"},"modified":"2014-04-17T13:26:57","modified_gmt":"2014-04-17T11:26:57","slug":"angular-directives-a-beginners-guide-part-1","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/","title":{"rendered":"Angular Directives, a beginners guide – part 1"},"content":{"rendered":"

What are directives?<\/h3>\n

\"AngularJS-large\"To start with Angular Directives we must first know what Google’s Angular team defines as directives, so I copied a little piece form their website and I’ll comment on that.<\/p>\n

“At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.”<\/p>\n

<\/p>\n

So….in plain English this means you can create your own HTML(DOM) elements or add specific attributes with their own data, behaviour and design.
\nTo give you an idea of what the different types of directives are and look like, I’ve set up some example code which you can download (here<\/a>) or you could look at the codepen examples on this page.<\/p>\n

Attribute<\/strong><\/h3>\n

The attribute directive is actually nothing more then the ability to add a custom attribute to a new or already existing HTML element.<\/p>\n

Creating a directive with only attribute information will not limit you in any way to add your HTML elements or add behaviour. I have to add that it is wise to add your own prefix to prevent overriding current or new native HTML attributes.\u00a0You could add new functionality by adding a empty attribute to a INPUT tag, so it will for example automatically open a date picker on focus. Maybe you want to really specify new functionality by giving the directive some information, so then you would actually fill your newly created attribute with a certain value.<\/p>\n

One of the most basic directive examples is the attribute directive without a value. With this example you add the custom attribute to any HTML(DOM) element and Angular will execute it as shown in the example.<\/p>\n

http:\/\/codepen.io\/dennisdegoede\/pen\/deLct\/<\/p>\n

To make things a little more dynamic and interesting we will now look at the attribute directive with a value. In the following example the parameters are passed through to the Angular directive.<\/p>\n

http:\/\/codepen.io\/dennisdegoede\/pen\/kctsl\/<\/p>\n

Element<\/strong><\/h3>\n

The element directive clearly gives you the idea that you’re creating a new type of HTML element with its own behaviour and looks.<\/p>\n

Codewise the element directive doesn’t differ that much from the attribute directive except for targeting the content between your newly created tag.<\/p>\n

http:\/\/codepen.io\/dennisdegoede\/pen\/aobAy\/<\/p>\n

Choose your approach<\/strong><\/h3>\n

So now (with the examples) we’ve seen the attribute directive (with and without attribute values) and the element directive. There are no rules set when to use a specific approach, but if you think about it, it would make sence that an attribute approach would enhance an already existing element and the element approach would\/should bring something totally new, that doesn’t already exist within the current HTML spec.<\/p>\n

Next time<\/strong><\/h3>\n

On my next post I will go into the other directives ‘class’ and ‘comment’, why you would choose to use them. Also I’ll create some example where directives enhance\/add (new) behaviour.<\/p>\n","protected":false},"excerpt":{"rendered":"

What are directives? To start with Angular Directives we must first know what Google’s Angular team defines as directives, so I copied a little piece form their website and I’ll comment on that. “At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell […]<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[366,78,87,10],"tags":[109,381],"class_list":["post-11570","post","type-post","status-publish","format-standard","hentry","category-angularjs-development","category-frontend","category-html5-mobile","category-development","tag-angularjs","tag-directives"],"acf":[],"yoast_head":"\nAngular Directives, a beginners guide - part 1 - Trifork Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Directives, a beginners guide - part 1 - Trifork Blog\" \/>\n<meta property=\"og:description\" content=\"What are directives? To start with Angular Directives we must first know what Google’s Angular team defines as directives, so I copied a little piece form their website and I’ll comment on that. “At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Trifork Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-17T11:26:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png\" \/>\n<meta name=\"author\" content=\"Dennis de Goede\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dennis de Goede\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/\",\"url\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/\",\"name\":\"Angular Directives, a beginners guide - part 1 - Trifork Blog\",\"isPartOf\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png\",\"datePublished\":\"2014-04-17T11:26:57+00:00\",\"author\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca\"},\"breadcrumb\":{\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#primaryimage\",\"url\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png\",\"contentUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/trifork.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Directives, a beginners guide – part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trifork.nl\/blog\/#website\",\"url\":\"https:\/\/trifork.nl\/blog\/\",\"name\":\"Trifork Blog\",\"description\":\"Keep updated on the technical solutions Trifork is working on!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trifork.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca\",\"name\":\"Dennis de Goede\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g\",\"caption\":\"Dennis de Goede\"},\"url\":\"https:\/\/trifork.nl\/blog\/author\/dennisgo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Directives, a beginners guide - part 1 - Trifork Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Angular Directives, a beginners guide - part 1 - Trifork Blog","og_description":"What are directives? To start with Angular Directives we must first know what Google’s Angular team defines as directives, so I copied a little piece form their website and I’ll comment on that. “At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell […]","og_url":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/","og_site_name":"Trifork Blog","article_published_time":"2014-04-17T11:26:57+00:00","og_image":[{"url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png","type":"","width":"","height":""}],"author":"Dennis de Goede","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dennis de Goede","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/","url":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/","name":"Angular Directives, a beginners guide - part 1 - Trifork Blog","isPartOf":{"@id":"https:\/\/trifork.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#primaryimage"},"image":{"@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png","datePublished":"2014-04-17T11:26:57+00:00","author":{"@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca"},"breadcrumb":{"@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#primaryimage","url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png","contentUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/03\/AngularJS-large.png"},{"@type":"BreadcrumbList","@id":"https:\/\/trifork.nl\/blog\/angular-directives-a-beginners-guide-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/trifork.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Directives, a beginners guide – part 1"}]},{"@type":"WebSite","@id":"https:\/\/trifork.nl\/blog\/#website","url":"https:\/\/trifork.nl\/blog\/","name":"Trifork Blog","description":"Keep updated on the technical solutions Trifork is working on!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trifork.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/6fd45da4df6b6ebbdfc9ce92ee77b4ca","name":"Dennis de Goede","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fbd3a339f11b324e87ad85cd80b5baad?s=96&d=mm&r=g","caption":"Dennis de Goede"},"url":"https:\/\/trifork.nl\/blog\/author\/dennisgo\/"}]}},"_links":{"self":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/11570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/comments?post=11570"}],"version-history":[{"count":0,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/11570\/revisions"}],"wp:attachment":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/media?parent=11570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/categories?post=11570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/tags?post=11570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}