kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-05-12 11:21:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

new batch of tutorial docs

Browse Source
This commit is contained in:
Igor Minar
2011-05-02 10:16:50 -07:00
parent 11e9572b95
commit 6181ca600d
13 changed files with 1900 additions and 1588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
docs/content/tutorial/step_00.ngdoc
View File

@@ -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>