From ea6b87c24ba70d2554c0f9a3e80b245dc3780234 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 29 Apr 2011 11:04:18 -0700 Subject: renamed tutorial so that it would sort properly --- docs/tutorial.step_8.ngdoc | 148 --------------------------------------------- 1 file changed, 148 deletions(-) delete mode 100755 docs/tutorial.step_8.ngdoc (limited to 'docs/tutorial.step_8.ngdoc') diff --git a/docs/tutorial.step_8.ngdoc b/docs/tutorial.step_8.ngdoc deleted file mode 100755 index ad967085..00000000 --- a/docs/tutorial.step_8.ngdoc +++ /dev/null @@ -1,148 +0,0 @@ -@workInProgress -@ngdoc overview -@name Tutorial: Step 8 -@description - - - - - - - - -
{@link tutorial.step_7 Previous}{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo -}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code -Diff}{@link tutorial.step_9 Next}
- -In this step, we implement the Phone Details View template. Once again we will use {@link -angular.services.$xhr $xhr} to fetch our data, and we'll flesh out the `phone-details.html` View -template. - -__`app/partials/phone-details.html`:__ -
-
-
-

{{phone.name}}

- -

{{phone.description}}

- - - - -
- -__`app/js/controller.js`:__ -
-function PhoneCatCtrl($route) (same as Step 7)
-
-function PhoneListCtrl($xhr) (same as Step 7)
-
-function PhoneDetailCtrl($xhr) {
-  var self = this;
-
-  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
-    self.phone = response;
-  });
-}
-
-//PhoneDetailCtrl.$inject = ['$xhr'];
-
- -__`app/phones/nexus-s.json`:__ (sample snippet) -
-{
-  "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
-  Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", 
-  "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"
-  }
-}
-
- -__`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 into the -view. - -* Note how we used the `$route` `params` object from the scope managed by the root controller -(`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 Live Demo -}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code -Diff}{@link tutorial.step_9 Next}
-- cgit v1.2.3