docs(tutorial): bring up-to-date with latest angular-phonecat/angular-seed

docs/content/tutorial/index.ngdoc

@@ -64,7 +64,7 @@ a few git commands.
 
 ### Install Git
 
-You can download and install Git from http://git-scm.com/download. Once installed, you should have
+You can download and install Git from https://git-scm.com/download. Once installed, you should have
 access to the `git` command line tool. The main commands that you will need to use are:
 
 * `git clone ...`: Clone a remote repository onto your local machine.
@@ -99,8 +99,8 @@ The tutorial instructions, from now on, assume you are running all commands from
 
 ### Install Node.js
 
-If you want to run the preconfigured local web server and the test tools then you will also need
-[Node.js v4+][node].
+In order to install dependencies (such as the test tools and AngularJS itself) and run the
+preconfigured local web server, you will also need [Node.js v6+][node].
 
 You can download a Node.js installer for your operating system from https://nodejs.org/en/download/.
 
@@ -125,22 +125,25 @@ npm --version
   [Node Version Manager (nvm)][nvm] or [Node Version Manager (nvm) for Windows][nvm-windows].
 </div>
 
-Once you have Node.js installed on your machine, you can download the tool dependencies by running:
+By installing Node.js, you also get [npm][npm], which is a command line executable for downloading
+and managing Node.js packages. We use it to download the AngularJS framework as well as development
+and testing tools.
+
+Once you have Node.js installed on your machine, you can download these dependencies by running:
 
 ```
 npm install
 ```
 
-This command reads angular-phonecat's `package.json` file and downloads the following tools into the
-`node_modules` directory:
+This command reads angular-phonecat's `package.json` file and downloads the following dependencies
+into the `node_modules` directory:
 
-* [Bower][bower] - client-side code package manager
 * [Http-Server][http-server] - simple local static web server
 * [Karma][karma] - unit test runner
 * [Protractor][protractor] - end-to-end (E2E) test runner
 
-Running `npm install` will also automatically use bower to download the AngularJS framework into the
-`app/bower_components` directory.
+Running `npm install` will also automatically copy the AngularJS framework and other dependencies
+necessary for our app to work into the `app/lib/` directory.
 
 <div class="alert alert-info">
   Note the angular-phonecat project is setup to install and run these utilities via npm scripts.
@@ -160,23 +163,23 @@ tasks that you will need while developing:
 
 ### Install Helper Tools (optional)
 
-The Bower, Http-Server, Karma and Protractor modules are also executables, which can be installed
-globally and run directly from a terminal/command prompt. You don't need to do this to follow the
-tutorial, but if you decide you do want to run them directly, you can install these modules globally
-using, `sudo npm install -g ...`.
+The Http-Server, Karma and Protractor modules are also executables, which can be installed globally
+and run directly from a terminal/command prompt. You don't need to do this to follow the tutorial,
+but if you decide you do want to run them directly, you can install these modules globally using,
+`sudo npm install --global ...`.
 
-For instance, to install the Bower command line executable you would do:
+For instance, to install the `http-server` command line executable you would do:
 
 ```
-sudo npm install -g bower
+sudo npm install --global http-server
 ```
 
-_(Omit the sudo if running on Windows)_
+_(Omit the sudo if running on Windows.)_
 
-Then you can run the bower tool directly, such as:
+Then you can run the `http-server` tool directly, such as:
 
 ```
-bower install
+http-server ./app
 ```
 
 
@@ -278,6 +281,45 @@ It is good to run the E2E tests whenever you make changes to the HTML views or w
 the application as a whole is executing correctly. It is very common to run E2E tests before pushing
 a new commit of changes to a remote repository.
 
