diff options
Diffstat (limited to 'docs/content/tutorial/step_00.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_00.ngdoc | 200 |
1 files changed, 147 insertions, 53 deletions
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 36b35004..e97f4038 100755 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -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: - - - git checkout -f step-0 - - - * Snapshot users: In the `[tutorial-dir]/sandbox` directory, run this command: - ./goto_step.sh 0 +<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> + + + <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> + + + + + <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> + + + + + <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> + + + + + <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> - 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. - - -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. 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> |