mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
docs(tutorial): correct typos and clarify a few sections
This commit is contained in:
parent
9a710c788d
commit
acb499f820
11 changed files with 51 additions and 34 deletions
|
|
@ -56,7 +56,7 @@ __`app/index.html`:__
|
|||
|
||||
We added a standard HTML `<input>` tag and used angular's
|
||||
{@link api/ng.filter:filter $filter} function to process the input for the
|
||||
`ngRepeat` directive.
|
||||
{@link api/ng.directive:ngRepeat ngRepeat} directive.
|
||||
|
||||
This lets a user enter search criteria and immediately see the effects of their search on the phone
|
||||
list. This new code demonstrates the following:
|
||||
|
|
@ -176,12 +176,14 @@ ngBindTemplate} directives, which are invisible to the user while the page is lo
|
|||
|
||||
Refresh the browser tab with the end-to-end test runner to see the test fail. To make the test
|
||||
pass, edit the `index.html` template to add a `div` or `p` element with `id` `"status"` and content
|
||||
with the `query` binding.
|
||||
with the `query` binding, prefixed by "Current filter:". For instance:
|
||||
|
||||
* Add a `pause()` statement into an end-to-end test and rerun it. You'll see the runner pause; this
|
||||
gives you the opportunity to explore the state of your application while it is displayed in the
|
||||
browser. The app is live! You can change the search query to prove it. Notice how useful this is
|
||||
for troubleshooting end-to-end tests.
|
||||
<div id="status">Current filter: {{query}}</div>
|
||||
|
||||
* Add a `pause()` statement inside of an end-to-end test and rerun it. You'll see the runner pause;
|
||||
this gives you the opportunity to explore the state of your application while it is displayed in
|
||||
the browser. The app is live! You can change the search query to prove it. Notice how useful this
|
||||
is for troubleshooting end-to-end tests.
|
||||
|
||||
|
||||
# Summary
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ necessary!
|
|||
|
||||
## Controller
|
||||
|
||||
__`app/js/controller.js`:__
|
||||
__`app/js/controllers.js`:__
|
||||
<pre>
|
||||
function PhoneListCtrl($scope) {
|
||||
$scope.phones = [
|
||||
|
|
@ -103,7 +103,7 @@ to the model.
|
|||
The changes we made should be verified with both a unit test and an end-to-end test. Let's look at
|
||||
the unit test first.
|
||||
|
||||
__`test/unit/controllerSpec.js`:__
|
||||
__`test/unit/controllersSpec.js`:__
|
||||
<pre>
|
||||
describe('PhoneCat controllers', function() {
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ GitHub}:
|
|||
|
||||
## Data
|
||||
|
||||
The `app/phones/phone.json` file in your project is a dataset that contains a larger list of phones
|
||||
The `app/phones/phones.json` file in your project is a dataset that contains a larger list of phones
|
||||
stored in the JSON format.
|
||||
|
||||
Following is a sample of the file:
|
||||
|
|
@ -104,7 +104,7 @@ to avoid any possible naming collisions.
|
|||
Since angular infers the controller's dependencies from the names of arguments to the controller's
|
||||
constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minification_(programming)
|
||||
minify} the JavaScript code for `PhoneListCtrl` controller, all of its function arguments would be
|
||||
minified as well, and the dependency injector would be able to identify services correctly.
|
||||
minified as well, and the dependency injector would not be able to identify services correctly.
|
||||
|
||||
To overcome issues caused by minification, just assign an array with service identifier strings
|
||||
into the `$inject` property of the controller function, just like the last line in the snippet
|
||||
|
|
@ -164,8 +164,8 @@ isolated from the work done in other tests.
|
|||
|
||||
* We created a new scope for our controller by calling `$rootScope.$new()`
|
||||
|
||||
* We called `scope.$new(PhoneListCtrl)` to get Angular to create the child scope associated with
|
||||
the `PhoneListCtrl` controller.
|
||||
* We called the injected `$controller` function passing the `PhoneListCtrl` function and the created
|
||||
scope as parameters.
|
||||
|
||||
Because our code now uses the `$http` service to fetch the phone list data in our controller, before
|
||||
we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an
|
||||
|
|
|
|||
|
|
@ -87,7 +87,8 @@ views that we will implement in the upcoming steps.
|
|||
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
|
||||
can see them running on {@link
|
||||
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
|
||||
angular's server}.
|
||||
Angular's server}.
|
||||
|
||||
|
||||
# Experiments
|
||||
|
||||
|
|
@ -96,11 +97,15 @@ or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that
|
|||
making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
|
||||
`/app/{{phone.imageUrl}}`).
|
||||
|
||||
The issue here is that the browser will fire a request for that invalid image address as soon as
|
||||
it hits the `img` tag, which is before Angular has a chance to evaluate the expression and inject
|
||||
the valid address.
|
||||
|
||||
|
||||
# Summary
|
||||
|
||||
Now that you have added phone images and links, go to {@link step_07 step 7} to learn about angular
|
||||
layout templates and how angular makes it easy to create applications that have multiple views.
|
||||
Now that you have added phone images and links, go to {@link step_07 step 7} to learn about Angular
|
||||
layout templates and how Angular makes it easy to create applications that have multiple views.
|
||||
|
||||
|
||||
<ul doc-tutorial-nav="6"></ul>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ detail page is displayed.
|
|||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-6...step-7
|
||||
GitHub}:
|
||||
GitHub}.
|
||||
|
||||
|
||||
## Multiple Views, Routing and Layout Template
|
||||
|
|
@ -114,14 +114,14 @@ directive:
|
|||
__`app/index.html`:__
|
||||
<pre>
|
||||
<!doctype html>
|
||||
<html ng-app="phonecat">
|
||||
<html lang="en" ng-app="phonecat">
|
||||
...
|
||||
</pre>
|
||||
|
||||
|
||||
## Controllers
|
||||
|
||||
__`app/js/controller.js`:__
|
||||
__`app/js/controllers.js`:__
|
||||
<pre>
|
||||
...
|
||||
function PhoneDetailCtrl($scope, $routeParams) {
|
||||
|
|
@ -140,11 +140,12 @@ route into the layout template, which makes it a perfect fit for our `index.html
|
|||
|
||||
__`app/index.html`:__
|
||||
<pre>
|
||||
<html ng-app="phonecat">
|
||||
<html lang="en" ng-app="phonecat">
|
||||
<head>
|
||||
...
|
||||
<script src="lib/angular/angular.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/controllers.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -234,7 +235,7 @@ to various URLs and verify that the correct view was rendered.
|
|||
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
|
||||
can see them running on {@link
|
||||
http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html
|
||||
angular's server}.
|
||||
Angular's server}.
|
||||
|
||||
|
||||
# Experiments
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Now when you click on a phone on the list, the phone details page with phone-spe
|
|||
is displayed.
|
||||
|
||||
To implement the phone details view we will use {@link api/ng.$http $http} to fetch
|
||||
our data, and we'll flesh out the `phone-details.html` view template.
|
||||
our data, and we'll flesh out the `phone-detail.html` view template.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-7...step-8
|
||||
|
|
@ -59,7 +59,7 @@ show this data in the phone detail view.
|
|||
We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the json files. This works
|
||||
the same way as the phone list controller.
|
||||
|
||||
__`app/js/controller.js`:__
|
||||
__`app/js/controllers.js`:__
|
||||
<pre>
|
||||
function PhoneDetailCtrl($scope, $routeParams, $http) {
|
||||
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
|
||||
|
|
@ -81,7 +81,7 @@ Note where we use the angular `{{expression}}` markup and `ngRepeat` to project
|
|||
our model into the view.
|
||||
|
||||
|
||||
__`app/partials/phone-details.html`:__
|
||||
__`app/partials/phone-detail.html`:__
|
||||
<pre>
|
||||
<img ng-src="{{phone.images[0]}}" class="phone">
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ TODO!
|
|||
We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
|
||||
step 5.
|
||||
|
||||
__`test/unit/controllerSpec.js`:__
|
||||
__`test/unit/controllersSpec.js`:__
|
||||
<pre>
|
||||
...
|
||||
describe('PhoneDetailCtrl', function(){
|
||||
|
|
@ -180,7 +180,7 @@ __`test/e2e/scenarios.js`:__
|
|||
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
|
||||
can see them running on {@link
|
||||
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
|
||||
angular's server}.
|
||||
Angular's server}.
|
||||
|
||||
# Experiments
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ Navigate to one of the detail pages.
|
|||
|
||||
In the previous step, the details page displayed either "true" or "false" to indicate whether
|
||||
certain phone features were present or not. We have used a custom filter to convert those text
|
||||
strings into glyphs: ✓ for "true", and ✘ for "false". Let's see, what the filter code looks like.
|
||||
strings into glyphs: ✓ for "true", and ✘ for "false". Let's see what the filter code looks like.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-8...step-9
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ In this step, you will add a clickable phone image swapper to the phone details
|
|||
|
||||
The phone details view displays one large image of the current phone and several smaller thumbnail
|
||||
images. It would be great if we could replace the large image with any of the thumbnails just by
|
||||
clicking on the desired thumbnail image. Let's have a look at how we can do this with angular.
|
||||
clicking on the desired thumbnail image. Let's have a look at how we can do this with Angular.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-9...step-10
|
||||
|
|
@ -105,7 +105,7 @@ __`test/e2e/scenarios.js`:__
|
|||
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
|
||||
can see them running on {@link
|
||||
http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
|
||||
angular's server}.
|
||||
Angular's server}.
|
||||
|
||||
# Experiments
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ In this step, you will improve the way our app fetches data.
|
|||
|
||||
The last improvement we will make to our app is to define a custom service that represents a {@link
|
||||
http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client. Using this client we
|
||||
can make xhr requests for data in an easier way, without having to deal with the lower-level {@link
|
||||
can make XHR requests for data in an easier way, without having to deal with the lower-level {@link
|
||||
api/ng.$http $http} API, HTTP methods and URLs.
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
|
|
@ -57,13 +57,22 @@ The {@link api/ngResource.$resource `$resource`} service makes it easy to create
|
|||
lines of code. This client can then be used in our application, instead of the lower-level {@link
|
||||
api/ng.$http $http} service.
|
||||
|
||||
__`app/js/app.js`.__
|
||||
<pre>
|
||||
...
|
||||
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
|
||||
...
|
||||
</pre>
|
||||
|
||||
We need to add 'phonecatServices' to 'phonecat' application's requires array.
|
||||
|
||||
|
||||
## Controller
|
||||
|
||||
We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
|
||||
lower-level {@link api/ng.$http $http} service, replacing it with a new service called
|
||||
`Phone`. Angular's {@link api/ngResource.$resource `$resource`} service is easier to
|
||||
use than `$http for interacting with data sources exposed as RESTful resources. It is also easier
|
||||
use than `$http` for interacting with data sources exposed as RESTful resources. It is also easier
|
||||
now to understand what the code in our controllers is doing.
|
||||
|
||||
__`app/js/controllers.js`.__
|
||||
|
|
@ -107,8 +116,8 @@ This is a simple statement that we want to query for all phones.
|
|||
An important thing to notice in the code above is that we don't pass any callback functions when
|
||||
invoking methods of our Phone service. Although it looks as if the result were returned
|
||||
synchronously, that is not the case at all. What is returned synchronously is a "future" — an
|
||||
object, which will be filled with data when the xhr response returns. Because of the data-binding
|
||||
in angular, we can use this future and bind it to our template. Then, when the data arrives, the
|
||||
object, which will be filled with data when the XHR response returns. Because of the data-binding
|
||||
in Angular, we can use this future and bind it to our template. Then, when the data arrives, the
|
||||
view will automatically update.
|
||||
|
||||
Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ For more details and examples of the Angular concepts we touched on in this tuto
|
|||
For several more examples of code, see the {@link cookbook/ Cookbook}.
|
||||
|
||||
When you are ready to start developing a project using Angular, we recommend that you bootstrap
|
||||
your development with the {@link https://github.com/angular/angular-seed angular seed} project.
|
||||
your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
|
||||
|
||||
We hope this tutorial was useful to you and that you learned enough about Angular to make you want
|
||||
to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ docsApp.directive.docTutorialReset = function() {
|
|||
' <ol>\n' +
|
||||
' <li><p>Reset the workspace to step ' + step + '.</p>' +
|
||||
' <pre>' + command + '</pre></li>\n' +
|
||||
' <li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{{docTutorialReset}}/app">angular\'s server</a>.</p></li>\n' +
|
||||
' <li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-' + step + '/app">Angular\'s server</a>.</p></li>\n' +
|
||||
' </ol>\n' +
|
||||
' </div>\n';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue