$ HTTP之前AngularJS应用程序初始化请求？ [英] $http request before AngularJS app initialises?

问题描述

为了确定是否用户会话已验证，我需要一个$ http请求到服务器装在第一路线之前。每个路由被加载之前，认证服务检查用户的状态，并通过该路线所需的访问级别，并且如果用户没有被认证为这条路线，它重定向到登录页面。当应用程序第一次加载但是，它没有用户的知识，所以即使他们有一个认证会话将始终重定向到登录页面。因此，要解决这个问题，我试图让该服务器为用户地位的应用程序初始化的一部分的请求。问题是，明明$ HTTP调用是异步的，所以我怎么会停止运行应用程序直到请求完成？

我是很新的总体角度和前端开发，所以我的问题可能的JavaScript的一个误区，而不是角。

解决方案

您可以通过在routingProvider使用解析实现这一目标。

这可以让你等待控制器将启动前解决一些承诺。

从文档报价：

  

决心 - {对象=} - 依赖的一个可选的映射应该被注射到控制器。如果这些依赖的是承诺，路由器将等待他们全部得到解决或控制器初始化之前一个被拒绝。如果所有的承诺都顺利解决了，解决了承诺的价值观注入和$ routeChangeSuccess事件。

简单的例子

 的app.config（['$ routeProvider'，函数（$ routeProvider）{
    $ routeProvider。
        当（'/'，{templateUrl：home.html做为'，控制器：'MyCtrl，解决：{
            myVar的：功能（$ Q $ HTTP）{
                变种递延= $ q.defer（）;                    //让您的HTTP请求，在这里和解决其承诺                     $ http.get（'http://example.com/foobar'）
                         。然后（功能（结果）{
                             deffered.resolve（结果）;
                          }）                返回deffered.promise;
            }
        }}）。
        否则（{redirectTo：'/'}）;
}]）;
 

myVar的将被注入到控制器，包含承诺的数据。

避免额外的DI参数

您也可以通过返回你要注入反正服务避免了额外的DI参数：

 的app.config（['$ routeProvider'，函数（$ routeProvider）{
        $ routeProvider。
            当（'/'，{templateUrl：home.html做为'，控制器：'MyCtrl，解决：{
                为myService：函数（$ Q $ HTTP，为myService）{
                  变种递延= $ q.defer（）;                      / *让你的HTTP请求在这里
                      *那么，解决您的服务递延的承诺。
                      * /                  deffered.resolve（为myService）                  返回deffered.promise;
                }
            }}）。
            否则（{redirectTo：'/'}）;
    }]）;
 

显然，你将不得不做这样的事情，当结果从您的要求的任何地方保存在共享服务。

---

看一看 角文档/ routeProvider

我已经学会了大部分从那个家伙的东西在 egghead.io

In order to determine if a user's session is authenticated, I need to make a $http request to the server before the first route is loaded. Before each route is loaded, an authentication service checks the status of the user and the access level required by the route, and if the user isn't authenticated for that route, it redirects to a login page. When the app is first loaded however, it has no knowledge of the user, so even if they have an authenticated session it will always redirect to the login page. So to fix this I'm trying to make a request to the server for the users status as a part of the app initialisation. The issue is that obviously $http calls are asynchronous, so how would I stop the app running until the request has finished?

I'm very new to Angular and front-end development in general, so my issue maybe a misunderstanding of javascript rather than of Angular.

解决方案

You could accomplish that by using resolve in your routingProvider.

This allows you to wait for some promises to be resolved before the controller will be initiated.

Quote from the docs:

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.

Simple example

    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 will then be injected to your controller, containing the promise data.

Avoiding additional DI parameter

You could also avoid the additional DI parameter by returning a service you were going to inject anyways:

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: '/'});
    }]);

Obviously, you will have to store the result from your request anywhere in a shared service when doing things like that.

---

Have a look at Angular Docs / routeProvider

I have learned most of that stuff from that guy at egghead.io

这篇关于$ HTTP之前AngularJS应用程序初始化请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！