javascript - AngularJS 等待 $http 请求

Question

我有一个使用 ui-router 的 AnuglarJS 应用程序，并且有一个 http 请求，它告诉用户有关用户的信息，例如登录状态、访问权限、语言、用户组、他可以访问哪些 Controller 等等。它还定义了某些 Controller 的行为，我的 ui-router 状态依赖于它。

$http.get("/user").then(function(response) {
    UserService.userData = response.data.userData,
});

现在我想延迟所有 ui-router 状态更改并延迟加载服务(如果可能)。并且只允许在请求返回后在 Angular 应用程序中发生任何事情。因此，我可以将用户重定向到登录页面或加载正确的模板，或者根据收到的信息在应用程序内执行我想要的任何操作。

我希望这适用于多个路由，并可能添加异常(exception)。

所以我想要实现的目标是延迟 angular.js 应用程序的加载，等待 http 请求完成然后继续应用程序。

Answer 1

每当我的应用程序依赖于预加载的数据(无论是用户详细信息、权限还是其他任何数据)时，我都会将所有应用程序路由嵌套在单个根路由下，并使用 resolve 选项它。

例如，下面是一段代码，用于加载区域设置的用户设置，然后初始化我的本地化服务，该服务将继续翻译整个应用程序:

routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routeConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider
        .otherwise("/");

    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            template: '<div navbar></div><div ui-view class="container"></div>',
            resolve: {
                dependencies: globalAppDependencies
            }
        })
        .state('root.index', {
            url: '/',
            template: '<div main-page></div>'
        })
        .state('root.showcase', {
            url: '/showcase',
            template: '<div showcase-page></div>'
        });

    globalAppDependencies.$inject = ['userRepository', 'myLocalization'];
    function globalAppDependencies(userRepository, myLocalization) {
        return userRepository.login()
            .then(function (user) {
                return myLocalization.setLocale(user.locale);
            });
    }
}

注意:除了 html 模板中的一个之外，root 路由模板还包含一个 ui-view。这是必需的，因为所有应用程序 View 都嵌套在 root 下面。

我的应用程序模板如下所示:

<div ng-app="my-application">
    <div application-loader></div>
    <ui-view></ui-view>
</div>

application-loader 用于在我们获取用户设置和本地化文件时播放动画。