4
4
5
5
# Overview
6
6
7
- Angular's {@link api/angular.module. ng.$compile HTML compiler} allows the developer to teach the
7
+ Angular's {@link api/ng.$compile HTML compiler} allows the developer to teach the
8
8
browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute
9
9
and even create new HTML element or attributes with custom behavior. Angular calls these behavior
10
- extensions {@link api/angular.module. ng.$compileProvider.directive directives}.
10
+ extensions {@link api/ng.$compileProvider.directive directives}.
11
11
12
12
HTML has a lot of constructs for formatting the HTML for static documents in declarative fashion.
13
13
For example if something needs to be centered, there is no need to provide instructions to the
@@ -17,7 +17,7 @@ element to achieve the desired behavior. Such is the power of declarative langua
17
17
18
18
But the declarative language is also limited, since it does not allow you to teach the browser new
19
19
syntax. For example there is no easy way to get the browser to align the text at 1/3 the position
20
- instead of 1/2. What is needed is a way to teach browser new HTML syntax.
20
+ instead of 1/2. What is needed is a way to teach browser new HTML syntax.
21
21
22
22
Angular comes pre-bundled with common directives which are useful for building any app. We also
23
23
expect that you will create directives that are specific to your app. These extension become a
@@ -29,7 +29,7 @@ involved.
29
29
30
30
# Compiler
31
31
32
- Compiler is an angular service which traverses the DOM looking for attributes. The compilation
32
+ Compiler is an angular service which traverses the DOM looking for attributes. The compilation
33
33
process happens into two phases.
34
34
35
35
1. **Compile:** traverse the DOM and collect all of the directives. The result is a linking
@@ -39,7 +39,7 @@ process happens into two phases.
39
39
scope model are reflected in the view, and any user interactions with the view are reflected
40
40
in the scope model. Making the scope model a single source of truth.
41
41
42
- Some directives such {@link api/angular.module. ng.$compileProvider. directive. ngRepeat
42
+ Some directives such {@link api/ng.directive: ngRepeat
43
43
`ng-repeat`} clone DOM elements once for each item in collection. Having a compile and link phase
44
44
improves performance since the cloned template only needs to be compiled once, and then linked
45
45
once for each clone instance.
@@ -50,7 +50,7 @@ once for each clone instance.
50
50
Directive is a behavior which should be triggered when specific HTML constructs are encountered in
51
51
compilation process. The directives can be placed in element names, attributes, class names, as
52
52
well as comments. Here are some equivalent examples of invoking {@link
53
- api/angular.module. ng.$compileProvider. directive. ngBind `ng-bind`} directive.
53
+ api/ng.directive: ngBind `ng-bind`} directive.
54
54
55
55
<pre>
56
56
<span ng-bind="exp"></span>
@@ -60,7 +60,7 @@ api/angular.module.ng.$compileProvider.directive.ngBind `ng-bind`} directive.
60
60
</pre>
61
61
62
62
Directive is just a function which executes when the compiler encounters it in the DOM. See {@link
63
- api/angular.module. ng.$compileProvider.directive directive API} for in depth documentation on how
63
+ api/ng.$compileProvider.directive directive API} for in depth documentation on how
64
64
to write directives.
65
65
66
66
Here is a directive which makes any element draggable. Notice the `draggable` attribute on the
@@ -115,9 +115,9 @@ principles.
115
115
116
116
# Understanding View
117
117
118
- There are many templating systems out there. Most of them consume a static string template and
118
+ There are many templating systems out there. Most of them consume a static string template and
119
119
combine it with data, resulting in a new string. The resulting text is then `innerHTML`ed into
120
- an element.
120
+ an element.
121
121
122
122
<img src="img/One_Way_Data_Binding.png">
123
123
0 commit comments