aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc
diff options
context:
space:
mode:
authorMisko Hevery2011-12-14 02:55:31 +0100
committerMisko Hevery2012-01-25 11:53:59 -0800
commit4804c83b7db5770d5d02eea9eea4cc012b4aa524 (patch)
treebe5ae1743179704cc1638f186cddba8d6e3fa37d /docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc
parente2b1d9e994e50bcd01d237302a3357bc7ebb6fa5 (diff)
downloadangular.js-4804c83b7db5770d5d02eea9eea4cc012b4aa524.tar.bz2
docs(compiler): update the compiler docs
Diffstat (limited to 'docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc')
-rw-r--r--docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc96
1 files changed, 0 insertions, 96 deletions
diff --git a/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc b/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc
deleted file mode 100644
index 90c7f5e2..00000000
--- a/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc
+++ /dev/null
@@ -1,96 +0,0 @@
-@ngdoc overview
-@name Developer Guide: Angular HTML Compiler: Extending the Angular Compiler
-@description
-
-Let's say that we want to create a new DOM element called `<my:greeter/>` that displays a greeting.
-We want this HTML source:
-
-<pre>
- <div ng:init="s='Hello'; n='World'">
- <my:greeter salutation="s" name="n"></my:greeter>
- </div>
-</pre>
-
-to produce this DOM:
-
-<pre>
-<div ng:init="s='Hello'; n='World'">
-<my:greeter salutation="s" name="n"/>
- <span class="salutation">Hello</span>
- <span class="name">World</span>!
-</my:greeter>
-</div>
-</pre>
-
-That is, the new `<my:greeter></my:greeter>` tag's `salutation` and `name` attributes should be
-transformed by the compiler such that two `<span>` tags display the values of the attributes, with
-CSS classes applied to the output.
-
-The following code snippet shows how to write a following widget definition that will be processed
-by the compiler. Note that you have to declare the {@link dev_guide.bootstrap namespace} `my` in
-the page:
-
-<pre>
-angular.widget('my:greeter', function(compileElement){
- var compiler = this;
- compileElement.css('display', 'block');
- var salutationExp = compileElement.attr('salutation');
- var nameExp = compileElement.attr('name');
- return function(linkElement){
- var salutationSpan = angular.element('<span class="salutation"></span');
- var nameSpan = angular.element('<span class="name"></span>');
- linkElement.append(salutationSpan);
- linkElement.append(' ');
- linkElement.append(nameSpan);
- linkElement.append('!');
- this.$watch(salutationExp, function(value){
- salutationSpan.text(value);
- });
- this.$watch(nameExp, function(value){
- nameSpan.text(value);
- });
- };
-});
-</pre>
-
-
-Note: For more about widgets, see {@link dev_guide.compiler.widgets Understanding Angular Widgets}
-and the {@link api/angular.widget widget API reference page}.
-
-# Compilation process for `<my:greeter>`
-
-Here are the steps that the compiler takes in processing the page that contains the widget
-definition above:
-
-## Compile Phase
-
-1. Recursively traverse the DOM depth-first.
-2. Find the angular.widget definition.
-3. Find and execute the widget's compileElement function, which includes the following steps:
- 1. Add a style element with attribute display: block; to the template DOM so that the browser
-knows to treat the element as block element for rendering. (Note: because this style element was
-added on the template compileElement, this style is automatically applied to any clones of the
-template (i.e. any repeating elements)).
- 2. Extract the salutation and name HTML attributes as angular expressions.
-4. Return the aggregate link function, which includes just one link function in this example.
-
-## Link Phase
-
-1. Execute the aggregate link function, which includes the following steps:
- 1. Create a <span> element set to the salutation class
- 2. Create a <span> element set to the name class.
-2. Add the span elements to the linkElement. (Note: be careful not to add them to the
-compileElement, because that's the template.)
-3. Set up watches on the expressions. When an expression changes, copy the data to the
-corresponding spans.
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-* {@link dev_guide.compiler.understanding_compiler Understanding How the Compiler Works}
-* {@link dev_guide.compiler.testing_dom_element Testing a New DOM Element}
-
-## Related API
-
-* {@link api/angular.module.ng.$compile $compile()}