Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://docs.angularjs.org/api/ngRoute.$routeProvider" rel="noreferrer">$routeProvider</a> <a href="http://docs.angularjs.org/api/ngRoute.$routeProvider" rel="noreferrer">resolve</a> property allows delaying of route change until data is loaded.</p> <p>First define a route with <code>resolve</code> attribute like this.</p> <pre class="lang-js prettyprint-override"><code>angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl, resolve: PhoneListCtrl.resolve}). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl, resolve: PhoneDetailCtrl.resolve}). otherwise({redirectTo: '/phones'}); }]); </code></pre> <p>notice that the <code>resolve</code> property is defined on route.</p> <pre class="lang-js prettyprint-override"><code>function PhoneListCtrl($scope, phones) { $scope.phones = phones; $scope.orderProp = 'age'; } PhoneListCtrl.resolve = { phones: function(Phone, $q) { // see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4 var deferred = $q.defer(); Phone.query(function(successData) { deferred.resolve(successData); }, function(errorData) { deferred.reject(); // you could optionally pass error data here }); return deferred.promise; }, delay: function($q, $defer) { var delay = $q.defer(); $defer(delay.resolve, 1000); return delay.promise; } } </code></pre> <p>Notice that the controller definition contains a resolve object which declares things which should be available to the controller constructor. Here the <code>phones</code> is injected into the controller and it is defined in the <code>resolve</code> property.</p> <p>The <code>resolve.phones</code> function is responsible for returning a promise. All of the promises are collected and the route change is delayed until after all of the promises are resolved.</p> <p>Working demo: <a href="http://mhevery.github.com/angular-phonecat/app/#/phones" rel="noreferrer">http://mhevery.github.com/angular-phonecat/app/#/phones</a> Source: <a href="https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831" rel="noreferrer">https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload