mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
78 lines
3.1 KiB
Text
Executable file
78 lines
3.1 KiB
Text
Executable file
|
|
@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>
|