@@ -11,22 +11,22 @@ succinctly. Out of the box, it eliminates much of the code you currently write t
11
11
binding and dependency injection. And it all happens in JavaScript within the browser making it an
12
12
ideal partner with any server technology.
13
13
14
- Angular is what HTML would have been had it been design for applications. HTML is a great
14
+ Angular is what HTML would have been had it been designed for applications. HTML is a great
15
15
declarative language for static documents. It does not contain much in the way of creating
16
- application , and as a result building web- applications is an exercise in *what do I have to do, so
16
+ applications , and as a result building web applications is an exercise in *what do I have to do, so
17
17
that I trick the browser in to doing what I want.*
18
18
19
- Impedance mismatch between dynamic- applications and static- documents are often solved as:
19
+ Impedance mismatch between dynamic applications and static documents are often solved as:
20
20
21
21
* **library** - a collection of functions which are useful when writing web apps. Your code is
22
- in charge and it calls into the library when it sees fit. i.e.: `jQuery`
23
- * **frameworks** - a particular implementation of a web- application, where your code fills in
22
+ in charge and it calls into the library when it sees fit. E.g., `jQuery`.
23
+ * **frameworks** - a particular implementation of a web application, where your code fills in
24
24
the details. The framework is in charge and it calls into your code when it needs something
25
- app specific. i.e.: `knockout`, `sproutcore`, etc.. .
25
+ app specific. E.g., `knockout`, `sproutcore`, etc.
26
26
27
27
28
28
Angular takes another approach. It attempts to minimize the impedance mismatch between document
29
- centric HTML and what application needs by creating new HTML constructs. Angular teaches the
29
+ centric HTML and what an application needs by creating new HTML constructs. Angular teaches the
30
30
browser new syntax through a construct we call directives. Examples include:
31
31
32
32
* Data binding as in `{{}}`.
@@ -39,23 +39,23 @@ browser new syntax through a construct we call directives. Examples include:
39
39
40
40
## End-to-end solution
41
41
42
- Angular tries to be an end to end solution, when building a web- application. This means it is
43
- not a single piece in an overall puzzle of building a web- application, but an end-to-end solution.
42
+ Angular tries to be an end-to- end solution, when building a web application. This means it is
43
+ not a single piece in an overall puzzle of building a web application, but an end-to-end solution.
44
44
This makes Angular opinionated about how a CRUD application should be built. But while it is
45
45
opinionated, it also tries to make sure that its opinion is just a starting point, which you can
46
46
easily change. Angular comes with the following out-of-the-box:
47
47
48
- * Everything you need to build a CRUD app in a cohesive set: Data -binding, basic templating
48
+ * Everything you need to build a CRUD app in a cohesive set: data -binding, basic templating
49
49
directives, form validation, routing, deep-linking, reusable components, dependency injection.
50
50
* Testability story: unit-testing, end-to-end testing, mocks, test harnesses.
51
51
* Seed application with directory layout and test scripts as a starting point.
52
52
53
53
54
54
## Angular Sweet Spot
55
55
56
- Angular simplifies the application development by presenting a higher level of abstraction to the
56
+ Angular simplifies application development by presenting a higher level of abstraction to the
57
57
developer. Like any abstraction, it comes at a cost of flexibility. In other words not every app
58
- is a good fit for Angular. Angular was built for the CRUD application in mind, luckily CRUD
58
+ is a good fit for Angular. Angular was built for the CRUD application in mind. Luckily CRUD
59
59
applications represent at least 90% of the web applications. But to understand what Angular is
60
60
good at one also has to understand when an app is not a good fit for Angular.
61
61
@@ -67,7 +67,7 @@ using something closer to bare metal such as `jQuery` may be a better fit.
67
67
# An Introductory Angular Example
68
68
69
69
Below is a typical CRUD application which contains a form. The form values are validated, and
70
- are used to compute the total, which is formatted to a particular local . These are some common
70
+ are used to compute the total, which is formatted to a particular locale . These are some common
71
71
concepts which the application developer may face:
72
72
73
73
* attaching data-model to the UI.
@@ -112,12 +112,12 @@ Try out the Live Preview above, and then let's walk through the example and desc
112
112
on.
113
113
114
114
In the `<html>` tag, we specify that it is an angular
115
- application with the `ng-app` directive. The `ng-app' will cause the angular to {@link
115
+ application with the `ng-app` directive. The `ng-app` will cause Angular to {@link
116
116
bootstrap auto initialize} your application.
117
117
118
118
<html ng-app>
119
119
120
- We load the angular using the `<script>` tag:
120
+ We load Angular using the `<script>` tag:
121
121
122
122
<script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
123
123
@@ -134,25 +134,25 @@ These input widgets look normal enough, but consider these points:
134
134
Model-View-Controller design pattern.
135
135
* Note that the HTML widget {@link api/ng.directive:input input}
136
136
has special powers. The input invalidates itself by turning red when you enter invalid data or
137
- leave the the input fields blank. These new widget behavior make it easier to implement field
137
+ leave the the input fields blank. These new widget behaviors make it easier to implement field
138
138
validation common in CRUD applications.
139
139
140
140
And finally, the mysterious `{{ double curly braces }}`:
141
141
142
142
Total: {{qty * cost | currency}}
143
143
144
- This notation, `{{ _expression_ }}`, is angular markup for data-binding. The expression itself can
144
+ This notation, `{{ _expression_ }}`, is Angular markup for data-binding. The expression itself can
145
145
be a combination of both an expression and a {@link dev_guide.templates.filters filter}: `{{
146
146
expression | filter }}`. Angular provides filters for formatting display data.
147
147
148
- In the example above, the expression in double-curly braces directs angular to "Bind the data we
148
+ In the example above, the expression in double-curly braces directs Angular to "bind the data we
149
149
got from the input widgets to the display, multiply them together, and format the resulting number
150
150
into output that looks like money."
151
151
152
- Notice that we achieved this application behavior not by calling angular methods, nor by
153
- implementing application specific behavior as framework. We achieved the behavior because the
154
- browser behaved more in line what is needed for dynamic web- application rather then what is needed
155
- for static- document. Angular has lowered the impedance mismatch to the point where no
152
+ Notice that we achieved this application behavior not by calling Angular methods, nor by
153
+ implementing application specific behavior as a framework. We achieved the behavior because the
154
+ browser behaved more in line with what is needed for a dynamic web application rather then what is
155
+ needed for a static document. Angular has lowered the impedance mismatch to the point where no
156
156
library/framework calls are needed.
157
157
158
158
@@ -184,7 +184,7 @@ Angular frees you from the following pain:
184
184
* **Manipulating HTML DOM programmatically:** Manipulating HTML DOM is a cornerstone of AJAX
185
185
applications, but it's cumbersome and error-prone. By declaratively describing how the UI
186
186
should change as your application state changes, you are freed from low level DOM manipulation
187
- tasks. Most applications written with angular never have to programmatically manipulate the
187
+ tasks. Most applications written with Angular never have to programmatically manipulate the
188
188
DOM, although you can if you want to.
189
189
* **Marshaling data to and from the UI:** CRUD operations make up the majority of AJAX
190
190
applications. The flow of marshaling data from the server to an internal object to an HTML
0 commit comments