mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-11 00:03:10 +00:00
fix(docs): Fix spelling, punctuation and grammatical errors on dev guide overview page.
This commit is contained in:
parent
5026315d6f
commit
1f2d50000e
1 changed files with 23 additions and 23 deletions
|
|
@ -11,22 +11,22 @@ succinctly. Out of the box, it eliminates much of the code you currently write t
|
||||||
binding and dependency injection. And it all happens in JavaScript within the browser making it an
|
binding and dependency injection. And it all happens in JavaScript within the browser making it an
|
||||||
ideal partner with any server technology.
|
ideal partner with any server technology.
|
||||||
|
|
||||||
Angular is what HTML would have been had it been design for applications. HTML is a great
|
Angular is what HTML would have been had it been designed for applications. HTML is a great
|
||||||
declarative language for static documents. It does not contain much in the way of creating
|
declarative language for static documents. It does not contain much in the way of creating
|
||||||
application, and as a result building web-applications is an exercise in *what do I have to do, so
|
applications, and as a result building web applications is an exercise in *what do I have to do, so
|
||||||
that I trick the browser in to doing what I want.*
|
that I trick the browser in to doing what I want.*
|
||||||
|
|
||||||
Impedance mismatch between dynamic-applications and static-documents are often solved as:
|
Impedance mismatch between dynamic applications and static documents are often solved as:
|
||||||
|
|
||||||
* **library** - a collection of functions which are useful when writing web apps. Your code is
|
* **library** - a collection of functions which are useful when writing web apps. Your code is
|
||||||
in charge and it calls into the library when it sees fit. i.e.: `jQuery`
|
in charge and it calls into the library when it sees fit. E.g., `jQuery`.
|
||||||
* **frameworks** - a particular implementation of a web-application, where your code fills in
|
* **frameworks** - a particular implementation of a web application, where your code fills in
|
||||||
the details. The framework is in charge and it calls into your code when it needs something
|
the details. The framework is in charge and it calls into your code when it needs something
|
||||||
app specific. i.e.: `knockout`, `sproutcore`, etc...
|
app specific. E.g., `knockout`, `sproutcore`, etc.
|
||||||
|
|
||||||
|
|
||||||
Angular takes another approach. It attempts to minimize the impedance mismatch between document
|
Angular takes another approach. It attempts to minimize the impedance mismatch between document
|
||||||
centric HTML and what application needs by creating new HTML constructs. Angular teaches the
|
centric HTML and what an application needs by creating new HTML constructs. Angular teaches the
|
||||||
browser new syntax through a construct we call directives. Examples include:
|
browser new syntax through a construct we call directives. Examples include:
|
||||||
|
|
||||||
* Data binding as in `{{}}`.
|
* Data binding as in `{{}}`.
|
||||||
|
|
@ -39,13 +39,13 @@ browser new syntax through a construct we call directives. Examples include:
|
||||||
|
|
||||||
## End-to-end solution
|
## End-to-end solution
|
||||||
|
|
||||||
Angular tries to be an end to end solution, when building a web-application. This means it is
|
Angular tries to be an end-to-end solution, when building a web application. This means it is
|
||||||
not a single piece in an overall puzzle of building a web-application, but an end-to-end solution.
|
not a single piece in an overall puzzle of building a web application, but an end-to-end solution.
|
||||||
This makes Angular opinionated about how a CRUD application should be built. But while it is
|
This makes Angular opinionated about how a CRUD application should be built. But while it is
|
||||||
opinionated, it also tries to make sure that its opinion is just a starting point, which you can
|
opinionated, it also tries to make sure that its opinion is just a starting point, which you can
|
||||||
easily change. Angular comes with the following out-of-the-box:
|
easily change. Angular comes with the following out-of-the-box:
|
||||||
|
|
||||||
* Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating
|
* Everything you need to build a CRUD app in a cohesive set: data-binding, basic templating
|
||||||
directives, form validation, routing, deep-linking, reusable components, dependency injection.
|
directives, form validation, routing, deep-linking, reusable components, dependency injection.
|
||||||
* Testability story: unit-testing, end-to-end testing, mocks, test harnesses.
|
* Testability story: unit-testing, end-to-end testing, mocks, test harnesses.
|
||||||
* Seed application with directory layout and test scripts as a starting point.
|
* Seed application with directory layout and test scripts as a starting point.
|
||||||
|
|
@ -53,9 +53,9 @@ easily change. Angular comes with the following out-of-the-box:
|
||||||
|
|
||||||
## Angular Sweet Spot
|
## Angular Sweet Spot
|
||||||
|
|
||||||
Angular simplifies the application development by presenting a higher level of abstraction to the
|
Angular simplifies application development by presenting a higher level of abstraction to the
|
||||||
developer. Like any abstraction, it comes at a cost of flexibility. In other words not every app
|
developer. Like any abstraction, it comes at a cost of flexibility. In other words not every app
|
||||||
is a good fit for Angular. Angular was built for the CRUD application in mind, luckily CRUD
|
is a good fit for Angular. Angular was built for the CRUD application in mind. Luckily CRUD
|
||||||
applications represent at least 90% of the web applications. But to understand what Angular is
|
applications represent at least 90% of the web applications. But to understand what Angular is
|
||||||
good at one also has to understand when an app is not a good fit for Angular.
|
good at one also has to understand when an app is not a good fit for Angular.
|
||||||
|
|
||||||
|
|
@ -67,7 +67,7 @@ using something closer to bare metal such as `jQuery` may be a better fit.
|
||||||
# An Introductory Angular Example
|
# An Introductory Angular Example
|
||||||
|
|
||||||
Below is a typical CRUD application which contains a form. The form values are validated, and
|
Below is a typical CRUD application which contains a form. The form values are validated, and
|
||||||
are used to compute the total, which is formatted to a particular local. These are some common
|
are used to compute the total, which is formatted to a particular locale. These are some common
|
||||||
concepts which the application developer may face:
|
concepts which the application developer may face:
|
||||||
|
|
||||||
* attaching data-model to the UI.
|
* 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
|
||||||
on.
|
on.
|
||||||
|
|
||||||
In the `<html>` tag, we specify that it is an angular
|
In the `<html>` tag, we specify that it is an angular
|
||||||
application with the `ng-app` directive. The `ng-app' will cause the angular to {@link
|
application with the `ng-app` directive. The `ng-app` will cause Angular to {@link
|
||||||
bootstrap auto initialize} your application.
|
bootstrap auto initialize} your application.
|
||||||
|
|
||||||
<html ng-app>
|
<html ng-app>
|
||||||
|
|
||||||
We load the angular using the `<script>` tag:
|
We load Angular using the `<script>` tag:
|
||||||
|
|
||||||
<script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
|
<script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
|
||||||
|
|
||||||
|
|
@ -134,25 +134,25 @@ These input widgets look normal enough, but consider these points:
|
||||||
Model-View-Controller design pattern.
|
Model-View-Controller design pattern.
|
||||||
* Note that the HTML widget {@link api/ng.directive:input input}
|
* Note that the HTML widget {@link api/ng.directive:input input}
|
||||||
has special powers. The input invalidates itself by turning red when you enter invalid data or
|
has special powers. The input invalidates itself by turning red when you enter invalid data or
|
||||||
leave the the input fields blank. These new widget behavior make it easier to implement field
|
leave the the input fields blank. These new widget behaviors make it easier to implement field
|
||||||
validation common in CRUD applications.
|
validation common in CRUD applications.
|
||||||
|
|
||||||
And finally, the mysterious `{{ double curly braces }}`:
|
And finally, the mysterious `{{ double curly braces }}`:
|
||||||
|
|
||||||
Total: {{qty * cost | currency}}
|
Total: {{qty * cost | currency}}
|
||||||
|
|
||||||
This notation, `{{ _expression_ }}`, is angular markup for data-binding. The expression itself can
|
This notation, `{{ _expression_ }}`, is Angular markup for data-binding. The expression itself can
|
||||||
be a combination of both an expression and a {@link dev_guide.templates.filters filter}: `{{
|
be a combination of both an expression and a {@link dev_guide.templates.filters filter}: `{{
|
||||||
expression | filter }}`. Angular provides filters for formatting display data.
|
expression | filter }}`. Angular provides filters for formatting display data.
|
||||||
|
|
||||||
In the example above, the expression in double-curly braces directs angular to "Bind the data we
|
In the example above, the expression in double-curly braces directs Angular to "bind the data we
|
||||||
got from the input widgets to the display, multiply them together, and format the resulting number
|
got from the input widgets to the display, multiply them together, and format the resulting number
|
||||||
into output that looks like money."
|
into output that looks like money."
|
||||||
|
|
||||||
Notice that we achieved this application behavior not by calling angular methods, nor by
|
Notice that we achieved this application behavior not by calling Angular methods, nor by
|
||||||
implementing application specific behavior as framework. We achieved the behavior because the
|
implementing application specific behavior as a framework. We achieved the behavior because the
|
||||||
browser behaved more in line what is needed for dynamic web-application rather then what is needed
|
browser behaved more in line with what is needed for a dynamic web application rather then what is
|
||||||
for static-document. Angular has lowered the impedance mismatch to the point where no
|
needed for a static document. Angular has lowered the impedance mismatch to the point where no
|
||||||
library/framework calls are needed.
|
library/framework calls are needed.
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -184,7 +184,7 @@ Angular frees you from the following pain:
|
||||||
* **Manipulating HTML DOM programmatically:** Manipulating HTML DOM is a cornerstone of AJAX
|
* **Manipulating HTML DOM programmatically:** Manipulating HTML DOM is a cornerstone of AJAX
|
||||||
applications, but it's cumbersome and error-prone. By declaratively describing how the UI
|
applications, but it's cumbersome and error-prone. By declaratively describing how the UI
|
||||||
should change as your application state changes, you are freed from low level DOM manipulation
|
should change as your application state changes, you are freed from low level DOM manipulation
|
||||||
tasks. Most applications written with angular never have to programmatically manipulate the
|
tasks. Most applications written with Angular never have to programmatically manipulate the
|
||||||
DOM, although you can if you want to.
|
DOM, although you can if you want to.
|
||||||
* **Marshaling data to and from the UI:** CRUD operations make up the majority of AJAX
|
* **Marshaling data to and from the UI:** CRUD operations make up the majority of AJAX
|
||||||
applications. The flow of marshaling data from the server to an internal object to an HTML
|
applications. The flow of marshaling data from the server to an internal object to an HTML
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue