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

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

目前，我在angular模块的

run（）

块中编写了初始化代码。初始化涉及获取用户数据的异步http请求，应用程序的其余部分依赖于用户数据。 在路由器开始初始化控制器之前，如何确保http请求得到解决

我正在使用ui路由器

初始化包括以下内容： 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',
          }
        }
      })
}])

---

展开某人的评论，您可以创建一个

root

状态，该状态是您其他所有应用程序状态的父级（根的子级）。

root

状态解析所有用户数据，然后您可以将用户数据注入任何控制器或将其存储在服务中

$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.

。这将确保在用户数据可用之前不会启动其他控制器。有关

解析
和如何使用它的更多信息。另外，.
查看
resolve
属性。您可以在根状态上定义它谢谢@NewDev，您能给我一些定义根状态的指南吗？目前，我将resolve属性添加到
main
状态，但是如果我理解正确，这不是根状态，对吗？--我是ui路由器的新手——也是@NewDev，您能解释一下如何将参数传递给
resolve
属性吗？例如，我想用匹配的
学生id
显示学生信息。谢谢你。@邵浩林如果你还有问题，最好换一个新的单独提问question@klode，我的意思是“root”，它是所有其他状态（需要用户id）的派生状态，因为子状态继承父状态的解析值。