angularjs - 使用异步数据初始化 Angular 应用程序

Question

我需要使用整个应用程序所依赖的一些用户数据来初始化我的 Angular。因此，我需要在路由器启动和 Controller 初始化之前解决初始化问题。

目前，我在 Angular 模块的 run() block 中编写了初始化代码。初始化涉及获取用户数据的异步 http 请求，应用程序的其余部分依赖于用户数据。如何确保在路由器开始初始化 Controller 之前解析 http 请求？

我正在使用 ui-router。

初始化包括以下内容:1) 获取 cookie 'userId'2)从服务器获取用户(异步http请求，整个应用依赖于用户)3) 设置 authService.currentUser

这是代码示例

.run(['$cookies', 'userApiService', 'authService', 
  function($cookies, userApiService, authService){

    var userId = $cookies.get('userId');
    userId = parseCookieValue(userId);

    userApiService.getOne(userId).then(function(user){
      authService.currentUser = user;
    });
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
  function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.when('/', '/main');

    $stateProvider
      .state('login', {
        url: '/login',
        views: {
          'header': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          'content': {
            templateUrl: 'views/login.html',
            controller: 'LoginCtrl'
          },
          'footer': {
            templateUrl: 'views/footer.html',
          }
        }
      })
      .state('main', {
        url: '/main',
        views: {
          'content@': {
            template: '',
            controller: function($state, authService) {
              if(!authService.isAuthenticated()) {
                $state.go('login');
              }
              if(authService.isStudent()) {
                $state.go('student');
              }
              if(authService.isAdmin()) {
                $state.go('admin');
              }
            }
          }
        }
      })
      .state('student', {
        url: '/student',
        views: {
          'header@': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          'content@': {
            templateUrl: 'views/student.html',
            controller: 'StudentCtrl'
          },
          'footer@': {
            templateUrl: 'views/footer.html',
          }
        }
      })
      .state('admin', {
        url: '/admin',
        views: {
          'header@': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          'content@': {
            templateUrl: 'views/admin.html',
            controller: 'AdminCtrl'
          },
          'footer@': {
            templateUrl: 'views/footer.html',
          }
        }
      })
}])

Answer 1

扩展某人的评论，您可以创建 root state 是所有其他应用程序状态的父级(根级的子级)。 root状态解析所有用户数据，然后您可以将用户数据注入(inject)任何 Controller 或将其存储在服务中。

$stateProvider
  .state('root', {
    url: '',
    abstract: true,
    template: '',     // some template with header, content, footer ui-views
    resolve: {
      // fetch user data
    }
  })
  .state('root.login', {
    url: '/login',
    views: {
      'header': {
        templateUrl: 'views/header.html',
        controller: 'HeaderCtrl'
      },
      'content': {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      },
      'footer': {
        templateUrl: 'views/footer.html',
      }
    }
  })
  .state('root.main', {
    url: '/main',
    views: {
      'content@': {
        template: '',
        controller: function($state, authService) {
          if(!authService.isAuthenticated()) {
            $state.go('login');
          }
          if(authService.isStudent()) {
            $state.go('student');
          }
          if(authService.isAdmin()) {
            $state.go('admin');
          }
        }
      }
    }
  })

  ...  // your other states

关键是您所有的应用程序状态都必须是您的 root 的子级状态即root.<name>在您的州声明中。这将确保在您的用户数据可用之前没有其他 Controller 启动。有关 resolve 的更多信息以及如何使用它 read here .另外，parent and child states .