mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
34 lines
1.6 KiB
Text
34 lines
1.6 KiB
Text
@ngdoc overview
|
|
@name Developer Guide: Angular HTML Compiler: Understanding How the Compiler Works
|
|
@description
|
|
|
|
The {@link api/angular.module.ng.$compile compiler} is responsible for applying
|
|
{@link guide/directive directives} to the HTML. The directives
|
|
extend the behavior of HTML elements and can effect the DOM structure, presentation, and behavior.
|
|
This allows Angular to teach the browser new tricks.
|
|
|
|
The compilation starts at the root element and proceeds in a depth-first order. As the compiler
|
|
visits each node it collects the directives, orders them by priority and executes their compile
|
|
function. The result of the compilation process is a linking function. The linking function
|
|
can be used on the template clones to quickly bind the directives with the scope.
|
|
|
|
The result of the compilation process is a live view. We say 'live' since any changes to the
|
|
model attached to the {@link api/angular.module.ng.$rootScope.Scope scope} are reflected in the view,
|
|
and any changes in the view are reflected in the scope. This makes the scope the 'single source of
|
|
truth'.
|
|
|
|
Since directives allow attachment of behavior to the HTML, the angular philosophy is to use the
|
|
HTML as Domain Specific Language (DSL) when building an application. For example it may be useful
|
|
to declare `TabPanel` directive, or `KeyboardShortcut` directive when for an application.
|
|
|
|
For details on how directives are created see {@link guide/directive
|
|
directives}
|
|
|
|
## Related Topics
|
|
|
|
* {@link dev_guide.compiler Angular HTML Compiler}
|
|
* {@link dev_guide.compiler.testing_dom_element Testing a New DOM Element}
|
|
|
|
## Related API
|
|
|
|
* {@link api/angular.module.ng.$compile $compile()}
|