Angular load route when ajax returns

Question

How can I delay/defer a route/controller until an anonymous function returns? On app bootstrap, I default rootScope.me as guest account until it can check cookies for a logged in user.

I have a controller, testCtrl, that relies on rootScope.me data to load appropriate user data. The controller is fired before rootScope.me has a chance to be set to the user.

I know Angular has $q service for resolving promises, but am not sure how to apply this to routing.

angular .module('DDE', []) .run(['$rootScope', 'Me', function($rootScope, Me) { $rootScope.me = { username : 'Guest', id : -1 }; if (Cookies.get('user_id') && Cookies.get('username')) { Me.getProfile({user_id : Cookies.get('user_id')}).success(function (res) { $rootScope.me = res; }).error(function (err) { console.log('Error: ', err); }); } }]) .config(['$routeProvider', '$httpProvider', '$authProvider', $routeProvider. when('/test', { templateUrl: '/html/pages/test.html', controller: 'testCtrl' }).

.config(['$routeProvider', '$httpProvider', '$authProvider', '$stateProvider', '$urlRouterProvider', function($routeProvider, $httpProvider, $authProvider, $stateProvider, $urlRouterProvider) { //Cannot inject services like Me or $rootScope as I need function loadProfile () { Me.getProfile({user_id : Cookies.get('user_id')}).success(function (res) { $rootScope.me = res; }).error(function (err) { console.log('Error: ', err); }); } $stateProvider. state('test', { url : '/test', templateUrl: '/html/pages/test.html', controller : 'testCtrl', resolve : { ProfileLoaded : function () { return loadProfile(); } } });

Community · Accepted Answer · 2020-06-20 09:12:55Z

edit: adding angular's ngRoute example.

You can look into ui-router's resolve. It basically waits for your promise to be resolved before loading/navigating to your state/route.

documentation

Each of the objects in resolve below must be resolved (via deferred.resolve() if they are a promise) before the controller is instantiated. Notice how each resolve object is injected as a parameter into the controller.

Here's angular's ngRoute example from angular's documentation:

.config(function($routeProvider, $locationProvider) { $routeProvider .when('/Book/:bookId', { templateUrl: 'book.html', controller: 'BookController', resolve: { // I will cause a 1 second delay delay: function($q, $timeout) { var delay = $q.defer(); $timeout(delay.resolve, 1000); return delay.promise; } } })

So $routeProvider has no support for defer'ds? So I have to swap out my routeProvider with stateProvider?
$routeProvider also support Resolve. Another solution I am using right now is to block the page with BlockUI
@HenryZou Hi. Plz see above. How can I inject services, like Me or $rootScope as needed when I am resolving? In the config stage, you cannot ask for instances other than providers (stackoverflow.com/questions/10486769/cannot-get-to-rootscope)
delay: function($q, $timeout) { var delay = $q.defer();4 $timeout(delay.resolve, 1000); return delay.promise; }

Collectives™ on Stack Overflow

Angular load route when ajax returns

1 Answer 1

documentation

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

documentation

7 Comments

Linked

Related