@@ -55,11 +55,11 @@ Try out the Live Preview above, and then let's walk through the example and desc
55
55
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-databinding1.png">
56
56
57
57
This looks like normal HTML, with some new markup. In Angular, a file like this is called a
58
- <a name="template">" {@link templates template}" </a>. When Angular starts your application, it parses and
59
- processes this new markup from the template using the so-called <a name="compiler">" {@link compiler compiler}" </a>.
60
- The loaded, transformed and rendered DOM is then called the <a name="view">" view" </a>.
58
+ <a name="template">{@link templates template}</a>. When Angular starts your application, it parses and
59
+ processes this new markup from the template using the <a name="compiler">{@link compiler compiler}</a>.
60
+ The loaded, transformed and rendered DOM is then called the <a name="view">view</a>.
61
61
62
- The first kind of new markup are the so-called <a name="directive">" {@link directive directives}" </a>.
62
+ The first kind of new markup are the <a name="directive">{@link directive directives}</a>.
63
63
They apply special behavior to attributes or elements in the HTML. In the example above we use the
64
64
{@link ng.directive:ngApp `ng-app`} attribute, which is linked to a directive that automatically
65
65
initializes our application. Angular also defines a directive for the {@link ng.directive:input `input`}
@@ -75,24 +75,24 @@ stores/updates the value of the input field into/from a variable.
75
75
76
76
The second kind of new markup are the double curly braces `{{ expression | filter }}`:
77
77
When the compiler encounters this markup, it will replace it with the evaluated value of the markup.
78
- An <a name="expression">" {@link expression expression}" </a> in a template is a JavaScript-like code snippet that allows
78
+ An <a name="expression">{@link expression expression}</a> in a template is a JavaScript-like code snippet that allows
79
79
to read and write variables. Note that those variables are not global variables.
80
80
Just like variables in a JavaScript function live in a scope,
81
- Angular provides a <a name="scope">" {@link scope scope}" </a> for the variables accessible to expressions.
82
- The values that are stored in variables on the scope are referred to as the <a name="model">" model" </a>
81
+ Angular provides a <a name="scope">{@link scope scope}</a> for the variables accessible to expressions.
82
+ The values that are stored in variables on the scope are referred to as the <a name="model">model</a>
83
83
in the rest of the documentation.
84
84
Applied to the example above, the markup directs Angular to "take the data we got from the input widgets
85
85
and multiply them together".
86
86
87
- The example above also contains a <a name="filter">" {@link guide/filter filter}" </a>.
87
+ The example above also contains a <a name="filter">{@link guide/filter filter}</a>.
88
88
A filter formats the value of an expression for display to the user.
89
89
In the example above, the filter {@link ng.filter:currency `currency`} formats a number
90
90
into an output that looks like money.
91
91
92
92
The important thing in the example is that Angular provides _live_ bindings:
93
93
Whenever the input values change, the value of the expressions are automatically
94
94
recalculated and the DOM is updated with their values.
95
- The concept behind this is <a name="databinding">" {@link databinding two-way data binding}" </a>.
95
+ The concept behind this is <a name="databinding">{@link databinding two-way data binding}</a>.
96
96
97
97
98
98
## Adding UI logic: Controllers
@@ -150,7 +150,7 @@ different currencies and also pay the invoice.
150
150
151
151
What changed?
152
152
153
- First, there is a new JavaScript file that contains a so-called <a name="controller">" {@link controller controller}" </a>.
153
+ First, there is a new JavaScript file that contains a <a name="controller">{@link controller controller}</a>.
154
154
More exactly, the file contains a constructor function that creates the actual controller instance.
155
155
The purpose of controllers is to expose variables and functionality to expressions and directives.
156
156
@@ -182,8 +182,8 @@ The following graphic shows how everything works together after we introduced th
182
182
## View independent business logic: Services
183
183
184
184
Right now, the `InvoiceController` contains all logic of our example. When the application grows it
185
- is a good practice to move view independent logic from the controller into a so called
186
- <a name="service">" {@link services service}" </a>, so it can be reused by other parts
185
+ is a good practice to move view independent logic from the controller into a
186
+ <a name="service">{@link services service}</a>, so it can be reused by other parts
187
187
of the application as well. Later on, we could also change that service to load the exchange rates
188
188
from the web, e.g. by calling the Yahoo Finance API, without changing the controller.
189
189
@@ -255,15 +255,15 @@ We moved the `convertCurrency` function and the definition of the existing curre
255
255
into the new file `finance2.js`. But how does the controller
256
256
get a hold of the now separated function?
257
257
258
- This is where <a name="di">" {@link di Dependency Injection}" </a> comes into play.
258
+ This is where <a name="di">{@link di Dependency Injection}</a> comes into play.
259
259
Dependency Injection (DI) is a software design pattern that
260
260
deals with how objects and functions get created and how they get a hold of their dependencies.
261
261
Everything within Angular (directives, filters, controllers,
262
262
services, ...) is created and wired using dependency injection. Within Angular,
263
- the DI container is called the <a name="injector">" {@link di injector}" </a>.
263
+ the DI container is called the <a name="injector">{@link di injector}</a>.
264
264
265
265
To use DI, there needs to be a place where all the things that should work together are registered.
266
- In Angular, this is the purpose of the so-called <a name="module">" {@link module modules}" </a>.
266
+ In Angular, this is the purpose of the <a name="module">{@link module modules}</a>.
267
267
When Angular starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
268
268
including the configuration of all modules that this module depends on.
269
269
0 commit comments