aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_00.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2012-03-30 14:02:26 -0700
committerIgor Minar2012-04-04 15:59:18 -0700
commit6336b6e89e3a80aec3c4367ab4c2737fd365c030 (patch)
tree31aa86a0555b541d1f6cc107845278ae80ddbff9 /docs/content/tutorial/step_00.ngdoc
parentfdf17d729fa7651e88dc5f27c40b8de875a34a55 (diff)
downloadangular.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.ngdoc216
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>