Linking and compiling in Angular

The Angular HTML compilerThe compiler allows you to attach behaviour to any HTML element or attribute or create your own.The compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two stages:Compile Phase - Traverse the DOM and collect all the directives. The result is a linking function.Link Phase- Combine the directives with a scope and produce a live view.How does the compiler work?1. Traverses the DOM and collects all of the directives2. Orders the directives according to their priority3. Each directive's compile function is called4. Each compile function returns a link function, which invokes each directive's returned link function5. Each link function sets up event handlers and $watch functions on the $scopeThe Difference between compile and link- Think of compile as the equivalent of prototype: if you change something in the compile function, it affects *all* instances of the directive.- The link function operates on the directive *instance*. - It is rare to use the compile function directly.Any operation which can be shared amongst all of the instances of the directive should be moved to the compile function for performance reasons.See: https://docs.angularjs.org/guide/compilerSImply:1. Create a DOM element from the HTML2. $compile the template3. Link the compiled template with the scope4. Append to the DOM$compile is for template manipulation, the link function is for adding event handlers, linking to the scope and adding $watch functions