Follow the tutorial to see how Angular makes browsers smarter — without the use of native

extensions or plug-ins:

* See examples of how to use client-side data binding to build dynamic views of data that change

immediately in response to user actions.

* See how Angular keeps your views in synch with your data without the need for DOM manipulation.

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

* Use data binding to wire up your data model to your views.

* Create and run unit tests, with Karma.

* Create and run end to end tests, with Protractor.

* Move application logic out of the template and into Controllers.

* Get data from a server using Angular services.

* Apply animations to your application, using ngAnimate.

# Get Started

The rest of this page explains how you can set up your machine to work with the code on your local

machine. If you just want to read the tutorial then you can just go straight to the first step:

[Step 0 - Bootstrapping](tutorial/step_00).

You can follow along with this tutorial and hack on the code in the comfort of your own computer.

In this way you can get hands-on practice of really writing AngularJS code and also on using the

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.

### Install Git

You can download and install Git from http://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

- `git checkout ...` : check out a particular branch or a tagged version of the code to hack on

### Download angular-phonecat

git clone --depth=14 https://github.com/angular/angular-phonecat.git

<div class="alert alert-info">The `--depth=14` option just tells Git to pull down only the last 14 commits. This makes the

download much smaller and faster.

</div>

### Install Node.js

If you want to run the preconfigured local web-server and the test tools then you will also need

[Node.js v0.10+][node].

You can download a Node.js installer for your operating system from http://nodejs.org/download/.

Check the version of Node.js that you have installed by running the following command:

<div class="alert alert-info">If you need to run a different versions of node.js

Once you have Node.js installed on your machine you can download the tool dependencies by running:

This command will download the following tools, into the `node_modules` directory:

- [Http-Server][http-server] - simple local static web server

- [Protractor][protractor] - end 2 end test runner

tasks that you will need while developing:

- `npm start` : start a local development web-server

- `npm test` : start the Karma unit test runner

- `npm run protractor` : run the Protractor end 2 end tests

- `npm update-webdriver` : install the drivers needed by Protractor

### Running Development Web Server

While Angular applications are purely client-side code, and it is possible to open them in a web

browser directly from the file system, it is better to server them from a HTTP web server. In

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:

This will create a local webserver that is listening to port 8000 on your local machine.

You can now browse to the application at:

### Running Unit Tests

We use unit tests to ensure that the JavaScript code in our application is operating correctly.

Unit tests focus on testing small isolated parts of the application. The unit tests are kept in the

`test/unit` directory.

The angular-phonecat project is configured to use [Karma][karma] to run the unit tests for the

application. Start Karma by running:

This will start the Karma unit test runner. Karma will read the configuration file at

`test/karma.conf.js`. This configuration file tells Karma to:

- open up a Chrome browser and connect it to Karma

- execute all the unit tests in this browser

- 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

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.

### Running End to End Tests

We use End to End tests to ensure that the application as a whole operates as expected.

End to End 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.

The End to End tests are kept in the `test/e2e` directory.

The angular-phonecat project is configured to use [Protractor][protractor] to run the End to End

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:

npm run update-webdriver

*(You should only need to do this once.)*

Since Protractor works by interacting with a running application, we need to start our web server:

```

npm start

```

Then in a separate terminal/command line window, we can run the Protractor test scripts against the

application by running:

```

npm run protractor

```

- open up a Chrome browser and connect it to the application

- execute all the End to End tests in this browser

- report the results of these tests in the terminal/command line window

- close down the browser and exit

It is good to run the end to end 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 End to End tests

before pushing a new commit of changes to a remote repository.

[git]: http://git-scm.com/

[angular-phonecat]: https://github.com/angular/angular-phonecat