docs(tutorial): correct typos and clarify a few sections

This commit is contained in:
Fernando Correia 2012-07-15 13:18:42 -03:00 committed by Misko Hevery
parent 9a710c788d
commit acb499f820
11 changed files with 51 additions and 34 deletions

View file

@ -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

View file

@ -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() {

View file

@ -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

View file

@ -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>

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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';
}