fixup 2

- Fix typos.
- Fix navigation for steps > 12.
- Make section title consistent (include "Component" where appropriate).
- Improve alert formatting (titles, line spacing).

Author: gkalpak

docs/app/src/tutorials.js

@@ -5,7 +5,8 @@ angular.module('tutorials', [])
     '',
     'step_00', 'step_01', 'step_02', 'step_03', 'step_04',
     'step_05', 'step_06', 'step_07', 'step_08', 'step_09',
-    'step_10', 'step_11', 'step_12', 'the_end'
+    'step_10', 'step_11', 'step_12', 'step_13', 'step_14',
+    'the_end'
   ];
   return {
     scope: {},
@@ -43,7 +44,7 @@ angular.module('tutorials', [])
           '<a href="http://angular.github.io/angular-phonecat/step-{{step}}/app">Step {{step}} Live Demo</a>.</p>\n' +
       '</div>\n' +
       '<p>The most important changes are listed below. You can see the full diff on ' +
-        '<a ng-href="https://github.com/angular/angular-phonecat/compare/step-{{step ? (step - 1): \'0~1\'}}...step-{{step}}" title="See diff on Github">GitHub</a>\n' +
+        '<a ng-href="https://github.com/angular/angular-phonecat/compare/step-{{step ? (step - 1): \'0~1\'}}...step-{{step}}" title="See diff on Github">GitHub</a>.\n' +
       '</p>'
   };
-});
+});

docs/config/templates/indexPage.template.html

@@ -228,10 +228,10 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
           )
         </p>
         <p>
-          Code licensed under the
-          <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The
-            MIT License</a>. Documentation licensed under <a
-              href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+          Code licensed under
+          <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The MIT License</a>.
+          Documentation licensed under
+          <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
         </p>
       </div>
     </footer>

docs/content/tutorial/index.ngdoc

@@ -97,6 +97,7 @@ The tutorial instructions, from now on, assume you are running all commands from
 `angular-phonecat` directory.
 
 <div class="alert alert-warning">
+  <p>**Firewall/Proxy Issues?**</p>
   <p>
     `git` and other tools (for example `bower` - see below), often use the `git:` protocol for
     accessing files in remote repositories. Some firewall configurations are blocking `git://` URLs,
@@ -266,11 +267,25 @@ npm run update-webdriver
 </div>
 
 <div class="alert alert-warning">
-  Under the hood, Protractor uses the [Selenium Stadalone Server][selenium], which in turn requires
-  the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this
-  by running `java -version` from the command line.
+  <p>
+    Running `update-webdriver` for the first time may take from several seconds up to a few minutes
+    (depending on your hardware and network connection). If you cancel the operation (e.g. using
+    `Ctrl+C`), you might get errors, when trying to run Protractor later.
+  </p>
+  <p>
+    In that case, you can delete the `node_modules/` directory and run `npm install` again.
+  </p>
+</div>
 
-  If JDK is not already installed, you can download it [here][jdk-download].
+<div class="alert alert-warning">
+  <p>
+    Under the hood, Protractor uses the [Selenium Stadalone Server][selenium], which in turn 
+    requires the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this
+    by running `java -version` from the command line.
+  </p>
+  <p>
+    If JDK is not already installed, you can download it [here][jdk-download].
+  </p>
 </div>
 
 Since Protractor works by interacting with a running application, we need to start our web server:

docs/content/tutorial/step_00.ngdoc

@@ -85,7 +85,7 @@ For more info on `ngApp`, check out the {@link ngApp API Reference}.
 **`angular.js` script tag:**
 
 ```html
-<script src="bower_components/angular/angular.js">
+<script src="bower_components/angular/angular.js"></script>
 ```
 
 This code downloads the `angular.js` script which registers a callback that will be executed by the

docs/content/tutorial/step_02.ngdoc

