diff options
| author | Igor Minar | 2011-05-02 10:16:50 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:28:38 -0700 |
| commit | 6181ca600d3deced0a054551ff6c704bc17d6b7d (patch) | |
| tree | bd67f96eea18164c751a08c74d6124cddcc9d890 /docs/content/tutorial/step_00.ngdoc | |
| parent | 11e9572b952e49b01035e956c412d6095533031a (diff) | |
| download | angular.js-6181ca600d3deced0a054551ff6c704bc17d6b7d.tar.bz2 | |
new batch of tutorial docs
Diffstat (limited to 'docs/content/tutorial/step_00.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_00.ngdoc | 167 |
1 files changed, 90 insertions, 77 deletions
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index e506fcaf..a6dc1ca9 100755 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -1,77 +1,90 @@ -@workInProgress
-@ngdoc overview
-@name Tutorial: Step 0
-@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 Example}</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>
-
-The following sample code is our starting point. It is a static HTML page that displays next to
-nothing, but it has everything we need to proceed. You can think of this bit of code as our
-prototype template, consisting of basic HTML tags with a pair of angular specific attributes.
-
-__`app/index.html`:__
-<pre>
-<!doctype html>
-<html xmlns:ng="http://angularjs.org/">
-<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" ng:autobind></script>
-</body>
-</html>
-</pre>
-
-## Discussion:
-
-Although our app doesn't appear to do anything dynamic, note the following:
-
-* __... `xmlns:ng="http://angularjs.org"` ...__ This `xmlns` declaration for the `ng` namespace
-must be specified if you use XHTML, or if you are targeting IE older than 9 (regardless of whether
-you are using XHTML or HTML).
-
-* __`<script src="lib/angular/angular.js"` ...__ This 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 `ng:autobind` is found, it signals
-angular to bootstrap and compile and manage the whole html page.
-
- Note: If you elected not to download any tutorial files but still want to try out some angular
- code on your system, you can change the relative path to the `angular.js` script in your
- template from `./lib/angular/angular.js` to the following:
-
- <script src="http://code.angularjs.org/angular-0.9.14.js" ng:autobind></script>
-
- This will download the angular script from the angular server instead of from a local file.
-
-* To try this code out in your browser, you need to navigate to the step-0 page (you are currently
-on Step 0 of the tutorial). If your http server is running, navigate to `app/index.html`.
-Remember, this is a relative URL (see the Relative URL section in {@link tutorial Tutorial}). The
-browser will display the same thing as you would see if you go to
-http://angular.github.com/angular-phonecat/step-0/app (accessible from Example link at the bottom
-of the page).
-
-Now we can move on and add some content to our developing 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 Example}</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>
+@ngdoc overview +@name Tutorial: Step 0 +@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_0 Next}</td> +</tr> +</table> + +You are now ready to build the phone cat application. In this step, you will become familiar with +the most important source code files, learn how to start the web services, 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 step-0 + + * Snapshot users: In the `[install directory]/sandbox` directory, run this command: + + ./goto_step.sh 0 + +This resets your workspace to Step 0 of the tutorial app. + +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. Run `./scripts/web-server.js` to start the app server. + 3. Navigate in your browser to + http://localhost:[*port-number*]/[*context-path*]/app/index.html. + +You can now see the app in the browser. It's not very exciting, but that's OK. + +The code that created this app is shown below. You will see that it creates a static HTML page +that displays "Nothing here yet!"; the code does, however, have everything we need to proceed. +This bit of code serves as a prototype template, consisting of basic HTML tags with a pair of +angular-specific attributes. + +__`app/index.html`:__ +<pre> +<!doctype html> +<html xmlns:ng="http://angularjs.org/"> +<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" ng:autobind></script> +</body> +</html> +</pre> + +## What is the code doing? + +* __... `xmlns:ng="http://angularjs.org"` ...__ This `xmlns` declaration for the `ng` namespace +must be specified in all angular applications if you use XHTML, or if you are targeting IE +versions older than 9 (regardless of whether you are using XHTML or HTML). + +* __`<script src="lib/angular/angular.js"` ...__ This 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 `ng:autobind` is found, it signals +angular to bootstrap and compile and manage the whole html page. + +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> |