Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit e145a8d

Browse files
petebacondarwinpetebacondarwin
committed
docs(tutorial): update to match changes to phonecat
1 parent b49d0cc commit e145a8d

File tree

1 file changed

+143
-84
lines changed

1 file changed

+143
-84
lines changed

‎docs/content/tutorial/index.ngdoc

Lines changed: 143 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@step -1
44
@description
55

6+
# PhoneCat Tutorial App
67

78
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
89
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
@@ -12,8 +13,8 @@ details for any device.
1213
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413" alt="demo
1314
application running in the browser">
1415

15-
Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
16-
or plug-ins. As you work through the tutorial, you will:
16+
Work through the tutorial to see how Angular makes browsers smarter — without the use of native
17+
extensions or plug-ins. As you work through the tutorial, you will:
1718

1819
* See examples of how to use client-side data binding and dependency injection to build dynamic
1920
views of data that change immediately in response to user actions.
@@ -22,15 +23,13 @@ views of data that change immediately in response to user actions.
2223
* Learn how to use Angular services to make common web tasks, such as getting data into your app,
2324
easier.
2425

25-
And all of this works in any browser without modification to the browser!
26-
2726
When you finish the tutorial you will be able to:
2827

29-
* Create a dynamic application that works in any browser.
28+
* Create a dynamic application that works in all modern browsers.
3029
* Define the differences between Angular and common JavaScript frameworks.
3130
* Understand how data binding works in AngularJS.
32-
* Use the angular-seed project to quickly boot-strap your own projects.
33-
* Create and run tests.
31+
* Create and run unit tests.
32+
* Create and run end to end tests.
3433
* Identify resources for learning more about AngularJS.
3534

3635
The tutorial guides you through the entire process of building a simple application, including
@@ -43,86 +42,146 @@ really digging into it. If you're looking for a shorter introduction to AngularJ
4342

4443

4544

45+
# Working with the code
4646

47+
You can follow along with this tutorial and hack on the code in either the Mac/Linux or the Windows
48+
environment. The tutorial relies on the use of the [Git][git] versioning system for source code
49+
management.
4750

51+
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
52+
and follow the instructions for setting up your computer.
4853

4954

50-
# Working with the code
55+
## Install Git
56+
57+
You'll need Git, which you can get from [the Git site][git].
58+
59+
Clone the [angular-phonecat repository][angular-phonecat] located at GitHub by running the following
60+
command:
61+
62+
```
63+
git clone https://github.com/angular/angular-phonecat.git
64+
```
65+
66+
This command creates the `angular-phonecat` directory in your current directory.
67+
68+
Change your current directory to `angular-phonecat`.
69+
70+
```
71+
cd angular-phonecat
72+
```
73+
74+
The tutorial instructions, from now on, assume you are running all commands from the
75+
`angular-phonecat` directory.
76+
77+
78+
## Install Node.js
79+
80+
If you want to run the built-in web-server and the test tools then you will also need
81+
Node.js v0.10, or later.
82+
83+
You can download Node.js from the [node.js website][node].
84+
85+
86+
You can check the version of Node.js that you have installed by running the following command:
87+
88+
```
89+
node --version
90+
```
91+
92+
<div class="alert alert-info"><strong>Helpful note:<strong> If you need to run a different versions of node.js
93+
in your local environment, consider installing
94+
<a href="https://github.com/creationix/nvm" title="Node Version Manager Github Repo link">
95+
Node Version Manager (nvm)
96+
</a>.
97+
</div>
98+
99+
Once you have Node.js installed you can install the tool dependencies by running:
100+
101+
```
102+
npm install
103+
```
104+
105+
This command will download the following tools, into the `node_modules` directive:
106+
107+
- [Bower][bower] - client-side code package manager
108+
- [http-server][http-server] - simple local static web server
109+
- [Karma][karma] - unit test runner
110+
- [protractor][protractor] - end 2 end test runner
111+
112+
Running `npm install` will also automatically run `bower install`, which will download the Angular
113+
framework into the `bower_components` directory.
114+
115+
The project is preconfigured with a number of npm helper scripts to make it easy to run the common
116+
tasks that you will need while developing.
117+
118+
## Running Development Web Server
119+
120+
The project is preconfigured to provide a simple static web server for hosting the application.
121+
Start the web server by running:
122+
123+
```
124+
npm start
125+
```
126+
127+
Now you can browse to the application at:
128+
129+
```
130+
http://localhost:8000/app/index.html
131+
```
132+
133+
## Running Unit Tests
134+
135+
The project is preconfigured to use [Karma][karma] to run the unit tests for the application. Start
136+
Karma by running:
137+
138+
```
139+
npm test
140+
```
141+
142+
This will start the Karma unit test runner, open up a Chrome browser and execute all the unit tests
143+
in this browser. Karma will then sit and watch all the source and test JavaScript files.
144+
Whenever one of these files changes Karma re-runs all the unit tests.
145+
146+
It is good to leave this running all the time as you will get immediate feedback from Karma as you
147+
are working on the code.
148+
149+
150+
## Running End to End Tests
151+
152+
The project is preconfigured to use [Protractor][protractor] to run the end to end tests for the
153+
application. Execute the Protractor test scripts against your application by running:
154+
155+
```
156+
npm run protractor
157+
```
158+
159+
This will start the Protractor end to end test runner, open up a Chrome browser and execute all the
160+
end to end test scripts in this browser. Once the test scripts finish, the browser will close down
161+
and Protractor will exit.
162+
163+
It is good to run the end to end tests whenever you make changes to the HTML views or want to check
164+
that the application as a whole is executing correctly.
165+
166+
<div class="alert alert-info"><strong>Helpful note:</strong> Protractor requires that a web server is running
167+
and serving up the application at the default URL: `http://localhost:8000/app/index.html`. You can
168+
start the provided development server by running `npm start`.
169+
</div>
170+
171+
172+
# Get Started
173+
174+
Now your environment is ready, it is time to get started developing the Angular PhoneCat
175+
application.
176+
177+
<a href="tutorial/step_00" title="Next Step"><span class="btn btn-primary">Step 0 - Bootstrapping</span></a>
178+
51179

