1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
@ngdoc overview
@name Tutorial
@description
A great way to get introduced to angular is to work through this tutorial, which walks you through
the construction of an angular 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.
<img src="img/tutorial/catalog_screen.png">
As you work through this tutorial, you will learn how angular makes browsers smarter — without the
use of extensions or plugins.
* You will 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.
* You will see how Angular creates listeners on your data without the need for DOM manipulation.
* You will learn a better, easier way to test your web apps.
* You will learn how to use Angular services to make common web tasks, such as getting data into
your app, easier.
And all of this works in any browser without modifications!
When you finish the tutorial you will be able to:
* Create a dynamic application that works in any browser
* Define the differences between angular and common JavaScript frameworks
* Understand how data binding works in angular
* Use the angular-seed project to quickly boot-strap your own projects
* Create and run tests
* Identify resources for learning more about angular
Mac and Linux users can work through the tutorial, run tests, and experiment with the code using
Git or the snapshots described below. Windows users will be able read the tutorial but won't be
able to run the tests or experiment with the code.
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 angular, check out {@link
http://docs.angularjs.org/#!started started}.
<a name="PreReqs"></a>
# Prerequisites
To run the tutorial app and tests on your machine you will need the following:
* A Mac or Linux machine (required for running the tutorial scripts)
* An http server running on your system. Mac and Linux machines typically have Apache preinstalled.
If you don't already have an http server installed, you can install `node.js` ({@link
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager node.js install guide})
or another http sever.
* {@link http://java.com Java}.
* A web browser.
* A text editor.
# Working with the code
There are two ways that you can you follow this tutorial and hack on the code:
## Using Git
The following instructions are for Git users. If you're not a Git user, skip down to the "Using
Snapshots" section.
1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
2. Clone the angular-phonecat repository located at {@link
https://github.com/angular/angular-phonecat GitHub} by running the following command in a terminal:
git clone git://github.com/angular/angular-phonecat.git
This will create a directory called `angular-phonecat` in the current directory.
3. Change your current directory to `angular-phonecat`.
cd angular-phonecat
The tutorial instructions assume you are running all commands from this directory.
## Using Snapshots
1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
2. {@link http://code.angularjs.org/angular-phonecat-snapshots.zip Download the zip archive} with
all files and unzip them into `[tutorial-dir]` directory.
3. Change directories to `[tutorial-dir]/sandbox`.
cd [tutorial-dir]/sandbox
Let's get going with {@link tutorial/step_00 step 0}.
|
