Question

我一直在做一个非常重要的事情＆＃34;角度JS应用程序，我对自己和这个框架没有找到真正可行的解决方案，对以下问题有点失望。

AngularJS应该有一种机制，在运行之前，应该能够执行HTTP请求以获取数据并将其设置为提供者。这对于获取路由权限，用户数据以及实际引导应用程序之前所需的内容非常有用。

现在，我看到的文章描述了如何在角度之前加载jQuery，在jQuery的ajax调用之后手动引导角度 - ＆gt;并将收到的数据注入Angular。

应该有一个可用于验证根的中间件。一个钩子，在显示任何根之前，您可以进行检查，例如查看用户是否经过身份验证，令牌是否存储在会话存储中等等。

目前，我已经看到过使用ui-router和$rootScope.$on('$stateChangeStart')事件的尝试。

这＆＃34;有点＆＃34;但它不优雅，不开箱即用，如果你不设置这些设置，它会触发无限循环。

此外， ui-router 使用了解析，它们在视图编译之前获取资源非常有用。但是，请注意，你不能获得＆＃34; $ state＆＃34;来自解析功能。因此，如果您请求的数据不是您想要的，则您无法重定向到另一个视图。
Angular使得为状态加载控制器和视图变得非常复杂，这取决于一些数据 - ergo。用户角色。这不是真正的方法，但在某些情况下，直接从路由器决定为哪条路径加载哪个控制器并且不在视图中使用模板将是有用的。

这篇文章背后的原因是看你们如何应对这些问题。

我希望你证明我错了，并且有更好的方法可以做到这一点，并且通过代码示例，我很有兴趣了解它们。

Answer 1

听起来你想要像Angular UI's UI Router这样的东西。

您想要的主要功能是resolve功能。这使您可以在控制器上设置promise-based依赖项。因此，在转到实际的应用程序之前，请确保您已经解析了身份验证设置，数据等。

Answer 2

这会有用吗？

这是手动引导程序，请确保不要在HTML或BODY标记中声明ng-app，这会自动引导。

创建两个模块。第一个模块自动初始化，加载您需要的数据，最后引导您的第二个模块，即真正的应用程序。

var configuarationData = null;
var mainApplication = angular.module('myApp', [dependencies]);

/**
 * This function will start up the application and cause all views to be loaded
 */
mainApplication.config(['$routeProvider', '$locationProvider', '$httpProvider', 
    function($routeProvider, $locationProvider, $httpProvider) {

        // do some stuff here regarding configuration

    }
]).run(['$rootScope', '$templateCache', '$http', ,
    function($rootScope, $templateCache, $http) {
        /* We need this run method to make sure certain global services are loaded prior to other controllers/services */
    console.log('configurationData available?', configurationData);
});

var configApplication = angular.module('theConfigurator',[dependencies]);

configApplication.run(function('$http'){
     $http.get('load some data').then(function(success){
          // bootstrap the main application
          configurationData = success.data;
          angular.bootstrap(document, ['myApp']);
     }, function(reasonForFailure){
         console.log('no config data');
     });
});

Answer 3

请参阅此问题，以获得对第一个问题的可能答案：

use $http inside custom provider in app config, angular.js

如果确实需要在配置阶段完成之前进行HTTP调用，那么不，Angular无法执行此操作，因为配置阶段是同步执行的，因此您的http调用将在完成之后完成配置已完成。

您是否可以在应用加载之前在服务器端进行这些配置调用，然后在初始页面加载时将其传递下去？

<script>window.initialData = { ... };</script>

var initialData = angular.fromJson($window.initialData);

否则，您将无法使用非Angular http调用和手动引导您的应用程序。

你如何解决AngularJS中的以下陷阱？

3 个答案: