aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_08.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_08.ngdoc
parentd428c9910e66246c2af46602499acaeaf187d75b (diff)
downloadangular.js-b842642b574a2b95c53b791308ed1bf8ff9d304d.tar.bz2
docs - stripping extra new lines
Diffstat (limited to 'docs/content/tutorial/step_08.ngdoc')
-rw-r--r--docs/content/tutorial/step_08.ngdoc54
1 files changed, 0 insertions, 54 deletions
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index a430387b..e81a8d93 100644
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -2,43 +2,31 @@
@name Tutorial: 8 - More Templating
@description
-
<ul doc:tutorial-nav="8"></ul>
-
-
In this step, you will implement the phone details view, which is displayed when a user clicks on a
phone in the phone list.
-
-
<doc:tutorial-instructions step="8"></doc:tutorial-instructions>
-
-
Now when you click on a phone on the list, the phone details page with phone-specific information
is displayed.
-
To implement the phone details view we will use {@link api/angular.service.$xhr $xhr} to fetch our
data, and we'll flesh out the `phone-details.html` view template.
-
The most important changes are listed below. You can see the full diff on {@link
https://github.com/angular/angular-phonecat/compare/step-7...step-8
GitHub}:
-
## Data
-
In addition to `phones.json`, the `app/phones/` directory also contains one json file for each
phone:
-
__`app/phones/nexus-s.json`:__ (sample snippet)
<pre>
{
@@ -62,71 +50,53 @@ __`app/phones/nexus-s.json`:__ (sample snippet)
</pre>
-
-
Each of these files describes various properties of the phone using the same data structure. We'll
show this data in the phone detail view.
-
-
## Controller
-
We'll expand the `PhoneDetailCtrl` by using the `$xhr` service to fetch the json files. This works
the same way as the phone list controller.
-
__`app/js/controller.js`:__
<pre>
function PhoneDetailCtrl($xhr) {
var self = this;
-
$xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
self.phone = response;
});
}
-
//PhoneDetailCtrl.$inject = ['$xhr'];
</pre>
-
To construct the URL for the HTTP request, we use `params.phoneId` extracted from the current route
in the `PhoneCatCtrl` controller.
-
-
## Template
-
The TBD placeholder line has been replaced with lists and bindings that comprise the phone details.
Note where we use the angular `{{expression}}` markup and `ng:repeater`s to project phone data from
our model into the view.
-
-
__`app/partials/phone-details.html`:__
<pre>
<img ng:src="{{phone.images[0]}}" class="phone"/>
-
<h1>{{phone.name}}</h1>
-
<p>{{phone.description}}</p>
-
<ul class="phone-thumbs">
<li ng:repeat="img in phone.images">
<img ng:src="{{img}}"/>
</li>
</ul>
-
<ul class="specs">
<li>
<span>Availability and Networks</span>
@@ -143,17 +113,13 @@ __`app/partials/phone-details.html`:__
</ul>
</pre>
-
<img src="img/tutorial/tutorial_08-09_final.png">
-
## Test
-
We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
step 5.
-
__`test/unit/controllerSpec.js`:__
<pre>
...
@@ -162,46 +128,36 @@ __`test/unit/controllerSpec.js`:__
$browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
ctrl = scope.$new(PhoneDetailCtrl);
-
expect(ctrl.phone).toBeUndefined();
$browser.xhr.flush();
-
expect(ctrl.phone).toEqual({name:'phone xyz'});
});
...
</pre>
-
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
output.
-
Chrome: Runner reset.
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
Chrome 11.0.696.57 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
-
-
We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
heading on the page is "Nexus S".
-
__`test/e2e/scenarios.js`:__
<pre>
...
describe('Phone detail view', function() {
-
beforeEach(function() {
browser().navigateTo('../../app/index.html#/phones/nexus-s');
});
-
-
it('should display nexus-s page', function() {
expect(binding('phone.name')).toBe('Nexus S');
});
@@ -210,33 +166,23 @@ __`test/e2e/scenarios.js`:__
</pre>
-
-
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-8/test/e2e/runner.html
angular's server}.
-
# Experiments
-
* Using the {@link
https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en&pli=1#
end-to-end test runner API}, write a test that verifies that we display 4 thumbnail images on the
Nexus S details page.
-
-
# Summary
-
Now that the phone details view is in place, proceed to step 9 to learn how to write your own
custom display filter.
-
-
<ul doc:tutorial-nav="8"></ul>
-