diff options
Diffstat (limited to 'docs/content/tutorial/step_00.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_00.ngdoc | 216 |
1 files changed, 0 insertions, 216 deletions
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc deleted file mode 100644 index b7f469ff..00000000 --- a/docs/content/tutorial/step_00.ngdoc +++ /dev/null @@ -1,216 +0,0 @@ -@ngdoc overview -@name Tutorial: 0 - angular-seed -@description - -<ul doc:tutorial-nav="0"></ul> - - -You are now ready to build the Angular phonecat application. In this step, you will become familiar -with the most important source code files, learn how to start the development servers bundled with -angular-seed, and run the application in the browser. - - -<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 the 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 the 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. - -The static HTML page that displays "Nothing here yet!" was constructed with the HTML code shown -below. The code contains some key Angular elements that we will need going forward. - -__`app/index.html`:__ -<pre> -<!doctype html> -<html xmlns:ng="http://angularjs.org/" ng:app> -<head> - <meta charset="utf-8"> - <title>my angular app</title> - <link rel="stylesheet" href="css/app.css"/> -</head> -<body> - - Nothing here yet! - - <script src="lib/angular/angular.js"></script> -</body> -</html> -</pre> - - - -## What is the code doing? - -* xmlns declaration - - <html xmlns:ng="http://angularjs.org" ng:app> - - This `xmlns` declaration for the `ng` namespace must be specified in all Angular applications in -order to make Angular work with XHTML and IE versions older than 9 (regardless of whether you are -using XHTML or HTML). - -* Angular script tag - - <script src="lib/angular/angular.js"> - - This single line of code is all that is needed to bootstrap an angular application. - - 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 api/angular.directive.ng:app ng:app} attribute. If Angular finds -`ng:app`, it creates a root scope for the application and associates it with the element of -when `ng:app` was declared. - - <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 -about this in the next steps. - - -## What are all these files in my working directory? - -Most of the files in your working directory come from the {@link -https://github.com/angular/angular-seed angular-seed project} which is typically used to bootstrap -new Angular projects. The seed project includes the latest Angular libraries, test libraries, -scripts and a simple example app, all pre-configured for developing a typical web app. - -For the purposes of this tutorial, we modified the angular-seed with the following changes: - -* Removed the example app -* Added phone images to `app/img/phones` -* Added phone data files (JSON) to `app/phones` - - -# Summary - -Now let's go to {@link step_01 step 1} and add some content to the web app. - - -<ul doc:tutorial-nav="0"></ul> |