third_party/angular/docs/partials/tutorial.html

<a href='http://github.com/angular/angular.js/edit/master/docs/content/tutorial/index.ngdoc' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this doc</a>


<h1 id="phonecat-tutorial-app">PhoneCat Tutorial App</h1>
<p>A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
of Android devices, lets you filter the list to see only devices that interest you, and then view
details for any device.</p>
<p><img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413" alt="demo
application running in the browser"></p>
<p>Work through the tutorial to see how Angular makes browsers smarter — without the use of native
extensions or plug-ins. As you work through the tutorial, you will:</p>
<ul>
<li>See examples of how to use client-side data binding and dependency injection to build dynamic
views of data that change immediately in response to user actions.</li>
<li>See how Angular creates listeners on your data without the need for DOM manipulation.</li>
<li>Learn a better, easier way to test your web apps.</li>
<li>Learn how to use Angular services to make common web tasks, such as getting data into your app,
easier.</li>
</ul>
<p>When you finish the tutorial you will be able to:</p>
<ul>
<li>Create a dynamic application that works in all modern browsers.</li>
<li>Define the differences between Angular and common JavaScript frameworks.</li>
<li>Understand how data binding works in AngularJS.</li>
<li>Create and run unit tests.</li>
<li>Create and run end to end tests.</li>
<li>Identify resources for learning more about AngularJS.</li>
</ul>
<p>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.</p>
<p>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&#39;re looking for a shorter introduction to AngularJS, check out the
<a href="misc/started">Getting Started</a> document.</p>
<h1 id="working-with-the-code">Working with the code</h1>
<p>You can follow along with this tutorial and hack on the code in either the Mac/Linux or the Windows
environment. The tutorial relies on the use of the <a href="http://git-scm.com/download">Git</a> versioning system for source code
management.</p>
<p>You don&#39;t need to know anything about Git to follow the tutorial. Select one of the tabs below
and follow the instructions for setting up your computer.</p>
<h2 id="install-git">Install Git</h2>
<p>You&#39;ll need Git, which you can get from <a href="http://git-scm.com/download">the Git site</a>.</p>
<p>Clone the <a href="https://github.com/angular/angular-phonecat">angular-phonecat repository</a> located at GitHub by running the following
command:</p>
<pre><code>git clone https://github.com/angular/angular-phonecat.git</code></pre>
<p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p>
<p>Change your current directory to <code>angular-phonecat</code>.</p>
<pre><code>cd angular-phonecat</code></pre>
<p>The tutorial instructions, from now on, assume you are running all commands from the
<code>angular-phonecat</code> directory.</p>
<h2 id="install-node-js">Install Node.js</h2>
<p>If you want to run the built-in web-server and the test tools then you will also need
Node.js v0.10, or later.</p>
<p>You can download Node.js from the <a href="http://nodejs.org/">node.js website</a>.</p>
<p>You can check the version of Node.js that you have installed by running the following command:</p>
<pre><code>node --version</code></pre>
<div class="alert alert-info"><strong>Helpful note:<strong> If you need to run a different versions of node.js
  in your local environment, consider installing
  <a href="https://github.com/creationix/nvm" title="Node Version Manager Github Repo link">
    Node Version Manager (nvm)
  </a>.
</div>

<p>Once you have Node.js installed you can install the tool dependencies by running:</p>
<pre><code>npm install</code></pre>
<p>This command will download the following tools, into the <code>node_modules</code> directive:</p>
<ul>
<li><a href="http://bower.io/">Bower</a> - client-side code package manager</li>
<li><a href="https://github.com/nodeapps/http-server">http-server</a> - simple local static web server</li>
<li><a href="https://github.com/karma-runner/karma">Karma</a> - unit test runner</li>
<li><a href="https://github.com/angular/protractor">protractor</a> - end 2 end test runner</li>
</ul>
<p>Running <code>npm install</code> will also automatically run <code>bower install</code>, which will download the Angular
framework into the <code>bower_components</code> directory.</p>
<p>The project is preconfigured with a number of npm helper scripts to make it easy to run the common
tasks that you will need while developing.</p>
<h2 id="running-development-web-server">Running Development Web Server</h2>
<p>The project is preconfigured to provide a simple static web server for hosting the application.
Start the web server by running:</p>
<pre><code>npm start</code></pre>
<p>Now you can browse to the application at:</p>
<pre><code>http://localhost:8000/app/index.html</code></pre>
<h2 id="running-unit-tests">Running Unit Tests</h2>
<p>The project is preconfigured to use <a href="https://github.com/karma-runner/karma">Karma</a> to run the unit tests for the application.  Start
Karma by running:</p>
<pre><code>npm test</code></pre>
<p>This will start the Karma unit test runner, open up a Chrome browser and execute all the unit tests
in this browser. Karma will then sit and watch all the source and test JavaScript files.
Whenever one of these files changes Karma re-runs all the unit tests.</p>
<p>It is good to leave this running all the time as you will get immediate feedback from Karma as you
are working on the code.</p>
<h2 id="running-end-to-end-tests">Running End to End Tests</h2>
<p>The project is preconfigured to use <a href="https://github.com/angular/protractor">Protractor</a> to run the end to end tests for the
application. Set up the binaries protractor needs to run by running:</p>
<pre><code>npm run update-webdriver</code></pre>
<p>(You will only need to do this once) Execute the Protractor test scripts against your application
by running:</p>
<pre><code>npm run protractor</code></pre>
<p>This will start the Protractor end to end test runner, open up a Chrome browser and execute all the
end to end test scripts in this browser. Once the test scripts finish, the browser will close down
and Protractor will exit.</p>
<p>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.</p>
<div class="alert alert-info"><strong>Helpful note:</strong> Protractor requires that a web server is running
  and serving up the application at the default URL: <code>http://localhost:8000/app/index.html</code>. You can
  start the provided development server by running <code>npm start</code>.
</div>


<h1 id="get-started">Get Started</h1>
<p>Now your environment is ready, it is time to get started developing the Angular PhoneCat
application.</p>
<p><a href="tutorial/step_00" title="Next Step"><span class="btn btn-primary">Step 0 - Bootstrapping</span></a></p>