aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_08.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2012-01-15 23:28:10 -0800
committerIgor Minar2012-01-17 09:49:37 -0800
commit92af30ce6e99676c71c85bd08962b68629564908 (patch)
tree4adf4b56cbf7c9fb6ee9dee8f40dd16fb2199842 /docs/content/tutorial/step_08.ngdoc
parent54581d36df74ac128a078aafb3e4b66e0b1599f3 (diff)
downloadangular.js-92af30ce6e99676c71c85bd08962b68629564908.tar.bz2
docs(*): various doc fixes
Diffstat (limited to 'docs/content/tutorial/step_08.ngdoc')
-rw-r--r--docs/content/tutorial/step_08.ngdoc186
1 files changed, 0 insertions, 186 deletions
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
deleted file mode 100644
index a81c689b..00000000
--- a/docs/content/tutorial/step_08.ngdoc
+++ /dev/null
@@ -1,186 +0,0 @@
-@ngdoc overview
-@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.module.ng.$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>
-{
- "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
- "android": {
- "os": "Android 2.3",
- "ui": "Android"
- },
- ...
- "images": [
- "img/phones/nexus-s.0.jpg",
- "img/phones/nexus-s.1.jpg",
- "img/phones/nexus-s.2.jpg",
- "img/phones/nexus-s.3.jpg"
- ],
- "storage": {
- "flash": "16384MB",
- "ram": "512MB"
- }
-}
-</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>
- <dl>
- <dt>Availability</dt>
- <dd ng:repeat="availability in phone.availability">{{availability}}</dd>
- </dl>
- </li>
- ...
- </li>
- <span>Additional Features</span>
- <dd>{{phone.additionalFeatures}}</dd>
- </li>
-</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>
-...
- it('should fetch phone detail', function() {
- scope.params = {phoneId:'xyz'};
- $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');
- });
- });
-...
-</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 guide/dev_guide.e2e-testing Angular's 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 {@link step_09 step 9} to learn how to
-write your own custom display filter.
-
-
-<ul doc:tutorial-nav="8"></ul>