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

Commit 6336b6e

Browse files
IgorMinarIgorMinar
committed
chore(docs): restore old tutorial ngdoc files
1 parent fdf17d7 commit 6336b6e

14 files changed

+2212
-0
lines changed

‎docs/content/tutorial/index.ngdoc

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@ngdoc overview
2+
@name Tutorial
3+
@description
4+
5+
A great way to get introduced to Angular is to work through this tutorial, which walks you through
6+
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
7+
of Android devices, lets you filter the list to see only devices that interest you, and then view
8+
details for any device.
9+
10+
<img src="img/tutorial/catalog_screen.png">
11+
12+
Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
13+
or plug-ins. As you work through the tutorial, you will:
14+
15+
* See examples of how to use client-side data binding and dependency injection to build dynamic
16+
views of data that change immediately in response to user actions.
17+
* See how Angular creates listeners on your data without the need for DOM manipulation.
18+
* Learn a better, easier way to test your web apps.
19+
* Learn how to use Angular services to make common web tasks, such as getting data into your app,
20+
easier.
21+
22+
And all of this works in any browser without modification to the browser!
23+
24+
When you finish the tutorial you will be able to:
25+
26+
* Create a dynamic application that works in any browser.
27+
* Define the differences between Angular and common JavaScript frameworks.
28+
* Understand how data binding works in AngularJS.
29+
* Use the angular-seed project to quickly boot-strap your own projects.
30+
* Create and run tests.
31+
* Identify resources for learning more about AngularJS.
32+
33+
The tutorial guides you through the entire process of building a simple application, including
34+
writing and running unit and end-to-end tests. Experiments at the end of each step provide
35+
suggestions for you learn more about AngularJS and the application you are building.
36+
37+
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
38+
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
39+
{@link misc/started Getting Started} document.
40+
41+
42+
43+
44+
45+
46+
47+
# Working with the code
48+
49+
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
50+
environment. Options for working with the tutorial are to use the Git versioning system for source
51+
code management or to use scripts that copy snapshots of project files into your workspace
52+
(`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your
53+
computer for your preferred option.
54+
55+
<doc:tutorial-instructions show="true">
56+
<doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
57+
<ol>
58+
<li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
59+
following command in a terminal window:</p>
60+
<pre><code>java -version</code></pre>
61+
<p>You will need Java to run unit tests.</p></li>
62+
<li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p>
63+
<p>You can build Git from source or use the pre-compiled package.</p></li>
64+
<li><p>Clone the angular-phonecat repository located at <a
65+
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
66+
<pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
67+
<p>This command creates the <code>angular-phonecat</code> directory in your current
68+
directory.</p></li>
69+
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
70+
<pre><code>cd angular-phonecat</code></pre>
71+
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
72+
directory.</p></li>
73+
<li><p>You will need an http server running on your system. Mac and Linux machines typically
74+
have Apache pre-installed, but If you don't already have one installed, you can <a
75+
href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">install
76+
node.js</a>. Use <code>node</code> to run <code>scripts/web-server.js</code>, a simple bundled
77+
http server.</p></li>
78+
</ol>
79+
</doc:tutorial-instruction>
80+
81+
<doc:tutorial-instruction id="git-win" title="Git on Windows">
82+
<ol>
83+
<li><p>You will need Java to run unit tests, so run the following command to verify that you
84+
have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on
85+
your <code>PATH</code>.</p>
86+
<pre><code>java -version</code></pre>
87+
<p></p></li>
88+
<li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li>
89+
<li><p>Open msysGit bash and clone the angular-phonecat repository located at <a
90+
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
91+
<pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
92+
<p>This command creates the angular-phonecat directory in your current directory.</p></li>
93+
<li><p>Change your current directory to angular-phonecat.</p>
94+
<pre><code>cd angular-phonecat</code></pre>
95+
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
96+
directory.</p>
97+
<p>You should run all <code>git</code> commands from msysGit bash.</p>
98+
<p>Other commands like <code>test-server.bat</code> or <code>test.bat</code> should be
99+
executed from the Windows command line.</li>
100+
<li><p>You need an http server running on your system. If you don't already have one
101+
installed, you can install <a href="http://nodejs.org/">node.js</a>. Download the <a
102+
href="http://node-js.prcn.co.cc/">pre-compiled binaries</a>, unzip them, and then add
103+
<code>nodejs\bin</code> into your <code>PATH</code>. Use <code>node</code> to run
104+
<code>scripts\web-server.js</code>, a simple, bundled http server.</p></li>
105+
</ol>
106+
</doc:tutorial-instruction>
107+
108+
<doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
109+
<ol>
110+
<li><p>You need Java to run unit tests, so verify that you have <a
111+
href="http://java.com/">Java</a> installed by running the following command in a terminal
112+
window:</p>
113+
<pre><code>java -version</code></pre>
114+
<li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
115+
containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li>
116+
<li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
117+
<pre><code>cd [tutorial-dir]/sandbox</code></pre>
118+
<p>The tutorial instructions assume you are running all commands from your
119+
<code>sandbox</code> directory.</p></li>
120+
<li><p>You need an http server running on your system and Mac and Linux machines typically
121+
have Apache pre-installed. If you don't have an http server installed, you can <a
122+
href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">install
123+
node.js</a> and use it to run <code>scripts/web-server.js</code>, a simple bundled http
124+
server.</p></li>
125+
</ol>
126+
</doc:tutorial-instruction>
127+
128+
<doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
129+
<ol>
130+
<li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
131+
<code>java</code> executable is on your <code>PATH</code> by running the following command in the
132+
Windows command line:</p>
133+
<pre><code>java -version</code></pre>
134+
<p>You need Java to run unit tests, so download the <a
135+
href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files
136+
and unzip the files into the [tutorial-dir] directory</p></li>
137+
<li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
138+
<pre><code>cd [tutorial-dir]/sandbox</code></pre>
139+
<p>The tutorial instructions assume you are running all commands from this directory.</p></li>
140+
<li><p>You need an http server running on your system, but if you don't already have one
141+
already installed, you can install <a href="http://nodejs.org/">node.js</a>. Download the <a
142+
href="http://node-js.prcn.co.cc/">pre-compiled binaries</a>, unzip them, and then add
143+
<code>nodejs\bin</code> into your <code>PATH</code>. Use <code>node</code> to run
144+
<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
145+
</ol>
146+
</doc:tutorial-instruction>
147+
</doc:tutorial-instructions>
148+
149+
The last thing to do is to make sure your computer has a web browser and a good text editor
150+
installed. Now, let's get going with {@link step_00 step 0}.

‎docs/content/tutorial/step_00.ngdoc

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
@ngdoc overview
2+
@name Tutorial: 0 - angular-seed
3+
@description
4+
5+
<ul doc:tutorial-nav="0"></ul>
6+
7+
8+
You are now ready to build the Angular phonecat application. In this step, you will become familiar
9+
with the most important source code files, learn how to start the development servers bundled with
10+
angular-seed, and run the application in the browser.
11+
12+
13+
<doc:tutorial-instructions show="true">
14+
<doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
15+
<ol>
16+
<li><p>In angular-phonecat directory, run this command:</p>
17+
<pre><code>git checkout -f step-0</code></pre>
18+
<p>This resets your workspace to step 0 of the tutorial app.</p>
19+
<p>You must repeat this for every future step in the tutorial and change the number to
20+
the number of the step you are on. This will cause any changes you made within
21+
your working directory to be lost.</p></li>
22+
23+
<li>To see the app running in a browser, do one of the following:
24+
<ul>
25+
<li><b>For node.js users:</b>
26+
<ol>
27+
<li>In a <i>separate</i> terminal tab or window, run
28+
<code>./scripts/web-server.js</code> to start the web server.</li>
29+
<li>Open a browser window for the app and navigate to <a
30+
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
31+
</ol>
32+
</li>
33+
<li><b>For other http servers:</b>
34+
<ol>
35+
<li>Configure the server to serve the files in the <code>angular-phonecat</code>
36+
directory.</li>
37+
<li>Navigate in your browser to
38+
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
39+
</ol>
40+
</li>
41+
</ul>
42+
</li>
43+
</ol>
44+
</doc:tutorial-instruction>
45+
46+
47+
<doc:tutorial-instruction id="git-win" title="Git on Windows">
48+
<ol>
49+
<li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
50+
<pre><code>git checkout -f step-0</code></pre>
51+
<p>This resets your workspace to step 0 of the tutorial app.</p>
52+
<p>You must repeat this for every future step in the tutorial and change the number to
53+
the number of the step you are on. This will cause any changes you made within
54+
your working directory to be lost.</p></li>
55+
<li>To see the app running in a browser, do one of the following:
56+
<ul>
57+
<li><b>For node.js users:</b>
58+
<ol>
59+
<li>In a <i>separate</i> terminal tab or window, run <code>node
60+
scripts\web-server.js</code> to start the web server.</li>
61+
<li>Open a browser window for the app and navigate to <a
62+
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
63+
</ol>
64+
</li>
65+
<li><b>For other http servers:</b>
66+
<ol>
67+
<li>Configure the server to serve the files in the <code>angular-phonecat</code>
68+
directory.</li>
69+
<li>Navigate in your browser to
70+
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
71+
</ol>
72+
</li>
73+
</ul>
74+
</li>
75+
</ol>
76+
</doc:tutorial-instruction>
77+
78+
79+
<doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
80+
<ol>
81+
<li><p>In the angular-phonecat directory, run this command:</p>
82+
<pre><code>./goto_step.sh 0</code></pre>
83+
<p>This resets your workspace to step 0 of the tutorial app.</p>
84+
<p>You must repeat this for every future step in the tutorial and change the number to
85+
the number of the step you are on. This will cause any changes you made within
86+
your working directory to be lost.</p></li>
87+
<li>To see the app running in a browser, do one of the following:
88+
<ul>
89+
<li><b>For node.js users:</b>
90+
<ol>
91+
<li>In a <i>separate</i> terminal tab or window, run
92+
<code>./scripts/web-server.js</code> to start the web server.</li>
93+
<li>Open a browser window for the app and navigate to <a
94+
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
95+
</ol>
96+
</li>
97+
<li><b>For other http servers:</b>
98+
<ol>
99+
<li>Configure the server to serve the files in the angular-phonecat
100+
<code>sandbox</code> directory.</li>
101+
<li>Navigate in your browser to
102+
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
103+
</ol>
104+
</li>
105+
</ul>
106+
</li>
107+
</ol>
108+
</doc:tutorial-instruction>
109+
110+
111+
<doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
112+
<ol>
113+
<li><p>Open windows command line and run this command (in the angular-phonecat directory):</p>
114+
<pre><code>goto_step.bat 0</code></pre>
115+
<p>This resets your workspace to step 0 of the tutorial app.</p>
116+
<p>You must repeat this for every future step in the tutorial and change the number to
117+
the number of the step you are on. This will cause any changes you made within
118+
your working directory to be lost.</p></li>
119+
<li>To see the app running in a browser, do one of the following:
120+
<ul>
121+
<li><b>For node.js users:</b>
122+
<ol>
123+
<li>In a <i>separate</i> terminal tab or window, run <code>node
124+
scripts\web-server.js</code> to start the web server.</li>
125+
<li>Open a browser window for the app and navigate to <a
126+
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
127+
</ol>
128+
</li>
129+
<li><b>For other http servers:</b>
130+
<ol>
131+
<li>Configure the server to serve the files in the angular-phonecat
132+
<code>sandbox</code> directory.</li>
133+
<li>Navigate in your browser to
134+
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
135+
</ol>
136+
</li>
137+
</ul>
138+
</li>
139+
</ol>
140+
</doc:tutorial-instruction>
141+
</doc:tutorial-instructions>
142+
143+
144+
You can now see the page in your browser. It's not very exciting, but that's OK.
145+
146+
The static HTML page that displays "Nothing here yet!" was constructed with the HTML code shown
147+
below. The code contains some key Angular elements that we will need going forward.
148+
149+
__`app/index.html`:__
150+
<pre>
151+
<!doctype html>
152+
<html xmlns:ng="http://angularjs.org/" ng:app>
153+
<head>
154+
<meta charset="utf-8">
155+
<title>my angular app</title>
156+
<link rel="stylesheet" href="css/app.css"/>
157+
</head>
158+
<body>
159+
160+
Nothing here yet!
161+
162+
<script src="lib/angular/angular.js"></script>
163+
</body>
164+
</html>
165+
</pre>
166+
167+
168+
169+
## What is the code doing?
170+
171+
* xmlns declaration
172+
173+
<html xmlns:ng="http://angularjs.org" ng:app>
174+
175+
This `xmlns` declaration for the `ng` namespace must be specified in all Angular applications in
176+
order to make Angular work with XHTML and IE versions older than 9 (regardless of whether you are
177+
using XHTML or HTML).
178+
179+
* Angular script tag
180+
181+
<script src="lib/angular/angular.js">
182+
183+
This single line of code is all that is needed to bootstrap an angular application.
184+
185+
The code downloads the `angular.js` script and registers a callback that will be executed by the
186+
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
187+
looks for the {@link api/angular.directive.ng:app ng:app} attribute. If Angular finds
188+
`ng:app`, it creates a root scope for the application and associates it with the element of
189+
when `ng:app` was declared.
190+
191+
<img src="img/tutorial/tutorial_00_final.png">
192+
193+
As you will see shortly, everything in Angular is evaluated within a scope. We'll learn more
194+
about this in the next steps.
195+
196+
197+
## What are all these files in my working directory?
198+
199+
Most of the files in your working directory come from the {@link
200+
https://github.com/angular/angular-seed angular-seed project} which is typically used to bootstrap
201+
new Angular projects. The seed project includes the latest Angular libraries, test libraries,
202+
scripts and a simple example app, all pre-configured for developing a typical web app.
203+
204+
For the purposes of this tutorial, we modified the angular-seed with the following changes:
205+
206+
* Removed the example app
207+
* Added phone images to `app/img/phones`
208+
* Added phone data files (JSON) to `app/phones`
209+
210+
211+
# Summary
212+
213+
Now let's go to {@link step_01 step 1} and add some content to the web app.
214+
215+
216+
<ul doc:tutorial-nav="0"></ul>

0 commit comments

Comments
 (0)