52-
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
53-
environment. The tutorial relies on the use of Git versioning system for source code management.
54-
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
55-
and follow the instructions for setting up your computer.
56180

57-
<div class="tabbable" show="true">
58-
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
59-
<ol>
60-
<li><p>You'll need Git, which you can get from
61-
<a href="http://git-scm.com/download" title="Git site download">the Git site</a>.</p></li>
62-
<li><p>Clone the angular-phonecat repository located at
63-
<a href="https://github.com/angular/angular-phonecat" title="Github Phonecat Repo">Github</a> by
64-
running the following command:</p>
65-
<pre>git clone https://github.com/angular/angular-phonecat.git</pre>
66-
<p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
67-
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
68-
<pre>cd angular-phonecat</pre>
69-
<p>The tutorial instructions, from now on, assume you are running all commands from the
70-
<code>angular-phonecat</code> directory.</p></li>
71-
<li><p>You will also need Node.js and Karma to run unit tests, so please verify that you have
72-
<a href="http://nodejs.org/" title="NodeJS org">Node.js</a> v0.10 or better installed
73-
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
74-
command in a terminal window:</p></li>
75-
<pre>node --version</pre>
76-
<div class="alert alert-info">**Helpful note:** If you need to run a different version of
77-
node.js in your local environment, consider installing
78-
<a href="https://github.com/creationix/nvm" title="Node Version Manager Github Repo link">
79-
Node Version Manager (nvm)</a>.</div>
80-
<p>Additionally install <a href="http://karma-runner.github.io/" title="Karma site">Karma</a> and
81-
its plugins if you don't have it already:</p>
82-
<pre>
83-
npm install
84-
</pre></li>
85-
<li><p>You will need an http server running on your system. Mac and Linux machines typically
86-
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
87-
to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
88-
</ol>
89-
</div>
90-
91-
<div class="tab-pane well" id="git-win" title="Git on Windows">
92-
<ol>
93-
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
94-
<a href="http://nodejs.org/" title="NodeJS site">Node.js</a> v0.10 or better installed
95-
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
96-
command in a terminal window:</p>
97-
<pre>node --version</pre>
98-
<div class="alert alert-info">**Helpful note:** If you need to run a different version of
99-
node.js in your local environment, consider installing
100-
<a href="https://github.com/creationix/nvm" title="Node Version Manager Github Repo link">
101-
Node Version Manager (nvm)</a>.</div>
102-
<p>Additionally install <a href="http://karma-runner.github.io/" title="Karma site">Karma</a>
103-
if you don't have it already:</p>
104-
<pre>npm install -g karma</pre>
105-
</li>
106-
<li><p>You'll also need Git, which you can get from
107-
<a href="http://git-scm.com/download" title="Git site download">the Git site</a>.</p></li>
108-
<li><p>Clone the angular-phonecat repository located at <a
109-
href="https://github.com/angular/angular-phonecat" "Github Angular-phonecat Repo">Github</a> by running
110-
the following command:</p><pre>git clone https://github.com/angular/angular-phonecat.git</pre>
111-
<p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
112-
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
113-
<pre>cd angular-phonecat</pre>
114-
<p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
115-
directory.</p>
116-
<p>You should run all <code>git</code> commands from Git bash.</p>
117-
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be executed from the
118-
Windows command line.</li>
119-
<li><p>You need an http server running on your system, but if you don't already have one already
120-
installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple bundled
121-
http server.</p></li>
122-
</ol>
123-
</div>
124-
125-
The last thing to do is to make sure your computer has a web browser and a good text editor installed. Now,
126-
let's get some cool stuff done!
127-
128-
<a href="tutorial/step_00" title="Next Step"><span class="btn btn-primary">Get Started!</span></a>
181+
[git]: http://git-scm.com/download
182+
[angular-phonecat]: https://github.com/angular/angular-phonecat
183+
[node]: http://nodejs.org/
184+
[protractor]: https://github.com/angular/protractor
185+
[bower]: http://bower.io/
186+
[http-server]: https://github.com/nodeapps/http-server
187+
[karma]: https://github.com/karma-runner/karma

0 commit comments

Comments
 (0)