+<div class="alert alert-warning">
+  <p>
+    Each version of Protractor is compatible with specific browser versions. If you are reading this
+    some time in the future, it is possible that the specified Protractor version is no longer
+    compatible with the latest version of Chrome that you are using.
+  </p>
+  <p>
+    If that is the case, you can try upgrading Protractor to newer version. For instructions on how
+    to upgrade dependencies see [Updating dependencies](tutorial/#updating-dependencies).
+  </p>
+</div>
+
+
+### Updating dependencies
+
+In order to avoid surprises, all dependencies listed in `package.json` are pinned to specific
+versions (this is what the [package-lock.json][package-lock] file is about). This ensures that the
+same version of a dependency is installed every time.
+
+Since all dependencies are acquired via npm, you can use the same tool to easily update them as
+well (although you probably don't need to for the purpose of this tutorial). Simply run the
+preconfigured script:
+
+```
+npm run update-deps
+```
+
+This will update all packages to the latest version that satisfy their version ranges (as specified
+in `package.json`) and also copy the necessary files into `app/lib/`. For example, if `package.json`
+contains `"some-package": "1.2.x"`, it will be updated to the latest 1.2.x version (e.g. 1.2.99),
+but not to 1.3.x (e.g. 1.3.0).
+
+If you want to update a dependency to a version newer than what the specificed range would permit,
+you can change the version range in `package.json` and then run `npm run update-deps` as usual.
+
+<div class="alert alert-info">
+  See [here][semver-ranges] for more info on the various version range formats.
+</div>
+
 
 ### Common Issues
 
@@ -324,14 +366,16 @@ Now that you have set up your local machine, let's get started with the tutorial
 
 
 [angular-phonecat]: https://github.com/angular/angular-phonecat
-[bower]: http://bower.io/
-[git]: http://git-scm.com/
+[git]: https://git-scm.com/
 [http-server]: https://github.com/nodeapps/http-server
 [jdk]: https://en.wikipedia.org/wiki/Java_Development_Kit
-[jdk-download]: http://www.oracle.com/technetwork/java/javase/downloads/index.html
+[jdk-download]: https://www.oracle.com/technetwork/java/javase/downloads/index.html
 [karma]: https://karma-runner.github.io/
-[node]: http://nodejs.org/
+[node]: https://nodejs.org/
+[npm]: https://www.npmjs.com/
 [nvm]: https://github.com/creationix/nvm
 [nvm-windows]: https://github.com/coreybutler/nvm-windows
+[package-lock]: https://docs.npmjs.com/files/package-lock.json
 [protractor]: https://github.com/angular/protractor
-[selenium]: http://docs.seleniumhq.org/
+[selenium]: https://docs.seleniumhq.org/
+[semver-ranges]: https://docs.npmjs.com/misc/semver#ranges

docs/content/tutorial/step_00.ngdoc

@@ -51,8 +51,8 @@ The code contains some key AngularJS elements that we will need as we progress.
   <head>
     <meta charset="utf-8">
     <title>My HTML File</title>
-    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
-    <script src="bower_components/angular/angular.js"></script>
+    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
+    <script src="lib/angular/angular.js"></script>
   </head>
   <body>
 
@@ -84,7 +84,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>
+<script src="lib/angular/angular.js"></script>
 ```
 
 This code downloads the `angular.js` script which registers a callback that will be executed by the
@@ -154,16 +154,16 @@ and one static binding, and our model is empty. That will soon change!
 
 Most of the files in your working directory come from the [angular-seed project][angular-seed],
 which is typically used to bootstrap new AngularJS projects. The seed project is pre-configured to
-install the AngularJS framework (via `bower` into the `app/bower_components/` directory) and tools
-for developing and testing a typical web application (via `npm`).
+install the AngularJS framework (via `npm` into the `app/lib/` directory) and tools for developing
+and testing a typical web application (via `npm`).
 
 For the purposes of this tutorial, we modified the angular-seed with the following changes:
 
 * Removed the example app.
 * Removed unused dependencies.
 * Added phone images to `app/img/phones/`.
 * Added phone data files (JSON) to `app/phones/`.
-* Added a dependency on [Bootstrap](http://getbootstrap.com) in the `bower.json` file.
+* Added a dependency on [Bootstrap][bootstrap-3.3] in the `package.json` file.
 
 
 ## Experiments
@@ -186,3 +186,4 @@ Now let's go to {@link step_01 step 1} and add some content to the web app.
 
 
 [angular-seed]: https://github.com/angular/angular-seed
+[bootstrap-3.3]: https://getbootstrap.com/docs/3.3

docs/content/tutorial/step_02.ngdoc

@@ -33,7 +33,7 @@ The view is constructed by AngularJS from this template.
 <html ng-app="phonecatApp">
 <head>
   ...
-  <script src="bower_components/angular/angular.js"></script>
+  <script src="lib/angular/angular.js"></script>
   <script src="app.js"></script>
 </head>
 <body ng-controller="PhoneListController">
@@ -317,7 +317,7 @@ by utilizing components.
 <ul doc-tutorial-nav="2"></ul>
 
 
-[jasmine-docs]: http://jasmine.github.io/2.4/introduction.html
-[jasmine-home]: http://jasmine.github.io/
+[jasmine-docs]: https://jasmine.github.io/api/3.3/global
+[jasmine-home]: https://jasmine.github.io/
 [karma]: https://karma-runner.github.io/
-[mvc-pattern]: http://en.wikipedia.org/wiki/Model–View–Controller
+[mvc-pattern]: https://en.wikipedia.org/wiki/Model–View–Controller

docs/content/tutorial/step_03.ngdoc

@@ -120,7 +120,7 @@ acquired skill.
 <html ng-app="phonecatApp">
 <head>
   ...
-  <script src="bower_components/angular/angular.js"></script>
+  <script src="lib/angular/angular.js"></script>
   <script src="app.js"></script>
   <script src="phone-list.component.js"></script>
 </head>
@@ -277,7 +277,7 @@ files, so it remains easy to locate as our application grows.
 
 
 [case-styles]: https://en.wikipedia.org/wiki/Letter_case#Special_case_styles
-[jasmine-docs]: http://jasmine.github.io/2.4/introduction.html
-[jasmine-home]: http://jasmine.github.io/
+[jasmine-docs]: https://jasmine.github.io/api/3.3/global
+[jasmine-home]: https://jasmine.github.io/
 [karma]: https://karma-runner.github.io/
-[mvc-pattern]: http://en.wikipedia.org/wiki/Model–View–Controller
+[mvc-pattern]: https://en.wikipedia.org/wiki/Model–View–Controller

docs/content/tutorial/step_07.ngdoc

@@ -8,8 +8,8 @@
 
 Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
 from our server using one of AngularJS's built-in {@link guide/services services} called
-{@link ng.$http $http}. We will use AngularJS's {@link guide/di dependency injection (DI)} to provide
-the service to the `phoneList` component's controller.
+{@link ng.$http $http}. We will use AngularJS's {@link guide/di dependency injection (DI)} to
+provide the service to the `phoneList` component's controller.
 
 * There is now a list of 20 phones, loaded from the server.
 

docs/content/tutorial/step_08.ngdoc

@@ -47,10 +47,10 @@ URLs point to the `app/img/phones/` directory.
 ...
 <ul class="phones">
   <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
-    <a href="#/phones/{{phone.id}}" class="thumb">
+    <a href="#!/phones/{{phone.id}}" class="thumb">
       <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
     </a>
-    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
+    <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
     <p>{{phone.snippet}}</p>
   </li>
 </ul>
@@ -83,7 +83,7 @@ HTTP request to an invalid location.
       query.sendKeys('nexus');
 
       element.all(by.css('.phones li a')).first().click();
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+      expect(browser.getCurrentUrl()).toContain('index.html#!/phones/nexus-s');
     });
 
     ...
@@ -110,8 +110,9 @@ You can now rerun `npm run protractor` to see the tests run.
 
 ## Summary
 
-Now that you have added phone images and links, go to {@link step_09 step 9} to learn about AngularJS
-layout templates and how AngularJS makes it easy to create applications that have multiple views.
+Now that you have added phone images and links, go to {@link step_09 step 9} to learn about
+AngularJS layout templates and how AngularJS makes it easy to create applications that have
+multiple views.
 
 
 <ul doc-tutorial-nav="8"></ul>