javascript - AngularJS 应用程序初始化之前的 $http 请求？

Question

为了确定用户的 session 是否经过身份验证，我需要在加载第一个路由之前向服务器发出 $http 请求。在加载每个路由之前，身份验证服务会检查用户的状态和路由所需的访问级别，如果用户未通过该路由的身份验证，它会重定向到登录页面。然而，当应用程序第一次加载时，它不知道用户，所以即使他们有一个经过身份验证的 session ，它也会总是重定向到登录页面。因此，为了解决这个问题，我正在尝试向服务器请求用户状态作为应用程序初始化的一部分。问题是显然 $http 调用是异步的，那么我将如何停止应用程序运行直到请求完成？

一般来说，我对 Angular 和前端开发非常陌生，所以我的问题可能是对 javascript 而不是 Angular 的误解。

Answer 1

你可以通过使用 resolve 来完成。在您的路由提供程序中。

这允许您在启动 Controller 之前等待一些 promise 得到解决。

从文档中引用:

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired.

简单的例子

    app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
            myVar: function($q,$http){
                var deffered = $q.defer();

                    // make your http request here and resolve its promise

                     $http.get('http://example.com/foobar')
                         .then(function(result){
                             deffered.resolve(result);
                          })

                return deffered.promise;
            }
        }}).
        otherwise({redirectTo: '/'});
}]);

然后 myVar 将被注入(inject)到您的 Controller 中，其中包含 promise 数据。

避免额外的 DI 参数

您还可以通过返回您将要注入(inject)的服务来避免额外的 DI 参数:

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
                myService: function($q,$http,myService){
                  var deffered = $q.defer();

                      /*  make your http request here
                      *   then, resolve the deffered's promise with your service.
                      */

                  deffered.resolve(myService),

                  return deffered.promise;
                }
            }}).
            otherwise({redirectTo: '/'});
    }]);

显然，在执行此类操作时，您必须将请求的结果存储在共享服务的任何位置。

看看 Angular Docs / routeProvider

我从 egghead.io 的那个人那里学到了大部分东西。