From 03a4eb8a19179f3764c012b5e5a7e3009ee9d7ad Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 2 Nov 2018 16:38:46 +0200 Subject: [PATCH 1/7] docs(tutotial): switch all links to `https` --- docs/content/tutorial/index.ngdoc | 12 ++++++------ docs/content/tutorial/step_00.ngdoc | 3 ++- docs/content/tutorial/step_02.ngdoc | 6 +++--- docs/content/tutorial/step_03.ngdoc | 6 +++--- docs/content/tutorial/step_09.ngdoc | 2 +- docs/content/tutorial/step_13.ngdoc | 2 +- docs/content/tutorial/step_14.ngdoc | 8 ++++---- docs/content/tutorial/the_end.ngdoc | 2 +- 8 files changed, 21 insertions(+), 20 deletions(-) diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 823f91d7634d..a066a179a4d9 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/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. @@ -324,14 +324,14 @@ 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/ +[bower]: https://bower.io/ +[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/ [nvm]: https://github.com/creationix/nvm [nvm-windows]: https://github.com/coreybutler/nvm-windows [protractor]: https://github.com/angular/protractor -[selenium]: http://docs.seleniumhq.org/ +[selenium]: https://docs.seleniumhq.org/ diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 4aca8850cfe6..58dc5b03343b 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -163,7 +163,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi * 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 `bower.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 diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index 6b4a54388b3c..63d8a1337686 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -317,7 +317,7 @@ by utilizing components. -[jasmine-docs]: http://jasmine.github.io/2.4/introduction.html -[jasmine-home]: http://jasmine.github.io/ +[jasmine-docs]: https://jasmine.github.io/2.4/introduction.html +[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 diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index e7a16de54bd0..65f13d3dd6de 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -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 diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index da1e92a7dfc6..e10f4b9bdac1 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -424,6 +424,6 @@ With the routing set up and the phone list view implemented, we are ready to go -[bower]: http://bower.io +[bower]: https://bower.io/ [deep-linking]: https://en.wikipedia.org/wiki/Deep_linking [wiki-di]: https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection diff --git a/docs/content/tutorial/step_13.ngdoc b/docs/content/tutorial/step_13.ngdoc index 2ad46e2c9459..22e5ef607312 100644 --- a/docs/content/tutorial/step_13.ngdoc +++ b/docs/content/tutorial/step_13.ngdoc @@ -319,6 +319,6 @@ Now that we have seen how to build a custom service as a RESTful client, we are -[bower]: http://bower.io/ +[bower]: https://bower.io/ [jasmine-equality]: https://jasmine.github.io/2.4/custom_equality.html [restful]: https://en.wikipedia.org/wiki/Representational_State_Transfer diff --git a/docs/content/tutorial/step_14.ngdoc b/docs/content/tutorial/step_14.ngdoc index 40667717ebee..375690d857d8 100644 --- a/docs/content/tutorial/step_14.ngdoc +++ b/docs/content/tutorial/step_14.ngdoc @@ -556,9 +556,9 @@ There you have it! We have created a web application in a relatively short amoun -[bower]: http://bower.io/ -[caniuse-css-animation]: http://caniuse.com/#feat=css-animation -[caniuse-css-transitions]: http://caniuse.com/#feat=css-transitions +[bower]: https://bower.io/ +[caniuse-css-animation]: https://caniuse.com/#feat=css-animation +[caniuse-css-transitions]: https://caniuse.com/#feat=css-transitions [jquery]: https://jquery.com/ -[jquery-animate]: https://api.jquery.com/animate/ +[jquery-animate]: https://api.jquery.com/animate [mdn-animations]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc index 84dc09246c8a..6b5e3fe94122 100644 --- a/docs/content/tutorial/the_end.ngdoc +++ b/docs/content/tutorial/the_end.ngdoc @@ -22,5 +22,5 @@ If you have questions or feedback or just want to say "hi", please post a messag [angular-seed]: https://github.com/angular/angular-seed [gitter]: https://gitter.im/angular/angular.js -[irc]: http://webchat.freenode.net/?channels=angularjs&uio=d4 +[irc]: https://webchat.freenode.net/?channels=angularjs&uio=d4 [mailing-list]: https://groups.google.com/forum/#!forum/angular From 693c8af3816536a3735fafe7b9a001d4a5224ca8 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 2 Nov 2018 16:41:12 +0200 Subject: [PATCH 2/7] docs(tutorial): switch from `bower` to `npm` and upgrade AngularJS to 1.7.x Related: angular/angular-phonecat#430 --- docs/content/tutorial/index.ngdoc | 39 +++++++------ docs/content/tutorial/step_00.ngdoc | 12 ++-- docs/content/tutorial/step_02.ngdoc | 4 +- docs/content/tutorial/step_03.ngdoc | 2 +- docs/content/tutorial/step_07.ngdoc | 4 +- docs/content/tutorial/step_08.ngdoc | 9 +-- docs/content/tutorial/step_09.ngdoc | 87 +++++++++++++---------------- docs/content/tutorial/step_13.ngdoc | 55 +++++++----------- docs/content/tutorial/step_14.ngdoc | 64 ++++++++------------- 9 files changed, 119 insertions(+), 157 deletions(-) diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index a066a179a4d9..286d340c64a3 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -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 v4+][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]. -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.
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 ``` @@ -324,13 +327,13 @@ 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]: https://bower.io/ [git]: https://git-scm.com/ [http-server]: https://github.com/nodeapps/http-server [jdk]: https://en.wikipedia.org/wiki/Java_Development_Kit [jdk-download]: https://www.oracle.com/technetwork/java/javase/downloads/index.html [karma]: https://karma-runner.github.io/ [node]: https://nodejs.org/ +[npm]: https://www.npmjs.com/ [nvm]: https://github.com/creationix/nvm [nvm-windows]: https://github.com/coreybutler/nvm-windows [protractor]: https://github.com/angular/protractor diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 58dc5b03343b..c09f5d38dbbd 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -51,8 +51,8 @@ The code contains some key AngularJS elements that we will need as we progress. My HTML File - - + + @@ -84,7 +84,7 @@ For more info on `ngApp`, check out the {@link ngApp API Reference}. **`angular.js` script tag:** ```html - + ``` This code downloads the `angular.js` script which registers a callback that will be executed by the @@ -154,8 +154,8 @@ 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: @@ -163,7 +163,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi * Removed unused dependencies. * Added phone images to `app/img/phones/`. * Added phone data files (JSON) to `app/phones/`. -* Added a dependency on [Bootstrap][bootstrap-3.3] in the `bower.json` file. +* Added a dependency on [Bootstrap][bootstrap-3.3] in the `package.json` file. ## Experiments diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index 63d8a1337686..226ab7d71ffe 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -33,7 +33,7 @@ The view is constructed by AngularJS from this template. ... - + @@ -317,7 +317,7 @@ by utilizing components.
    -[jasmine-docs]: https://jasmine.github.io/2.4/introduction.html +[jasmine-docs]: https://jasmine.github.io/api/3.3/global [jasmine-home]: https://jasmine.github.io/ [karma]: https://karma-runner.github.io/ [mvc-pattern]: https://en.wikipedia.org/wiki/Model–View–Controller diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 65f13d3dd6de..ab8179b849a8 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -120,7 +120,7 @@ acquired skill. ... - + diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc index 4b0d0e64aaaa..c0ef13d2497a 100644 --- a/docs/content/tutorial/step_07.ngdoc +++ b/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. diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index 5707ea4d9902..04329660c786 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -47,10 +47,10 @@ URLs point to the `app/img/phones/` directory. ... @@ -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.
      diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index e10f4b9bdac1..555e382c5cc0 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -23,49 +23,33 @@ has multiple views by adding routing, using an AngularJS module called {@link ng The routing functionality added in this step is provided by AngularJS in the `ngRoute` module, which is distributed separately from the core AngularJS framework. -Since we are using [Bower][bower] to install client-side dependencies, this step updates the -`bower.json` configuration file to include the new dependency: +Since we are using [npm][npm] to install client-side dependencies, this step updates the +`package.json` configuration file to include the new dependency:
      -**`bower.json`:** +**`package.json`:** ```json { "name": "angular-phonecat", - "description": "A starter project for AngularJS", - "version": "0.0.0", - "homepage": "https://github.com/angular/angular-phonecat", - "license": "MIT", - "private": true, + ... "dependencies": { - "angular": "1.5.x", - "angular-mocks": "1.5.x", - "angular-route": "1.5.x", + "angular": "1.7.x", + "angular-route": "1.7.x", "bootstrap": "3.3.x" - } + }, + ... } ``` -The new dependency `"angular-route": "1.5.x"` tells bower to install a version of the angular-route -module that is compatible with version 1.5.x of AngularJS. We must tell bower to download and install +The new dependency `"angular-route": "1.7.x"` tells npm to install a version of the angular-route +module that is compatible with version 1.7.x of AngularJS. We must tell npm to download and install this dependency. ``` npm install ``` -
      - **Note:** If you have bower installed globally, you can run `bower install`, but for this project - we have preconfigured `npm install` to run bower for us. -
      - -
      - **Warning:** If a new version of AngularJS has been released since you last ran `npm install`, then - you may have a problem with the `bower install` due to a conflict between the versions of - angular.js that need to be installed. If you run into this issue, simply delete your - `app/bower_components` directory and then run `npm install`. -
      - ## Multiple Views, Routing and Layout Templates @@ -127,8 +111,8 @@ service, the `$routeProvider` exposes APIs that allow you to define routes for y
      AngularJS modules solve the problem of removing global variables from the application and provide a -way of configuring the injector. As opposed to AMD or require.js modules, AngularJS modules don't try -to solve the problem of script load ordering or lazy script fetching. These goals are totally +way of configuring the injector. As opposed to AMD or require.js modules, AngularJS modules don't +try to solve the problem of script load ordering or lazy script fetching. These goals are totally independent and both module systems can live side-by-side and fulfill their goals. To deepen your understanding on AngularJS's DI, see [Understanding Dependency Injection][wiki-di]. @@ -146,8 +130,8 @@ into the layout template. This makes it a perfect fit for our `index.html` templ ```html ... - - + + ... @@ -203,10 +187,8 @@ code, we put it into a separate file and used the `.config` suffix. ```js angular. module('phonecatApp'). - config(['$locationProvider', '$routeProvider', - function config($locationProvider, $routeProvider) { - $locationProvider.hashPrefix('!'); - + config(['$routeProvider', + function config($routeProvider) { $routeProvider. when('/phones', { template: '' @@ -226,18 +208,6 @@ the corresponding services. Here, we use the {@link ngRoute.$routeProvider#otherwise $routeProvider.otherwise()} methods to define our application routes. -
      -

      - We also used {@link $locationProvider#hashPrefix $locationProvider.hashPrefix()} to set the - hash-prefix to `!`. This prefix will appear in the links to our client-side routes, right after - the hash (`#`) symbol and before the actual path (e.g. `index.html#!/some/path`). -

      -

      - Setting a prefix is not necessary, but it is considered a good practice (for reasons that are - outside the scope of this tutorial). `!` is the most commonly used prefix. -

      -
      - Our routes are defined as follows: * `when('/phones')`: Determines the view that will be shown, when the URL hash fragment is @@ -261,6 +231,25 @@ the route declaration — `'/phones/:phoneId'` — as a template that is matched URL. All variables defined with the `:` prefix are extracted into the (injectable) {@link ngRoute.$routeParams $routeParams} object. +
      +

      + You may have noticed, that — while the configured route paths start with `/` (e.g. + `/phones`) — the URLs used in templates start with `#!/` (e.g. `#!/phones`). +

      +

      + Without getting into much detail, AngularJS (by default) uses the hash part of the URL (i.e. + what comes after the hash (`#`) symbol) to determine the current route. In addition to that, you + can also specify a {@link $locationProvider#hashPrefix hash-prefix} (`!` by default) that needs + to appear after the hash symbol in order for AngularJS to consider the value an "AngularJS path" + and process it (for example, try to match it to a route). +

      +

      + You can find out more about how all this works in the [Using $location](guide/$location) section + of the Developer Guide. But all you need to know for now, is that the URLs to our various routes + should be prefixed with `#!`. +

      +
      + ## The `phoneDetail` Component @@ -345,8 +334,8 @@ any modification. ```js files: [ - 'bower_components/angular/angular.js', - 'bower_components/angular-route/angular-route.js', + 'lib/angular/angular.js', + 'lib/angular-route/angular-route.js', ... ], ``` @@ -424,6 +413,6 @@ With the routing set up and the phone list view implemented, we are ready to go -[bower]: https://bower.io/ [deep-linking]: https://en.wikipedia.org/wiki/Deep_linking +[npm]: https://www.npmjs.com/ [wiki-di]: https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection diff --git a/docs/content/tutorial/step_13.ngdoc b/docs/content/tutorial/step_13.ngdoc index 22e5ef607312..9a09f417a238 100644 --- a/docs/content/tutorial/step_13.ngdoc +++ b/docs/content/tutorial/step_13.ngdoc @@ -21,50 +21,34 @@ In this step, we will change the way our application fetches data. The RESTful functionality is provided by AngularJS in the {@link ngResource ngResource} module, which is distributed separately from the core AngularJS framework. -Since we are using [Bower][bower] to install client-side dependencies, this step updates the -`bower.json` configuration file to include the new dependency: +Since we are using [npm][npm] to install client-side dependencies, this step updates the +`package.json` configuration file to include the new dependency:
      -**`bower.json`:** +**`package.json`:** -``` +```json { "name": "angular-phonecat", - "description": "A starter project for AngularJS", - "version": "0.0.0", - "homepage": "https://github.com/angular/angular-phonecat", - "license": "MIT", - "private": true, + ... "dependencies": { - "angular": "1.5.x", - "angular-mocks": "1.5.x", - "angular-resource": "1.5.x", - "angular-route": "1.5.x", + "angular": "1.7.x", + "angular-resource": "1.7.x", + "angular-route": "1.7.x", "bootstrap": "3.3.x" - } + }, + ... } ``` -The new dependency `"angular-resource": "1.5.x"` tells bower to install a version of the -angular-resource module that is compatible with version 1.5.x of AngularJS. We must tell bower to +The new dependency `"angular-resource": "1.7.x"` tells npm to install a version of the +angular-resource module that is compatible with version 1.7.x of AngularJS. We must tell npm to download and install this dependency. ``` npm install ``` -
      - **Note:** If you have bower installed globally, you can run `bower install`, but for this project - we have preconfigured `npm install` to run bower for us. -
      - -
      - **Warning:** If a new version of AngularJS has been released since you last ran `npm install`, then - you may have a problem with the `bower install` due to a conflict between the versions of - angular.js that need to be installed. If you run into this issue, simply delete your - `app/bower_components` directory and then run `npm install`. -
      - ## Service @@ -129,7 +113,7 @@ need to load the `angular-resource.js` file, which contains the `ngResource` mod ```html ... - + ... @@ -141,9 +125,10 @@ need to load the `angular-resource.js` file, which contains the `ngResource` mod ## 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. AngularJS's -`$resource` service is easier to 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. +factoring out the lower-level `$http` service, replacing it with the new `Phone` service. +AngularJS's `$resource` service is easier to 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/phone-list/phone-list.module.js`:** @@ -240,8 +225,8 @@ Karma configuration file with angular-resource. ```js files: [ - 'bower_components/angular/angular.js', - 'bower_components/angular-resource/angular-resource.js', + 'lib/angular/angular.js', + 'lib/angular-resource/angular-resource.js', ... ], ``` @@ -319,6 +304,6 @@ Now that we have seen how to build a custom service as a RESTful client, we are -[bower]: https://bower.io/ [jasmine-equality]: https://jasmine.github.io/2.4/custom_equality.html +[npm]: https://www.npmjs.com/ [restful]: https://en.wikipedia.org/wiki/Representational_State_Transfer diff --git a/docs/content/tutorial/step_14.ngdoc b/docs/content/tutorial/step_14.ngdoc index 375690d857d8..f7b09777ae02 100644 --- a/docs/content/tutorial/step_14.ngdoc +++ b/docs/content/tutorial/step_14.ngdoc @@ -22,59 +22,43 @@ the template code we created earlier. ## Dependencies The animation functionality is provided by AngularJS in the `ngAnimate` module, which is distributed -separately from the core AngularJS framework. In addition we will use [jQuery][jquery] in this project -to do extra JavaScript animations. +separately from the core AngularJS framework. In addition we will use [jQuery][jquery] in this +project to do extra JavaScript animations. -Since we are using [Bower][bower] to install client-side dependencies, this step updates the -`bower.json` configuration file to include the new dependencies: +Since we are using [npm][npm] to install client-side dependencies, this step updates the +`package.json` configuration file to include the new dependencies:
      -**`bower.json`:** +**`package.json`:** -``` +```json { "name": "angular-phonecat", - "description": "A starter project for AngularJS", - "version": "0.0.0", - "homepage": "https://github.com/angular/angular-phonecat", - "license": "MIT", - "private": true, + ... "dependencies": { - "angular": "1.5.x", - "angular-animate": "1.5.x", - "angular-mocks": "1.5.x", - "angular-resource": "1.5.x", - "angular-route": "1.5.x", + "angular": "1.7.x", + "angular-animate": "1.7.x", + "angular-resource": "1.7.x", + "angular-route": "1.7.x", "bootstrap": "3.3.x", - "jquery": "3.2.x" - } + "jquery": "3.3.x" + }, + ... } ``` -* `"angular-animate": "1.5.x"` tells bower to install a version of the angular-animate module that - is compatible with version 1.5.x of AngularJS. -* `"jquery": "3.2.x"` tells bower to install the latest patch release of the 3.2 version of jQuery. - Note that this is not an AngularJS library; it is the standard jQuery library. We can use bower to +* `"angular-animate": "1.7.x"` tells npm to install a version of the angular-animate module that + is compatible with version 1.7.x of AngularJS. +* `"jquery": "3.3.x"` tells npm to install the latest patch release of the 3.3 version of jQuery. + Note that this is not an AngularJS library; it is the standard jQuery library. We can use npm to install a wide range of 3rd party libraries. -Now, we must tell bower to download and install these dependencies. +Now, we must tell npm to download and install these dependencies. ``` npm install ``` -
      - **Note:** If you have bower installed globally, you can run `bower install`, but for this project - we have preconfigured `npm install` to run bower for us. -
      - -
      - **Warning:** If a new version of AngularJS has been released since you last ran `npm install`, then - you may have a problem with the `bower install` due to a conflict between the versions of - angular.js that need to be installed. If you run into this issue, simply delete your - `app/bower_components` directory and then run `npm install`. -
      - ## How Animations work with `ngAnimate` @@ -101,12 +85,12 @@ code necessary to make your application "animation aware". ... - + ... - + @@ -115,8 +99,8 @@ code necessary to make your application "animation aware". ```
      - **Important:** Be sure to use jQuery version 2.1 or newer, when using AngularJS 1.5 or newer; jQuery 1.x is - not officially supported. + **Important:** Be sure to use jQuery version 2.1 or newer, when using AngularJS 1.5 or newer; + jQuery 1.x is not officially supported. In order for AngularJS to detect jQuery and take advantage of it, make sure to include `jquery.js` before `angular.js`.
      @@ -556,9 +540,9 @@ There you have it! We have created a web application in a relatively short amoun -[bower]: https://bower.io/ [caniuse-css-animation]: https://caniuse.com/#feat=css-animation [caniuse-css-transitions]: https://caniuse.com/#feat=css-transitions [jquery]: https://jquery.com/ [jquery-animate]: https://api.jquery.com/animate [mdn-animations]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations +[npm]: https://www.npmjs.com/ From 0b71cfd4b205cb3401f2c6f0e40975589002a46d Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 2 Nov 2018 16:48:48 +0200 Subject: [PATCH 3/7] docs(tutorial): replace `getLocationAbsUrl()` with `getCurrentUrl()` Protractor's `browser.getLocationAbsUrl()` has been deprecated and `browser.getCurrentUrl()` is the recommended alternative. Related: angular/angular-phonecat#430 --- docs/content/tutorial/step_08.ngdoc | 2 +- docs/content/tutorial/step_09.ngdoc | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index 04329660c786..1e4623a09a9d 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -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'); }); ... diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index 555e382c5cc0..a6d3d7c652e1 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -352,7 +352,7 @@ various URLs and verifying that the correct view was rendered. it('should redirect `index.html` to `index.html#!/phones', function() { browser.get('index.html'); - expect(browser.getLocationAbsUrl()).toBe('/phones'); + expect(browser.getCurrentUrl()).toContain('index.html#!/phones'); }); ... From 5af0cd72ffa49010ebe22c2442e087b7862b2927 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 2 Nov 2018 16:51:21 +0200 Subject: [PATCH 4/7] docs(tutorial): explain how to upgrade dependencies Related: angular/angular-seed#439 --- docs/content/tutorial/index.ngdoc | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 286d340c64a3..d1a57d5c7203 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -282,6 +282,33 @@ the application as a whole is executing correctly. It is very common to run E2E a new commit of changes to a remote repository. +### Updating dependencies + +In order to avoid surprizes, 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. + +
      + See [here][semver-ranges] for more info on the various version range formats. +
      + + ### Common Issues
      @@ -336,5 +363,7 @@ Now that you have set up your local machine, let's get started with the tutorial [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]: https://docs.seleniumhq.org/ +[semver-ranges]: https://docs.npmjs.com/misc/semver#ranges From 65790fa27c35191938ad0f6c8819fb0bea8dd930 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 2 Nov 2018 16:55:34 +0200 Subject: [PATCH 5/7] docs(tutorial): mention that Protractor might need upgrading Since Protractor requires specific WebDriver versions and these are only compatible with specific browser version ranges, it is often necessary to upgrade Protractor just so that it picks up a more recent WebDriver version. Related: #16739 --- docs/content/tutorial/index.ngdoc | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index d1a57d5c7203..2c1c71f8f260 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -281,6 +281,18 @@ 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. +
      +

      + 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. +

      +

      + 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). +

      +
      + ### Updating dependencies From aa00a7775f797824e0ac4ea420ac00d4e3f0bbd5 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Mon, 5 Nov 2018 14:29:24 +0200 Subject: [PATCH 6/7] fixup! docs(tutorial): switch from `bower` to `npm` and upgrade AngularJS to 1.7.x --- docs/content/tutorial/index.ngdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 2c1c71f8f260..6620a203b590 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -100,7 +100,7 @@ The tutorial instructions, from now on, assume you are running all commands from ### Install Node.js 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 v4+][node]. +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/. From 98129d7670722074ba0dd1c1c54a433cdbbd4a94 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Mon, 5 Nov 2018 14:29:54 +0200 Subject: [PATCH 7/7] fixup! docs(tutorial): explain how to upgrade dependencies --- docs/content/tutorial/index.ngdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc index 6620a203b590..aa16e0837810 100644 --- a/docs/content/tutorial/index.ngdoc +++ b/docs/content/tutorial/index.ngdoc @@ -296,7 +296,7 @@ a new commit of changes to a remote repository. ### Updating dependencies -In order to avoid surprizes, all dependencies listed in `package.json` are pinned to specific +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.