aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_06.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2011-06-15 22:31:40 -0700
committerIgor Minar2011-06-15 22:31:40 -0700
commitb842642b574a2b95c53b791308ed1bf8ff9d304d (patch)
treefb26431c5372be74de2105df77e94dea4f198489 /docs/content/tutorial/step_06.ngdoc
parentd428c9910e66246c2af46602499acaeaf187d75b (diff)
downloadangular.js-b842642b574a2b95c53b791308ed1bf8ff9d304d.tar.bz2
docs - stripping extra new lines
Diffstat (limited to 'docs/content/tutorial/step_06.ngdoc')
-rw-r--r--docs/content/tutorial/step_06.ngdoc30
1 files changed, 0 insertions, 30 deletions
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index e7fa1660..aa628a5d 100644
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -2,41 +2,29 @@
@name Tutorial: 6 - Templating Links & Images
@description
-
<ul doc:tutorial-nav="6"></ul>
-
-
In this step, you will add thumbnail images for the phones in the phone list, and links that, for
now, will go nowhere. In subsequent steps you will use the links to display additional information
about the phones in the catalog.
-
-
<doc:tutorial-instructions step="6"></doc:tutorial-instructions>
-
-
You should now see links and images of the phones in the list.
-
The most important changes are listed below. You can see the full diff on {@link
https://github.com/angular/angular-phonecat/compare/step-5...step-6
GitHub}:
-
-
## Data
-
Note that the `phones.json` file contains unique ids and image urls for each of the phones. The
urls point to the `app/img/phones/` directory.
-
__`app/phones/phones.json`__ (sample snippet):
<pre>
[
@@ -52,11 +40,8 @@ __`app/phones/phones.json`__ (sample snippet):
</pre>
-
-
## Template
-
__`app/index.html`:__
<pre>
...
@@ -70,13 +55,11 @@ __`app/index.html`:__
...
</pre>
-
To dynamically generate links that will in the future lead to phone detail pages, we used the
now-familiar {@link guide/dev_guide.compiler.markup double-curly brace markup} in the `href`
attribute values. In step 2, we added the `{{phone.name}}` binding as the element content. In this
step the '{{phone.id}}' binding is used in the element attribute.
-
We also added phone images next to each record using an image tag with the {@link
api/angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating
the angular `{{ exppression }}` markup literally, which it would have done if we had only specified
@@ -84,11 +67,8 @@ an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}
`ng:src` prevents the browser from making an http request to an invalid location.
-
-
## Test
-
__`test/e2e/scenarios.js`__:
<pre>
...
@@ -100,36 +80,26 @@ __`test/e2e/scenarios.js`__:
...
</pre>
-
We added a new end-to-end test to verify that the app is generating correct links to the phone
views that we will implement in the upcoming steps.
-
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
can see them running on {@link
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
angular's server}.
-
# Experiments
-
* Replace the `ng:src` directive with a plain old `<src>` attribute. Using tools such as Firebug,
or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
`/app/index.html/{{phone.imageUrl}}`).
-
-
# Summary
-
Now that you have added phone images and links, go to step 7 to learn about angular layout
templates and how angular makes it easy to create applications that have multiple views.
-
-
<ul doc:tutorial-nav="6"></ul>
-