diff options
| author | Igor Minar | 2012-03-30 14:02:26 -0700 | 
|---|---|---|
| committer | Igor Minar | 2012-04-04 15:59:18 -0700 | 
| commit | 6336b6e89e3a80aec3c4367ab4c2737fd365c030 (patch) | |
| tree | 31aa86a0555b541d1f6cc107845278ae80ddbff9 /docs/content/tutorial/step_00.ngdoc | |
| parent | fdf17d729fa7651e88dc5f27c40b8de875a34a55 (diff) | |
| download | angular.js-6336b6e89e3a80aec3c4367ab4c2737fd365c030.tar.bz2 | |
chore(docs): restore old tutorial ngdoc files
Diffstat (limited to 'docs/content/tutorial/step_00.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_00.ngdoc | 216 | 
1 files changed, 216 insertions, 0 deletions
| diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc new file mode 100644 index 00000000..b7f469ff --- /dev/null +++ b/docs/content/tutorial/step_00.ngdoc @@ -0,0 +1,216 @@ +@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> | 
