2014-02-06 13:33:42 +00:00
|
|
|
@ngdoc tutorial
|
2014-02-12 22:47:42 +00:00
|
|
|
@name Tutorial
|
2014-02-06 13:33:42 +00:00
|
|
|
@step -1
|
2012-03-30 14:02:26 -07:00
|
|
|
@description
|
|
|
|
|
|
2014-04-01 09:40:44 +01:00
|
|
|
# PhoneCat Tutorial App
|
2014-02-12 22:47:42 +00:00
|
|
|
|
2013-07-09 18:08:23 -04:00
|
|
|
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
|
2017-01-24 17:23:54 +00:00
|
|
|
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
|
2013-07-09 18:08:23 -04:00
|
|
|
of Android devices, lets you filter the list to see only devices that interest you, and then view
|
|
|
|
|
details for any device.
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413"
|
|
|
|
|
alt="demo application running in the browser">
|
2013-07-09 18:08:23 -04:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
Follow the tutorial to see how AngularJS makes browsers smarter — without the use of native
|
2014-04-04 10:22:33 +01:00
|
|
|
extensions or plug-ins:
|
2013-07-09 18:08:23 -04:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
* See examples of how to use client-side data binding to build dynamic views of data that change
|
|
|
|
|
immediately in response to user actions.
|
2017-01-24 17:23:54 +00:00
|
|
|
* See how AngularJS keeps your views in sync with your data without the need for DOM manipulation.
|
2014-04-04 10:22:33 +01:00
|
|
|
* Learn a better, easier way to test your web apps, with Karma and Protractor.
|
|
|
|
|
* Learn how to use dependency injection and services to make common web tasks, such as getting data
|
|
|
|
|
into your app, easier.
|
2013-07-09 18:08:23 -04:00
|
|
|
|
|
|
|
|
When you finish the tutorial you will be able to:
|
|
|
|
|
|
2014-04-01 09:40:44 +01:00
|
|
|
* Create a dynamic application that works in all modern browsers.
|
2014-04-04 10:22:33 +01:00
|
|
|
* Use data binding to wire up your data model to your views.
|
|
|
|
|
* Create and run unit tests, with Karma.
|
2016-03-27 21:32:36 +03:00
|
|
|
* Create and run end-to-end tests, with Protractor.
|
|
|
|
|
* Move application logic out of the template and into components and controllers.
|
2017-01-24 17:23:54 +00:00
|
|
|
* Get data from a server using AngularJS services.
|
2016-03-27 21:32:36 +03:00
|
|
|
* Apply animations to your application, using the `ngAnimate` module.
|
2017-01-24 17:23:54 +00:00
|
|
|
* Structure your AngularJS applications in a modular way that scales well for larger projects.
|
2013-07-09 18:08:23 -04:00
|
|
|
* Identify resources for learning more about AngularJS.
|
|
|
|
|
|
|
|
|
|
The tutorial guides you through the entire process of building a simple application, including
|
|
|
|
|
writing and running unit and end-to-end tests. Experiments at the end of each step provide
|
|
|
|
|
suggestions for you to learn more about AngularJS and the application you are building.
|
|
|
|
|
|
|
|
|
|
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
|
|
|
|
|
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
|
|
|
|
|
{@link misc/started Getting Started} document.
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
|
|
|
|
|
# Environment Setup
|
2013-07-09 18:08:23 -04:00
|
|
|
|
2014-08-15 13:42:22 +01:00
|
|
|
The rest of this page explains how you can set up your local machine for development.
|
2016-03-27 21:32:36 +03:00
|
|
|
If you just want to _read_ the tutorial, you can go straight to the first step:
|
2014-04-04 10:22:33 +01:00
|
|
|
[Step 0 - Bootstrapping](tutorial/step_00).
|
2013-07-09 18:08:23 -04:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
|
|
|
|
|
## Working with the Code
|
2013-07-09 18:08:23 -04:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
You can follow along with this tutorial and hack on the code in the comfort of your own computer.
|
2017-01-24 17:23:54 +00:00
|
|
|
This way, you can get hands-on practice of really writing AngularJS code and also on using the
|
2014-04-04 10:22:33 +01:00
|
|
|
recommended testing tools.
|
|
|
|
|
|
|
|
|
|
The tutorial relies on the use of the [Git][git] versioning system for source code management.
|
|
|
|
|
You don't need to know anything about Git to follow the tutorial other than how to install and run
|
|
|
|
|
a few git commands.
|
2013-07-09 18:08:23 -04:00
|
|
|
|
|
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
### Install Git
|
2013-07-09 18:08:23 -04:00
|
|
|
|
2018-11-02 16:38:46 +02:00
|
|
|
You can download and install Git from https://git-scm.com/download. Once installed, you should have
|
2016-03-27 21:32:36 +03:00
|
|
|
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.
|
|
|
|
|
* `git checkout ...`: Check out a particular branch or a tagged version of the code to hack on.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
|
|
|
|
|
### Download angular-phonecat
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
Clone the [angular-phonecat repository][angular-phonecat] located at GitHub by running the following
|
|
|
|
|
command:
|
|
|
|
|
|
|
|
|
|
```
|
2016-03-27 21:32:36 +03:00
|
|
|
git clone --depth=16 https://github.com/angular/angular-phonecat.git
|
2014-04-01 09:40:44 +01:00
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
This command creates an `angular-phonecat` sub-directory in your current directory.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<div class="alert alert-info">
|
|
|
|
|
The `--depth=16` option tells Git to pull down only the last 16 commits.
|
|
|
|
|
This makes the download much smaller and faster.
|
2014-04-04 10:22:33 +01:00
|
|
|
</div>
|
|
|
|
|
|
2014-04-01 09:40:44 +01:00
|
|
|
Change your current directory to `angular-phonecat`.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
cd angular-phonecat
|
|
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
The tutorial instructions, from now on, assume you are running all commands from within the
|
2014-04-01 09:40:44 +01:00
|
|
|
`angular-phonecat` directory.
|
|
|
|
|
|
|
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
### Install Node.js
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
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].
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
You can download a Node.js installer for your operating system from https://nodejs.org/en/download/.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
Check the version of Node.js that you have installed by running the following command:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
```
|
|
|
|
|
node --version
|
|
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
In Debian based distributions, there might be a name clash with another utility called `node`. The
|
2014-06-06 10:43:02 +01:00
|
|
|
suggested solution is to also install the `nodejs-legacy` apt package, which renames `node` to
|
|
|
|
|
`nodejs`.
|
2014-05-20 12:56:39 -07:00
|
|
|
|
|
|
|
|
```
|
2014-10-22 13:05:12 -05:00
|
|
|
apt-get install nodejs-legacy npm
|
2014-05-20 12:56:39 -07:00
|
|
|
nodejs --version
|
2014-10-22 13:05:12 -05:00
|
|
|
npm --version
|
2014-05-20 12:56:39 -07:00
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<div class="alert alert-info">
|
|
|
|
|
If you need to run different versions of Node.js in your local environment, consider installing
|
|
|
|
|
[Node Version Manager (nvm)][nvm] or [Node Version Manager (nvm) for Windows][nvm-windows].
|
2014-04-01 09:40:44 +01:00
|
|
|
</div>
|
|
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
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:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm install
|
|
|
|
|
```
|
|
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
This command reads angular-phonecat's `package.json` file and downloads the following dependencies
|
|
|
|
|
into the `node_modules` directory:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* [Http-Server][http-server] - simple local static web server
|
|
|
|
|
* [Karma][karma] - unit test runner
|
|
|
|
|
* [Protractor][protractor] - end-to-end (E2E) test runner
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
Running `npm install` will also automatically copy the AngularJS framework and other dependencies
|
|
|
|
|
necessary for our app to work into the `app/lib/` directory.
|
2014-04-24 10:59:04 +01:00
|
|
|
|
|
|
|
|
<div class="alert alert-info">
|
|
|
|
|
Note the angular-phonecat project is setup to install and run these utilities via npm scripts.
|
|
|
|
|
This means that you do not have to have any of these utilities installed globally on your system
|
2016-03-27 21:32:36 +03:00
|
|
|
to follow the tutorial. See [Installing Helper Tools](tutorial/#install-helper-tools-optional-)
|
|
|
|
|
below for more information.
|
2014-04-24 10:59:04 +01:00
|
|
|
</div>
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
The project is preconfigured with a number of npm helper scripts to make it easy to run the common
|
2014-04-04 10:22:33 +01:00
|
|
|
tasks that you will need while developing:
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* `npm start`: Start a local development web server.
|
|
|
|
|
* `npm test`: Start the Karma unit test runner.
|
|
|
|
|
* `npm run protractor`: Run the Protractor end-to-end (E2E) tests.
|
|
|
|
|
* `npm run update-webdriver`: Install the drivers needed by Protractor.
|
|
|
|
|
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-24 10:59:04 +01:00
|
|
|
### Install Helper Tools (optional)
|
|
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
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 ...`.
|
2014-04-24 10:59:04 +01:00
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
For instance, to install the `http-server` command line executable you would do:
|
2014-04-24 10:59:04 +01:00
|
|
|
|
|
|
|
|
```
|
2018-11-02 16:41:12 +02:00
|
|
|
sudo npm install --global http-server
|
2014-04-24 10:59:04 +01:00
|
|
|
```
|
|
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
_(Omit the sudo if running on Windows.)_
|
2014-04-24 10:59:04 +01:00
|
|
|
|
2018-11-02 16:41:12 +02:00
|
|
|
Then you can run the `http-server` tool directly, such as:
|
2014-04-24 10:59:04 +01:00
|
|
|
|
|
|
|
|
```
|
2018-11-02 16:41:12 +02:00
|
|
|
http-server ./app
|
2014-04-24 10:59:04 +01:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
### Running the Development Web Server
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
While AngularJS applications are purely client-side code, and it is possible to open them in a web
|
2016-03-27 21:32:36 +03:00
|
|
|
browser directly from the file system, it is better to serve them from an HTTP web server. In
|
2014-04-04 10:22:33 +01:00
|
|
|
particular, for security reasons, most modern browsers will not allow JavaScript to make server
|
|
|
|
|
requests if the page is loaded directly from the file system.
|
|
|
|
|
|
|
|
|
|
The angular-phonecat project is configured with a simple static web server for hosting the
|
|
|
|
|
application during development. Start the web server by running:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm start
|
|
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
This will create a local web server that is listening to port 8000 on your local machine.
|
|
|
|
|
You can now browse to the application at http://localhost:8000/index.html.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-07-26 11:21:38 -04:00
|
|
|
<div class="alert alert-info">
|
2016-03-27 21:32:36 +03:00
|
|
|
To serve the web app on a different IP address or port, edit the "start" script within
|
2017-01-24 17:23:54 +00:00
|
|
|
`package.json`. You can use `-a` to set the address and `-p` to set the port. You also need to
|
2016-03-27 21:32:36 +03:00
|
|
|
update the `baseUrl` configuration property in `e2e-test/protractor.conf.js`.
|
2014-07-26 11:21:38 -04:00
|
|
|
</div>
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
### Running Unit Tests
|
|
|
|
|
|
|
|
|
|
We use unit tests to ensure that the JavaScript code in our application is operating correctly.
|
2016-03-27 21:32:36 +03:00
|
|
|
Unit tests focus on testing small isolated parts of the application. The unit tests are kept in test
|
|
|
|
|
files (specs) side-by-side with the application code. This way it's easier to find them and keep
|
|
|
|
|
them up-to-date with the code under test. It also makes refactoring our app structure easier, since
|
|
|
|
|
tests are moved together with the source code.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
The angular-phonecat project is configured to use [Karma][karma] to run the unit tests for the
|
2016-03-27 21:32:36 +03:00
|
|
|
application. Start Karma by running:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm test
|
|
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
This will start the Karma unit test runner. Karma will read the configuration file `karma.conf.js`,
|
|
|
|
|
located at the root of the project directory. This configuration file tells Karma to:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* Open up instances of the Chrome and Firefox browsers and connect them to Karma.
|
|
|
|
|
* Execute all the unit tests in these browsers.
|
|
|
|
|
* Report the results of these tests in the terminal/command line window.
|
|
|
|
|
* Watch all the project's JavaScript files and re-run the tests whenever any of these change.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
It is good to leave this running all the time, in the background, as it will give you immediate
|
|
|
|
|
feedback about whether your changes pass the unit tests while you are working on the code.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
### Running E2E Tests
|
2014-04-01 11:13:22 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
We use E2E (end-to-end) tests to ensure that the application as a whole operates as expected.
|
|
|
|
|
E2E tests are designed to test the whole client-side application, in particular that the views are
|
|
|
|
|
displaying and behaving correctly. It does this by simulating real user interaction with the real
|
|
|
|
|
application running in the browser.
|
2014-04-04 10:22:33 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
The E2E tests are kept in the `e2e-tests` directory.
|
2014-04-04 10:22:33 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
The angular-phonecat project is configured to use [Protractor][protractor] to run the E2E tests for
|
|
|
|
|
the application. Protractor relies upon a set of drivers to allow it to interact with the browser.
|
|
|
|
|
You can install these drivers by running:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
|
|
|
|
```
|
2014-04-04 10:22:33 +01:00
|
|
|
npm run update-webdriver
|
2014-04-01 09:40:44 +01:00
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<div class="alert alert-info">
|
|
|
|
|
You don't have to manually run this command. Our npm scripts are configured so that it will be
|
|
|
|
|
automatically executed as part of the command that runs the E2E tests.
|
|
|
|
|
</div>
|
2015-09-24 20:37:28 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
Since Protractor works by interacting with a running application, we need to start our web server:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
```
|
|
|
|
|
npm start
|
|
|
|
|
```
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
Then, in a _separate_ terminal/command line window, we can run the Protractor test scripts against
|
|
|
|
|
the application by running:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
```
|
|
|
|
|
npm run protractor
|
|
|
|
|
```
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
Protractor will read the configuration file at `e2e-tests/protractor.conf.js`. This configuration
|
|
|
|
|
file tells Protractor to:
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* Open up a Chrome browser and connect it to the application.
|
|
|
|
|
* Execute all the E2E tests in this browser.
|
|
|
|
|
* Report the results of these tests in the terminal/command line window.
|
|
|
|
|
* Close the browser and exit.
|
2014-04-01 09:40:44 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
It is good to run the E2E tests whenever you make changes to the HTML views or want to check that
|
|
|
|
|
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.
|
|
|
|
|
|
2018-11-02 16:55:34 +02:00
|
|
|
<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>
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
|
2018-11-02 16:51:21 +02:00
|
|
|
### 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>
|
|
|
|
|
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
### Common Issues
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
**Firewall / Proxy issues**
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
Git and other tools, often use the `git:` protocol for accessing files in remote repositories.
|
|
|
|
|
Some firewall configurations are blocking `git://` URLs, which leads to errors when trying to clone
|
|
|
|
|
repositories or download dependencies. (For example corporate firewalls are "notorious" for blocking
|
2016-03-27 21:32:36 +03:00
|
|
|
`git:`.)
|
|
|
|
|
|
|
|
|
|
If you run into this issue, you can force the use of `https:` instead, by running the following
|
|
|
|
|
command: `git config --global url."https://".insteadOf git://`
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
**Updating WebDriver takes too long**
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
In that case, you can delete the `node_modules/` directory and run `npm install` again.
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
**Protractor dependencies**
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
Under the hood, Protractor uses the [Selenium Standalone Server][selenium], which in turn requires
|
|
|
|
|
the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this by running
|
2016-03-27 21:32:36 +03:00
|
|
|
`java -version` from the command line.
|
|
|
|
|
|
|
|
|
|
If JDK is not already installed, you can download it [here][jdk-download].
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
**Error running the web server**
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
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
|
2016-03-27 21:32:36 +03:00
|
|
|
available, before running `npm start`.
|
|
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
|
|
|
|
Now that you have set up your local machine, let's get started with the tutorial:
|
|
|
|
|
{@link step_00 Step 0 - Bootstrapping}
|
2013-07-09 18:08:23 -04:00
|
|
|
|
|
|
|
|
|
2014-04-04 10:22:33 +01:00
|
|
|
[angular-phonecat]: https://github.com/angular/angular-phonecat
|
2018-11-02 16:38:46 +02:00
|
|
|
[git]: https://git-scm.com/
|
2014-04-01 09:40:44 +01:00
|
|
|
[http-server]: https://github.com/nodeapps/http-server
|
2016-03-27 21:32:36 +03:00
|
|
|
[jdk]: https://en.wikipedia.org/wiki/Java_Development_Kit
|
2018-11-02 16:38:46 +02:00
|
|
|
[jdk-download]: https://www.oracle.com/technetwork/java/javase/downloads/index.html
|
2016-03-27 21:32:36 +03:00
|
|
|
[karma]: https://karma-runner.github.io/
|
2018-11-02 16:38:46 +02:00
|
|
|
[node]: https://nodejs.org/
|
2018-11-02 16:41:12 +02:00
|
|
|
[npm]: https://www.npmjs.com/
|
2016-03-27 21:32:36 +03:00
|
|
|
[nvm]: https://github.com/creationix/nvm
|
|
|
|
|
[nvm-windows]: https://github.com/coreybutler/nvm-windows
|
2018-11-02 16:51:21 +02:00
|
|
|
[package-lock]: https://docs.npmjs.com/files/package-lock.json
|
2016-03-27 21:32:36 +03:00
|
|
|
[protractor]: https://github.com/angular/protractor
|
2018-11-02 16:38:46 +02:00
|
|
|
[selenium]: https://docs.seleniumhq.org/
|
2018-11-02 16:51:21 +02:00
|
|
|
[semver-ranges]: https://docs.npmjs.com/misc/semver#ranges
|
