jQuery, they process the template as a string and result as a string. We have to inject this result string into the
innerHTML() 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.
The AngularJS way
AngularJS processes the template in entirely different way. It works directly on
HTML DOM 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.
Note that Angular processes on DOM nodes instead of strings contents.
There are basically two phases in which Angular does this,
The concept of
link comes from
C language, where you first compile the code and then link it to actually execute it. The process is very much similar in
AngularJS as well.
1. Compile –
$compile function traverse the
DOM and collect all directives 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
var $compile = ...; // injecte $comple into our code to get link function var scope = ...; // scope for new directive var parent = ...; // DOM element where we want to apply our directive var html = '<div ng-show="data"></div>'; // Our HTML code var template = angular.element(html); // Step 1A: parse HTML into DOM element to pass in $compile to get link function var linkFn = $compile(template); // Step 1B: compile the template and return link function
2. Link – The above link function (Returned by
$compile 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.
var element = linkFn(scope); // Step 2A: link 'scope' with the compiled template (Two way binding). parent.appendChild(element); // Step 2B: Inject our element to parent DOM element
This can help in scenarios where you get some Markup as a string, and want it to use it with
AngularJS, you’ll need to compile the HTML to make it work.
Hope this will help you to understand the compilation process in AngularJS.