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_01.ngdoc | |
| parent | fdf17d729fa7651e88dc5f27c40b8de875a34a55 (diff) | |
| download | angular.js-6336b6e89e3a80aec3c4367ab4c2737fd365c030.tar.bz2 | |
chore(docs): restore old tutorial ngdoc files
Diffstat (limited to 'docs/content/tutorial/step_01.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_01.ngdoc | 57 | 
1 files changed, 57 insertions, 0 deletions
| diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc new file mode 100644 index 00000000..fb8eb26e --- /dev/null +++ b/docs/content/tutorial/step_01.ngdoc @@ -0,0 +1,57 @@ +@ngdoc overview +@name Tutorial: 1 - Static Template +@description + +<ul doc:tutorial-nav="1"></ul> + + +In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML +page and then examine how we can turn this HTML code into a template that angular will use to +dynamically display the same result with any set of data. + +In this step you will add some basic information about two cell phones to an HTML page. + + +<doc:tutorial-instructions step="1" show="true"></doc:tutorial-instructions> + + +The page now contains a list with information about two phones. + +The most important changes are listed below. You can see the full diff on {@link +https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}: + +__`app/index.html`:__ +<pre> +... +  <ul> +    <li> +      <span>Nexus S</span> +      <p> +        Fast just got faster with Nexus S. +      </p> +    </li> +    <li> +      <span>Motorola XOOMâ„¢ with Wi-Fi</span> +      <p> +        The Next, Next Generation tablet. +      </p> +    </li> +  </ul> +... +</pre> + + +# Experiments + +* Try adding more static HTML to `index.html`. For example: + +          <p>Total number of phones: 2</p> + + +# Summary + +This addition to your app uses static HTML to display the list. Now, let's go to {@link step_02 +step 2} to learn how to use angular to dynamically generate the same list. + + +<ul doc:tutorial-nav="1"></ul> | 
