From 075c089b5cbe72e95ec96638f8925aeb44824f7c Mon Sep 17 00:00:00 2001
From: Igor Minar
Date: Fri, 27 Apr 2012 15:18:54 -0700
Subject: docs(tutorial): update all the remaining steps
I made some diagrams and portions of the text that are stil stale
invisible. We'll fix these in the next relese.
---
docs/content/tutorial/step_11.ngdoc | 151 ++++++++++++++++++++----------------
1 file changed, 82 insertions(+), 69 deletions(-)
(limited to 'docs/content/tutorial/step_11.ngdoc')
diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc
index e2826805..acad5467 100644
--- a/docs/content/tutorial/step_11.ngdoc
+++ b/docs/content/tutorial/step_11.ngdoc
@@ -2,8 +2,6 @@
@name Tutorial: 11 - REST and Custom Services
@description
-This page has not been updated for AngularJS 1.0 yet
-
@@ -16,7 +14,7 @@ In this step, you will improve the way our app fetches data.
The last improvement we will make to our app is to define a custom service that represents a {@link
http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client. Using this client we
can make xhr requests for data in an easier way, without having to deal with the lower-level {@link
-api/angular.module.ng.$xhr $xhr} API, HTTP methods and URLs.
+api/angular.module.ng.$http $http} API, HTTP methods and URLs.
The most important changes are listed below. You can see the full diff on {@link
https://github.com/angular/angular-phonecat/compare/step-10...step-11
@@ -26,12 +24,14 @@ GitHub}:
## Template
The custom service is defined in `app/js/services.js` so we need to include this file in our layout
-template:
+template. Additionally, we also need to load the `angular-resource.js` file, which contains the
+`ngResource` module and in it the `$resource` service, that we'll soon use:
__`app/index.html`.__
...
+
...
@@ -39,64 +39,68 @@ __`app/index.html`.__
__`app/js/services.js`.__
- angular.module.ng('Phone', function($resource) {
+angular.module('phonecatServices', ['ngResource']).
+ factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
- query: {method: 'GET', params: {phoneId: 'phones'}, isArray: true}
+ query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
- });
+});
-We used the {@link api/angular.module.ng} API to register a custom service. We passed in the name of
-the service - 'Phone' - and a factory function. The factory function is similar to a controller's
-constructor in that both can declare dependencies via function arguments. The Phone service
-declared a dependency on the `$resource` service.
+We used the module API to register a custom service using a factory function. We passed in the name
+of the service - 'Phone' - and the factory function. The factory function is similar to a
+controller's constructor in that both can declare dependencies via function arguments. The Phone
+service declared a dependency on the `$resource` service.
-The {@link api/angular.module.ng.$resource `$resource`} service makes it easy to create a {@link
-http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few lines
-of code. This client can then be used in our application, instead of the lower-level {@link
-api/angular.module.ng.$xhr $xhr} service.
+The {@link api/angular.module.ngResource.$resource `$resource`} service makes it easy to create a
+{@link http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few
+lines of code. This client can then be used in our application, instead of the lower-level {@link
+api/angular.module.ng.$http $http} service.
## Controller
We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
-lower-level {@link api/angular.module.ng.$xhr $xhr} service, replacing it with a new service called
-`Phone`. Angular's {@link api/angular.module.ng.$resource `$resource`} service is easier to use than
-{@link api/angular.module.ng.$xhr $xhr} for interacting with data sources exposed as RESTful
-resources. It is also easier now to understand what the code in our controllers is doing.
+lower-level {@link api/angular.module.ng.$http $http} service, replacing it with a new service called
+`Phone`. Angular's {@link api/angular.module.ngResource.$resource `$resource`} service is easier to
+use than `$http for interacting with data sources exposed as RESTful resources. It is also easier
+now to understand what the code in our controllers is doing.
__`app/js/controllers.js`.__
...
-function PhoneListCtrl(Phone) {
- this.orderProp = 'age';
- this.phones = Phone.query();
+function PhoneListCtrl($scope, Phone) {
+ $scope.phones = Phone.query();
+ $scope.orderProp = 'age';
}
-//PhoneListCtrl.$inject = ['Phone'];
+//PhoneListCtrl.$inject = ['$scope', 'Phone'];
-function PhoneDetailCtrl(Phone) {
- var self = this;
- self.phone = Phone.get({phoneId: self.params.phoneId}, function(phone) {
- self.mainImageUrl = phone.images[0];
+
+function PhoneDetailCtrl($scope, $routeParams, Phone) {
+ $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+ $scope.mainImageUrl = phone.images[0];
});
- ...
+ $scope.setImage = function(imageUrl) {
+ $scope.mainImageUrl = imageUrl;
+ }
}
-//PhoneDetailCtrl.$inject = ['Phone'];
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
Notice how in `PhoneListCtrl` we replaced:
- $xhr('GET', 'phones/phones.json', function(code, response) {
- self.phones = response;
+ $http.get('phones/phones.json').success(function(data) {
+ $scope.phones = data;
});
with:
- this.phones = Phone.query();
+ $scope.phones = Phone.query();
This is a simple statement that we want to query for all phones.
@@ -118,10 +122,10 @@ We have modified our unit tests to verify that our new service is issuing HTTP r
processing them as expected. The tests also check that our controllers are interacting with the
service correctly.
-The {@link api/angular.module.ng.$resource $resource} service augments the response object with
-methods for updating and deleting the resource. If we were to use the standard `toEqual` matcher,
-our tests would fail because the test values would not match the responses exactly. To solve the
-problem, we use a newly-defined `toEqualData` {@link
+The {@link api/angular.module.ngResource.$resource $resource} service augments the response object
+with methods for updating and deleting the resource. If we were to use the standard `toEqual`
+matcher, our tests would fail because the test values would not match the responses exactly. To
+solve the problem, we use a newly-defined `toEqualData` {@link
http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Matchers.html Jasmine matcher}. When the
`toEqualData` matcher compares two objects, it takes only object properties into account and
ignores methods.
@@ -131,7 +135,7 @@ __`test/unit/controllersSpec.js`:__
describe('PhoneCat controllers', function() {
- beforeEach(function() {
+ beforeEach(function(){
this.addMatchers({
toEqualData: function(expected) {
return angular.equals(this.actual, expected);
@@ -139,54 +143,63 @@ describe('PhoneCat controllers', function() {
});
});
- describe('PhoneListCtrl', function() {
- var scope, $browser, ctrl;
- beforeEach(function() {
- scope = angular.module.ng.$rootScope.Scope();
- $browser = scope.$service('$browser');
+ beforeEach(module('phonecatServices'));
+
+
+ describe('PhoneListCtrl', function(){
+ var scope, ctrl, $httpBackend;
+
+ beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+ $httpBackend = _$httpBackend_;
+ $httpBackend.expectGET('phones/phones.json').
+ respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+ scope = $rootScope.$new();
+ ctrl = $controller(PhoneListCtrl, {$scope: scope});
+ }));
- $browser.xhr.expectGET('phones/phones.json')
- .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
- ctrl = scope.$new(PhoneListCtrl);
- });
it('should create "phones" model with 2 phones fetched from xhr', function() {
- expect(ctrl.phones).toEqual([]);
- $browser.xhr.flush();
+ expect(scope.phones).toEqual([]);
+ $httpBackend.flush();
- expect(ctrl.phones).toEqualData([{name: 'Nexus S'},
- {name: 'Motorola DROID'}]);
+ expect(scope.phones).toEqualData(
+ [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
});
+
it('should set the default value of orderProp model', function() {
- expect(ctrl.orderProp).toBe('age');
+ expect(scope.orderProp).toBe('age');
});
});
- describe('PhoneDetailCtrl', function() {
- var scope, $browser, ctrl;
+ describe('PhoneDetailCtrl', function(){
+ var scope, $httpBackend, ctrl,
+ xyzPhoneData = function() {
+ return {
+ name: 'phone xyz',
+ images: ['image/url1.png', 'image/url2.png']
+ }
+ };
- beforeEach(function() {
- scope = angular.module.ng.$rootScope.Scope();
- $browser = scope.$service('$browser');
- });
- beforeEach(function() {
- scope = angular.module.ng.$rootScope.Scope();
- $browser = scope.$service('$browser');
- });
+ beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+ $httpBackend = _$httpBackend_;
+ $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
+
+ $routeParams.phoneId = 'xyz';
+ scope = $rootScope.$new();
+ ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
+ }));
- 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).toEqualData({});
- $browser.xhr.flush();
+ it('should fetch phone detail', function() {
+ expect(scope.phone).toEqualData({});
+ $httpBackend.flush();
- expect(ctrl.phone).toEqualData({name:'phone xyz'});
+ expect(scope.phone).toEqualData(xyzPhoneData());
});
});
});
@@ -198,7 +211,7 @@ output.
Chrome: Runner reset.
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
- Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+ Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
# Summary
--
cgit v1.2.3