javascript - ajax返回时的 Angular 加载路由

Question

如何延迟/延迟路由/ Controller 直到匿名函数返回？在应用程序 Bootstrap 中，我默认 rootScope.me 作为 guest 帐户，直到它可以检查登录用户的 cookie。

我有一个 Controller testCtrl，它依赖于 rootScope.me 数据来加载适当的用户数据。 Controller 在 rootScope.me 有机会设置给用户之前触发。

我知道 Angular 有 $q解决 promise 的服务，但我不确定如何将其应用于路由。

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();
                    }
                }
            });

Answer 1

编辑:添加 angular 的 ngRoute 示例。

你可以看看ui-router's resolve .它基本上是在加载/导航到您的州/路线之前等待您的 promise 得到解决。

文档

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.

这是来自 angular's documentation 的 Angular 的 ngRoute 示例:

.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;
      }
    }
  })