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

fernandoacorreia · mhevery · commit acb499f82097 · 2012-08-30T22:19:34.000-07:00
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc
@@ -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
diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc
@@ -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() {
 
diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc
@@ -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
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
@@ -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>
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
@@ -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
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
@@ -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
 
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
@@ -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
diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc
@@ -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
 
diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc
@@ -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
diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc
@@ -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
diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js
@@ -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';
   }
