diff options
Diffstat (limited to 'docs/content/tutorial/step_05.ngdoc')
| -rwxr-xr-x | docs/content/tutorial/step_05.ngdoc | 76 |
1 files changed, 26 insertions, 50 deletions
diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc index 1e63e383..4bd4e4b3 100755 --- a/docs/content/tutorial/step_05.ngdoc +++ b/docs/content/tutorial/step_05.ngdoc @@ -1,47 +1,29 @@ @ngdoc overview -@name Tutorial: Step 5 +@name Tutorial: 5 - XHRs & Dependency Injection @description -<table id="tutorial_nav"> -<tr> - <td id="previous_step">{@link tutorial.step_04 Previous}</td> - <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-5/app Live Demo -}</td> - <td id="tut_home">{@link tutorial Tutorial Home}</td> -<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-4...step-5 Code -Diff}</td> - <td id="next_step">{@link tutorial.step_06 Next}</td> -</tr> -</table> -Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset -from our server using one of angular's built-in {@link angular.service services} called {@link -angular.service.$xhr $xhr}. We will use angular's {@link guide.di dependency injection (DI)} to -provide the service to the `PhoneListCtrl` controller. - +<ul doc:tutorial-nav="5"></ul> -1. Reset your workspace to step 5. - git checkout -f step-5 +Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset +from our server using one of angular's built-in {@link api/angular.service services} called {@link +api/angular.service.$xhr $xhr}. We will use angular's {@link guide/dev_guide.di dependency +injection (DI)} to provide the service to the `PhoneListCtrl` controller. - or - ./goto_step.sh 5 +<doc:tutorial-instructions step="5"></doc:tutorial-instructions> -2. Refresh your browser or check the app out on {@link -http://angular.github.com/angular-phonecat/step-5/app angular's server}. You should now see a list of 20 phones. - - The most important changes are listed below. You can see the full diff on {@link https://github.com/angular/angular-phonecat/compare/step-4...step-5 GitHub}: @@ -74,16 +56,16 @@ Following is a sample of the file: ## Controller -We'll use angular's {@link angular.service.$xhr $xhr} service in our controller to make an HTTP +We'll use angular's {@link api/angular.service.$xhr $xhr} service in our controller to make an HTTP request to your web server to fetch the data in the `app/phones/phones.json` file. `$xhr` is just -one of several built-in {@link angular.service angular services} that handle common operations in -web apps. Angular injects these services for you where you need them. +one of several built-in {@link api/angular.service angular services} that handle common operations +in web apps. Angular injects these services for you where you need them. -Services are managed by angular's {@link guide.di DI subsystem}. Dependency injection helps to make -your web apps both well-structured (e.g., separate components for presentation, data, and control) -and loosely coupled (dependencies between components are not resolved by the components themselves, -but by the DI subsystem). +Services are managed by angular's {@link guide/dev_guide.di DI subsystem}. Dependency injection +helps to make your web apps both well-structured (e.g., separate components for presentation, data, +and control) and loosely coupled (dependencies between components are not resolved by the +components themselves, but by the DI subsystem). __`app/js/controllers.js:`__ @@ -179,7 +161,7 @@ production code behind the scenes, as follows: describe('PhoneCat controllers', function() { - describe('PhoneListCtrl', function(){ + describe('PhoneListCtrl', function() { var scope, $browser, ctrl; @@ -188,8 +170,9 @@ describe('PhoneCat controllers', function() { $browser = scope.$service('$browser'); - $browser.xhr.expectGET('phones/phones.json').respond([{name: 'Nexus S'}, - {name: 'Motorola DROID'}]); + $browser.xhr.expectGET('phones/phones.json') + .respond([{name: 'Nexus S'}, + {name: 'Motorola DROID'}]); ctrl = scope.$new(PhoneListCtrl); }); }); @@ -211,13 +194,13 @@ we create the `PhoneListCtrl` child scope, we need to tell the testing harness t incoming request from the controller. To do this we: -* Use the {@link angular.scope.$service `$service`} method to retrieve the `$browser` service, a -service that angular uses to represent various browser APIs. In tests, angular automatically uses a -mock version of this service that allows you to write tests without having to deal with these +* Use the {@link api/angular.scope.$service `$service`} method to retrieve the `$browser` service, +a service that angular uses to represent various browser APIs. In tests, angular automatically uses +a mock version of this service that allows you to write tests without having to deal with these native APIs and the global state associated with them. -* Use the `$browser.expectGET` method to train the `$browser` object to expect an incoming HTTP +* Use the `$browser.xhr.expectGET` method to train the `$browser` object to expect an incoming HTTP request and tell it what to respond with. Note that the responses are not returned before we call the `$browser.xhr.flush` method. @@ -293,14 +276,7 @@ implementation of dependency injection), go to step 6, where you will add some t phones and some links. -<table id="tutorial_nav"> -<tr> - <td id="previous_step">{@link tutorial.step_04 Previous}</td> - <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-5/app Live Demo -}</td> - <td id="tut_home">{@link tutorial Tutorial Home}</td> - <td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-4...step-5 Code -Diff}</td> - <td id="next_step">{@link tutorial.step_06 Next}</td> -</tr> -</table> + + +<ul doc:tutorial-nav="5"></ul> + |