{"id":23230,"date":"2015-07-21T13:50:41","date_gmt":"2015-07-21T08:20:41","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=23230"},"modified":"2017-08-03T13:19:10","modified_gmt":"2017-08-03T07:49:10","slug":"directive-compilation-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/directive-compilation-in-angularjs\/","title":{"rendered":"Directive compilation in angularjs"},"content":{"rendered":"<h2 style=\"background: none !important; padding-bottom: 0 !important;\">Manipulating DOM<\/h2>\n<p>If we have worked on templates in other JavaScript framework\/library like <code>Backbone<\/code> and <code>jQuery<\/code>, they process the template as a string and result as a string. We have to inject this result string into the <code>DOM<\/code> using <code>innerHTML()<\/code> or some other way, because there is no two way binding that needs to happen, we render the markup once, and do it again when any changes are there. But it is not the case in AngularJS.<\/p>\n<h2 style=\"background: none !important; padding-bottom: 0 !important;\">The AngularJS way<\/h2>\n<p><code>AngularJS<\/code> processes the template in entirely different way. It works directly on <code>HTML DOM<\/code> fragments(in memory) rather than strings and manipulates it as required. It uses two-way data-binding between model and view to sync our data.<\/p>\n<p>Note that <strong>Angular processes on DOM nodes instead of strings contents<\/strong>.<\/p>\n<p>There are basically two phases in which <a title=\"Angular Development\" href=\"http:\/\/www.tothenew.com\/front-end-angularjs-development\">Angular<\/a> does this, <code>compile<\/code> and <code>link<\/code>.<\/p>\n<p>The concept of <code>compile<\/code> and <code>link<\/code> comes from <code>C<\/code> language, where you first compile the code and then link it to actually execute it. The process is very much similar in <code>AngularJS<\/code> as well.<\/p>\n<h2 style=\"background: none !important; padding-bottom: 0 !important;\">The Process<\/h2>\n<p>1. <strong>Compile<\/strong> &#8211; <code>$compile<\/code> function traverse the <code>DOM<\/code> and collect all <a href=\"http:\/\/www.tothenew.com\/blog\/deep-dive-into-angular-directives\/\">directives<\/a> from DOM. For each directive it finds, it adds it to a list of directives. Once the entire DOM has been traversed, it will sort that list of directives by their priority. It takes our HTML markup or template one by one and returns a <code>link<\/code> function.<\/p>\n<p>[js]<br \/>\nvar $compile = &#8230;; \t\/\/ injecte $comple into our code to get link function<br \/>\nvar scope = &#8230;;\t\t\/\/ scope for new directive<br \/>\nvar parent = &#8230;;\t\t\/\/ DOM element where we want to apply our directive<br \/>\nvar html = &#8216;&lt;div ng-show=&quot;data&quot;&gt;&lt;\/div&gt;&#8217;;  \/\/ Our HTML code<\/p>\n<p>var template = angular.element(html);   \/\/ Step 1A: parse HTML into DOM element to pass in $compile to get link function<\/p>\n<p>var linkFn = $compile(template);\t\t\/\/ Step 1B: compile the template and return link function<\/p>\n<p>[\/js]<\/p>\n<p>2. <strong>Link<\/strong> &#8211; The above link function (Returned by <code>$compile<\/code> function) combines the directives with a scope to give as two way data binding. Any data-related changes affecting the model are immediately propagated to the matching view(s), and any changes made in the view(s) are reflected in the underlying model.<\/p>\n<p>[code lang=&#8221;javascript&#8221;]<\/p>\n<p>var element = linkFn(scope);   \/\/ Step 2A: link &#8216;scope&#8217; with the compiled template (Two way binding).<\/p>\n<p>parent.appendChild(element);   \/\/ Step 2B: Inject our element to parent DOM element<\/p>\n<p>[\/code]<\/p>\n<p>This can help in scenarios where you get some Markup as a string, and want it to use it with <code>AngularJS<\/code>, you&#8217;ll need to compile the HTML to make it work.<\/p>\n<p>Hope this will help you to understand the compilation <a title=\"Building Intuitive Frontend Interfaces with AngularJS\" href=\"http:\/\/www.tothenew.com\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">process in AngularJS<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Manipulating DOM If we have worked on templates in other JavaScript framework\/library like Backbone and jQuery, they process the template as a string and result as a string. We have to inject this result string into the DOM using innerHTML() or some other way, because there is no two way binding that needs to happen, [&hellip;]<\/p>\n","protected":false},"author":149,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[1439,1],"tags":[3955,4697,2005,1189],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/23230"}],"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\/149"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=23230"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/23230\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=23230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=23230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=23230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}