aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_10.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/tutorial/step_10.ngdoc')
-rw-r--r--docs/content/tutorial/step_10.ngdoc140
1 files changed, 0 insertions, 140 deletions
diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc
deleted file mode 100644
index 73e8b354..00000000
--- a/docs/content/tutorial/step_10.ngdoc
+++ /dev/null
@@ -1,140 +0,0 @@
-@ngdoc overview
-@name Tutorial: 10 - Event Handlers
-@description
-
-<ul doc:tutorial-nav="10"></ul>
-
-
-In this step, you will add a clickable phone image swapper to the phone details page.
-
-
-<doc:tutorial-instructions step="10"></doc:tutorial-instructions>
-
-
-The phone details view displays one large image of the current phone and several smaller thumbnail
-images. It would be great if we could replace the large image with any of the thumbnails just by
-clicking on the desired thumbnail image. Let's have a look at how we can do this with angular.
-
-The most important changes are listed below. You can see the full diff on {@link
-https://github.com/angular/angular-phonecat/compare/step-9...step-10
-GitHub}:
-
-
-## Controller
-
-__`app/js/controllers.js`:__
-<pre>
-...
-function PhoneDetailCtrl($xhr) {
- var self = this;
-
- $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
- self.phone = response;
- self.mainImageUrl = response.images[0];
- });
-
- self.setImage = function(imageUrl) {
- self.mainImageUrl = imageUrl;
- }
-}
-
-//PhoneDetailCtrl.$inject = ['$xhr'];
-</pre>
-
-In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its
-default value to the first phone image url.
-
-We also created a `setImage` controller method to change the value of `mainImageUrl`.
-
-
-## Template
-
-__`app/partials/phone-detail.html`:__
-<pre>
-<img ng:src="{{mainImageUrl}}" class="phone"/>
-
-...
-
-<ul class="phone-thumbs">
- <li ng:repeat="img in phone.images">
- <img ng:src="{{img}}" ng:click="setImage(img)">
- </li>
-</ul>
-...
-</pre>
-
-We bound the `ng:src` attribute of the large image to the `mainImageUrl` property.
-
-We also registered an {@link api/angular.directive.ng:click `ng:click`} handler with thumbnail
-images. When a user clicks on one of the thumbnail images, the handler will use the `setImage`
-controller method to change the value of the `mainImageUrl` property to the url of the thumbnail
-image.
-
-<img src="img/tutorial/tutorial_10-11_final.png">
-
-## Test
-
-To verify this new feature, we added two end-to-end tests. One verifies that the main image is set
-to the first phone image by default. The second test clicks on several thumbnail images and
-verifies that the main image changed appropriately.
-
-__`test/e2e/scenarios.js`:__
-<pre>
-...
- describe('Phone detail view', function() {
-
- beforeEach(function() {
- browser().navigateTo('../../app/index.html#/phones/nexus-s');
- });
-
-
- it('should display the first phone image as the main phone image', function() {
- expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
- });
-
-
- it('should swap main image if a thumbnail image is clicked on', function() {
- element('.phone-thumbs li:nth-child(3) img').click();
- expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg');
-
- element('.phone-thumbs li:nth-child(1) img').click();
- expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
- });
- });
-});
-</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
-
-* Let's add a new controller method to `PhoneCatCtrl`:
-
- this.hello = function(name) {
- alert('Hello ' + (name || 'world') + '!');
- }
-
- and add:
-
- <button ng:click="hello('Elmo')">Hello</button>
-
- to the `index.html` template.
-
- The controller methods are inherited between controllers/scopes, so you can use the same snippet
-in the `phone-list.html` template as well.
-
-* Move the `hello` method from `PhoneCatCtrl` to `PhoneListCtrl` and you'll see that the button
-declared in `index.html` will stop working, while the one declared in the `phone-list.html`
-template remains operational.
-
-
-# Summary
-
-With the phone image swapper in place, we're ready for {@link step_11 step 11} (the last step!) to
-learn an even better way to fetch data.
-
-
-<ul doc:tutorial-nav="10"></ul>