@@ -206,7 +206,7 @@ describe('PhoneListController', function() {
 * With this instance, we verify that the phones array property on the scope contains three records.
 
 <div class="alert alert-info">
-  **A note on file naming:**
+  <p>**A note on file naming:**</p>
   <p>
     As already mentioned in the [introduction](tutorial/#running-unit-tests), the unit test files
     (specs) are kept side-by-side with the application code. We name our specs after the file

docs/content/tutorial/step_03.ngdoc

@@ -187,11 +187,12 @@ Voilà! The resulting output should look the same, but let's see what we have ga
 <img class="diagram" src="img/tutorial/tutorial_03.png">
 
 <div class="alert alert-info">
-  **A note on file naming:**
-  <br />
-  It is a good practice to distinguish different types of entities by suffix. In this tutorial, we
-  are using the `.component` suffix for components, so the definition of a `someComponent` component
-  would be in a file named `some-component.component.js`.
+  <p>**A note on file naming:**</p>
+  <p>
+    It is a good practice to distinguish different types of entities by suffix. In this tutorial, we
+    are using the `.component` suffix for components, so the definition of a `someComponent` 
+    component would be in a file named `some-component.component.js`.
+  </p>
 </div>
 
 

docs/content/tutorial/step_05.ngdoc

@@ -141,6 +141,12 @@ To rerun the test suite, execute `npm run protractor` again.
   the web server.
 </div>
 
+<div class="alert alert-warning">
+  The web server is configured to use port 8000. If the port is already in use (for example by
+  another instance of a running web server) you will get an `EADDRINUSE` error. Make sure the port 
+  is available before running `npm start`.
+</div>
+
 
 # Experiments
 

docs/content/tutorial/step_06.ngdoc

@@ -17,7 +17,7 @@ the repeater, and letting the data binding magic do the rest of the work.
 <div doc-tutorial-reset="6"></div>
 
 
-## Template
+## Component Template
 
 <br />
 **`app/phone-list/phone-list.template.html`:**
@@ -77,7 +77,7 @@ menu), Angular's data-binding will cause the view to automatically update. No bl
 manipulation code is necessary!
 
 
-## Controller
+## Component Controller
 
 <br />
 **`app/phone-list/phone-list.components.js`:**

docs/content/tutorial/step_07.ngdoc

@@ -38,7 +38,7 @@ Following is a sample of the file:
 ```
 
 
-## Controller
+## Component Controller
 
 We will use Angular's {@link ng.$http $http} service in our controller for making an HTTP request to
 our web server to fetch the data in the `app/phones/phones.json` file. `$http` is just one of
@@ -55,7 +55,7 @@ themselves, but by the DI subsystem). As a result, applications are easier to te
 
 ```js
   angular.
-    module('phoneList).
+    module('phoneList').
     component('phoneList', {
       templateUrl: 'phone-list/phone-list.template.html',
       controller: function PhoneListController($http) {

docs/content/tutorial/step_08.ngdoc

@@ -38,7 +38,7 @@ URLs point to the `app/img/phones/` directory.
 ```
 
 
-## Template
+## Component Template
 
 <br />
 **`app/phone-list/phone-list.template.html`:**

docs/content/tutorial/step_09.ngdoc

@@ -358,6 +358,10 @@ various URLs and verifying that the correct view was rendered.
       browser.get('index.html#/phones');
     });
 
+    ...
+
+  });
+
   ...
 
   describe('View: Phone details', function() {

docs/content/tutorial/step_10.ngdoc

@@ -52,7 +52,7 @@ Each of these files describes various properties of the phone using the same dat
 show this data in the phone details view.
 
 
-## Controller
+## Component Controller
 
 We will expand the `phoneDetail` component's controller by using the `$http` service to fetch the
 appropriate JSON files. This works the same way as the `phoneList` component's controller.
@@ -81,7 +81,7 @@ To construct the URL for the HTTP request, we use `$routeParams.phoneId`, which
 the current route by the `$route` service.
 
 
-## Template
+## Component Template
 
 The inline, TBD placeholder template has been replaced with a full blown external template,
 including lists and bindings that comprise the phone details. Note how we use the Angular

docs/content/tutorial/step_11.ngdoc

@@ -66,7 +66,7 @@ angular.module('phonecatApp', [
 ```
 
 
-## Template
+## Templates
 
 Since we have created two new files (**core.module.js**, **checkmark.filter.js**), we need to
 include them in our layout template.

docs/content/tutorial/step_12.ngdoc

@@ -16,7 +16,7 @@ In this step, you will add a clickable phone image swapper to the phone details
 <div doc-tutorial-reset="12"></div>
 
 
-## Controller
+## Component Controller
 
 <br />
 **`app/phone-detail/phone-detail.component.js`:**
@@ -47,7 +47,7 @@ We also created a `setImage()` method (to be used as event handler), that will c
 `mainImageUrl`.
 
 
-## Template
+## Component Template
 
 <br />
 **`app/phone-detail/phone-detail.template.html`:**

docs/content/tutorial/step_13.ngdoc

@@ -138,7 +138,7 @@ need to load the `angular-resource.js` file, which contains the `ngResource` mod
 ```
 
 
-## Controller
+## Component Controllers
 
 We can now simplify our component controllers (`PhoneListController` and `PhoneDetailController`) by
 factoring out the lower-level `$http` service, replacing it with the new `Phone` service. Angular's