kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-05-02 06:34:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

new batch of docs

Browse Source
This commit is contained in:
Igor Minar
2011-06-06 08:50:35 -07:00
parent 5533e48dea
commit 7f1e2e4846
76 changed files with 5363 additions and 931 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
docs/content/tutorial/step_00.ngdoc
View File

@@ -1,17 +1,11 @@
@ngdoc overview
@name Tutorial: Step 0
@name Tutorial: 0 - angular-seed
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-0/app Live Demo}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">Code Diff</td>
<td id="next_step">{@link tutorial.step_01 Next}</td>
</tr>
</table>
<ul doc:tutorial-nav="0"></ul>
You are now ready to build the phone cat application. In this step, you will become familiar with
@@ -19,40 +13,146 @@ the most important source code files, learn how to start the development servers
angular-seed, and run the application in the browser.
1. Do one of the following:
* Git users: In the `angular-phonecat` directory, run this command:
<doc:tutorial-instructions show="true">
<doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
<ol>
<li><p>In angular-phonecat directory, run this command:</p>
<pre><code>git checkout -f step-0</code></pre>
<p>This resets your workspace to Step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
git checkout -f step-0
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
<li>In a <i>separate</i> terminal tab or window, run
<code>./scripts/web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
<li>Configure the server to serve the files in the <code>angular-phonecat</code>
directory.</li>
<li>Navigate in your browser to
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
</ol>
</li>
</ul>
</li>
</ol>
</doc:tutorial-instruction>
* Snapshot users: In the `[tutorial-dir]/sandbox` directory, run this command:
./goto_step.sh 0
<doc:tutorial-instruction id="git-win" title="Git on Windows">
<ol>
<li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
<pre><code>git checkout -f step-0</code></pre>
<p>This resets your workspace to Step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
<li>In a <i>separate</i> terminal tab or window, run <code>node
scripts\web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
<li>Configure the server to serve the files in the <code>angular-phonecat</code>
directory.</li>
<li>Navigate in your browser to
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
</ol>
</li>
</ul>
</li>
</ol>
</doc:tutorial-instruction>
This resets your workspace to Step 0 of the tutorial app.
You must repeat this for every future step in the tutorial and change the number to the number of
the step you are on. Either command will cause any changes you made within your working directory
to be lost.
<doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
<ol>
<li><p>In angular-phonecat directory, run this command:</p>
<pre><code>./goto_step.sh 0</code></pre>
<p>This resets your workspace to Step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
<li>In a <i>separate</i> terminal tab or window, run
<code>./scripts/web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
<li>Configure the server to serve the files in the angular-phonecat
<code>sandbox</code> directory.</li>
<li>Navigate in your browser to
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
</ol>
</li>
</ul>
</li>
</ol>
</doc:tutorial-instruction>
2. To see the app running in a browser, do one of the following:
* __For node.js users:__
1. In a _separate_ terminal tab or window, run `./scripts/web-server.js` to start the app
server.
2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html.
* __For other http servers:__
1. Configure the server to serve the files in the `angular-phonecat` directory.
2. Navigate in your browser to
http://localhost:[*port-number*]/[*context-path*]/app/index.html.
<doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
<ol>
<li><p>Open windows command line and run this command (in angular-phonecat directory):</p>
<pre><code>goto_step.bat 0</code></pre>
<p>This resets your workspace to Step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
<li>In a <i>separate</i> terminal tab or window, run <code>node
scripts\web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
<li>Configure the server to serve the files in the angular-phonecat
<code>sandbox</code> directory.</li>
<li>Navigate in your browser to
<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
</ol>
</li>
</ul>
</li>
</ol>
</doc:tutorial-instruction>
</doc:tutorial-instructions>
You can now see the page in your browser. It's not very exciting, but that's OK.
@@ -93,7 +193,7 @@ __`app/index.html`:__
* xmlns declaration
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org">
This `xmlns` declaration for the `ng` namespace must be specified in all angular applications in
@@ -104,7 +204,7 @@ using XHTML or HTML).
* angular script tag
<script src="lib/angular/angular.js" ng:autobind>
<script src="lib/angular/angular.js" ng:autobind>
This single line of code is all that is needed to bootstrap an angular application.
@@ -112,12 +212,12 @@ using XHTML or HTML).
The code downloads the `angular.js` script and registers a callback that will be executed by the
browser when the containing HTML page is fully downloaded. When the callback is executed, angular
looks for the {@link angular.directive.ng:autobind ng:autobind} attribute. If angular finds
looks for the {@link api/angular.directive.ng:autobind ng:autobind} attribute. If angular finds
`ng:autobind`, it creates a root scope for the application and associates it with the `<html>`
element of the template:
<img src="img/tutorial/tutorial_00_final.png"/>
<img src="img/tutorial/tutorial_00_final.png"/>
As you will see shortly, everything in angular is evaluated within a scope. We'll learn more
@@ -151,12 +251,6 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
Now let's go to step 1 and add some content to the web app.
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial Previous}</td>
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-0/app Live Demo}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">Code Diff</td>
<td id="next_step">{@link tutorial.step_01 Next}</td>
</tr>
</table>
<ul doc:tutorial-nav="0"></ul>