From e205bd7137fd793d223dbe3e020a628f8e7d98f3 Mon Sep 17 00:00:00 2001 From: Kenneth R. Culp Date: Fri, 29 Apr 2011 10:04:40 -0700 Subject: Update tutorial docs. --- docs/tutorial.step_8.ngdoc | 58 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 10 deletions(-) (limited to 'docs/tutorial.step_8.ngdoc') diff --git a/docs/tutorial.step_8.ngdoc b/docs/tutorial.step_8.ngdoc index bf03fdac..ad967085 100755 --- a/docs/tutorial.step_8.ngdoc +++ b/docs/tutorial.step_8.ngdoc @@ -5,10 +5,10 @@ - + - @@ -41,6 +41,7 @@ __`app/partials/phone-details.html`:__ ... + Additional Features
{{phone.additionalFeatures}}
@@ -87,23 +88,60 @@ __`app/phones/nexus-s.json`:__ (sample snippet) } +__`test/unit/controllerSpec.js`:__ +
+...
+    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'});
+    });
+...
+
+ +__`test/e2e/scenarios.js`:__ +
+...
+  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');
+    });
+  });
+...
+
+ ## Discussion: * Phone Details View Template. There is nothing fancy or new here, just note where we use the -angular `{{ expression }}` markup and directives to project phone data from our model. +angular `{{ expression }}` markup and directives to project phone data from our model into the +view. * Note how we used the `$route` `params` object from the scope managed by the root controller -(`PhoneCatCtrl`), to construct the path to the phone details requested by the user. The rest of -this step is simply applying the previously learned concepts and angular APIs to create a large -template that displays a lot of data about a phone. +(`PhoneCatCtrl`), to construct the path for the phone details xhr request. The rest of this step +is simply applying the previously learned concepts and angular APIs to create a large template +that displays a lot of data about a phone. + +* Tests. We updated the existing end to end test and wrote a new unit test that is similar in +spirit to the one we wrote for the `PhoneListCtrl` controller.
{@link tutorial.step_7 Previous}{@link http://angular.github.com/angular-phonecat/step-8/app Example}{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo +} {@link tutorial Tutorial Home}{@link -https://github.com/angular/angular-phonecat/commit/1f91f571bdd6f1e705ebb303998afe7820ffc6d9 Code +{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code Diff} {@link tutorial.step_9 Next}
- + - -- cgit v1.2.3
{@link tutorial.step_7 Previous}{@link http://angular.github.com/angular-phonecat/step-8/app Example}{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo +} {@link tutorial Tutorial Home}{@link -https://github.com/angular/angular-phonecat/commit/1f91f571bdd6f1e705ebb303998afe7820ffc6d9 Code +{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code Diff} {@link tutorial.step_9 Next}