@workInProgress @ngdoc overview @name Tutorial: Step 7 @description

{@link tutorial.step_6 Previous}

{@link http://angular.github.com/angular-phonecat/step-7/app Example}

{@link tutorial Tutorial Home}

{@link https://github.com/angular/angular-phonecat/commit/43ff5d76f1c0a464da67d691418e33e6c9d8dbc8 Code Diff}

{@link tutorial.step_8 Next}

In this step we introduce angular's {@link angular.service.$route $route} service. This service is usually used in conjunction with the {@link angular.widget.ng:view ng:view} directive. The `$route` service makes it easy to wire together controllers, View templates, and the current URL location in the browser. Using this feature we can implement {@link http://en.wikipedia.org/wiki/Deep_linking deep linking}, which lets us utilize the browser's History, and Back and Forward browser navigation. We'll use {@link angular.service.$route $route} to implement two different views for our application: one view presents the phone listing, and the other view presents the details for a particular phone. We'll use {@link angular.widget.ng:view ng:view} to include one or the other of those views in our main layout page (`index.html`). The view presented in the layout page is based on which URL the user navigates to. To manage our two different views, we'll move the existing phone list controller into a sub-controller, add a second sub-controller to handle the phone details, and we'll create a new root controller to implement the routing. (We'll save the implementation of the phone details View for the next step.) __`app/index.html`:__


...

  
...

__`app/partials/phone-list.html`:__


  
    Search: 
  
  
    Sort by:
    
  



  
    {{phone.name}}
    
    {{phone.snippet}}

__`app/js/controller.js`:__

/* App Controllers */

function PhoneCatCtrl($route) {
  var self = this;

  $route.when('/phones',
              {template: 'partials/phone-list.html',   controller: PhoneListCtrl});
  $route.when('/phones/:phoneId',
              {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl});
  $route.otherwise({redirectTo: '/phones'});

  $route.onChange(function(){
    self.params = $route.current.params;
  });

  $route.parent(this);
}

//PhoneCatCtrl.$inject = ['$route'];


function PhoneListCtrl($xhr) {
  var self = this;

  $xhr('GET', 'phones/phones.json', function(code, response) {
    self.phones = response;
  });

  self.orderProp = 'age';
}

//PhoneListCtrl.$inject = ['$xhr'];


function PhoneDetailCtrl() {}

## Discussion: We have many changes to discuss here in Step 7: * __The View.__ Our View template in `index.html` has been reduced down to this: ``. It is now what we call a "layout template", because it contains information common for all views, including the layout of our application. The {@link angular.widget.ng:view ng:view} directive behaves like an "include" declaration (it's a specialized sibling of the {@link angular.widget.ng:include ng:include} directive) that works specifically with the {@link angular.service.$route $route} service. The View template associated with the current route definition gets included "between those tags" (there's more to it than a simple include, but that explanation will do for now). * We added two new View templates: * `app/partials/phone-list.html` for the phone list; * `app/partials/phone-detail.html` for the phone details (just a stub for this step); * __The Controller(s).__ We now have a new root controller (`PhoneCatCtrl`) and two sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`). * __`$route.`__ The root controller's job now is to set up the `$route` configuration: * When the fragment part of the URL in the browser ends in "/phones", `$route` grabs the `phone-list.html` template, compiles it, and links it with a new scope that is controlled by our `PhoneListCtrl` controller. * When the URL ends in "/phones/:phoneId", `$route` compiles and links the `phone-detail.html` template as it did with `phone-list.html`. But note the use of the variable `:phoneId` in the `path` parameter of `$route.when()`: `$route` stores that portion of the current URL fragment in its current parameters in a property called `params.phoneId`. We made the `$route` parameters available to our sub-controllers in the `$route.onChange()` function in our root controller. We will use the `phoneId` property when we fetch the phone details in Step 8. * Any other URL fragment gets redirected to `/phones`. * __Deep Linking.__ In `$route`'s `onChange()` method, we copied {@link http://en.wikipedia.org/wiki/Deep_linking deep linking} parameters to the `params` property in the root scope, so we can use them in the child scopes managed by our sub-controllers.

{@link tutorial.step_6 Previous}

{@link http://angular.github.com/angular-phonecat/step-7/app Example}

{@link tutorial Tutorial Home}

{@link https://github.com/angular/angular-phonecat/commit/43ff5d76f1c0a464da67d691418e33e6c9d8dbc8 Code Diff}

{@link tutorial.step_8 Next}