From b842642b574a2b95c53b791308ed1bf8ff9d304d Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Wed, 15 Jun 2011 22:31:40 -0700 Subject: docs - stripping extra new lines --- docs/content/tutorial/step_10.ngdoc | 48 ------------------------------------- 1 file changed, 48 deletions(-) (limited to 'docs/content/tutorial/step_10.ngdoc') diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index 109f5b77..510eacd4 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -2,80 +2,59 @@ @name Tutorial: 10 - Event Handlers @description -
...
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'];
-
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`:__
- ... -
-
-
## 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`:__
...
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');
});
@@ -138,51 +104,37 @@ __`test/e2e/scenarios.js`:__
});
-
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(name) = function(name) {
alert('Hello ' + (name || 'world') + '!');
}
-
and add:
-
-
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 step 11 (the last step!) to learn an even
better way to fetch data.
-
-