手动引导角度与http调用 [英] manual bootstrap angular with http calls

问题描述

我有一个返回动态配置数据的WebAPI服务.在我的角度应用程序加载之前，我想调用该服务并将配置数据加载到角度. JSFiddle .我的问题是，在控制台中看到字符串测试后，我看不到其他任何内容写入控制台.如何使 test 2 和 wierd wierd 出现在控制台中

I have a WebAPI service that returns dynamic configuration data. Before my angular app loads I would like to call that service and load the config data into angular. JSFiddle of my attempt at doing that. My question is, after seeing the string test in the console I am seeing nothing else written into the console. How do I get test 2 and wierd wierd to appear into the console

var app = angular.module('app', [])

app.provider("ConfigService", function () {
    var self = this;
    self.Settings = {};

    self.config = function (data) {
            console.log(data);
    };
    this.$get =
        function($http) {
            return self;
        };
});


angular.element(document).ready(function($http) {
        console.log('test')
        angular.module('app').config([
            'ConfigServiceProvider', 
            function(configService) {
                console.log('test 2')
                $http.get('http://www.google.com').then(function(result) {
                    console.log('wierd wierd')

                    configService.config(result);

                    angular.bootstrap(document, ['app']);
                })
            }
        ]);
    });

EDIT

EDIT

为回答这个问题，为什么我不在app.run阶段运行它.在app.run阶段，应用程序仍在初始化，有时会在我的配置部分完成之前加载.我希望100％确保在任何应用程序之前先加载我的配置部分.

In response to the question, why I do not run this in app.run phase instead. In the app.run phase the app is still initializing and sometimes it loads up prior to my configuration section being completed. I wanted 100% guarantee that my config section is loaded first before any of the app is.

推荐答案

请使用@StevenWexler的回答: https://stackoverflow.com/a/37599857/5670592 .更为正确，它使用了漂亮的角度特征($ inject)，并将在引导周期开始之前提供配置.

Please use @StevenWexler 's answer: https://stackoverflow.com/a/37599857/5670592. It is much more correct, uses a nifty angular feature ($inject), and will provide configuration before the beginning of the bootstrap cycle.

我已根据您对阻止执行直到API调用完成的限制更新了应用程序.

I have updated the application with your constraints regarding blocking execution until API call is complete.

尝试一下: https://jsfiddle.net/6svnemu8/3/

我将代码移至module.run(...)块.这是所有提供程序都可用的地方，您可以使用$ http和ConfigService.我将bootstrap调用保留在document ready函数中，并且还添加了$ q服务，以便您可以阻止应用程序的执行，直到API调用完成为止.您可以通过在控制台中查看测试输出的顺序来验证这一点:

I moved the code to the module.run(...) block. This is where all providers are available and you can use $http and your ConfigService. I kept the bootstrap call in the document ready function, and I also added the $q service so you can block execution of the application until the API call is complete. You can verify this by looking at the order of the test outputs in the console:

angular.module('app').run([
'ConfigService', '$http', '$q', 
function(configService, $http, $q) {
  console.log('test 2');
  var deferred = $q.defer();
  $http.get('/6svnemu8/2/').then(function(result) {
    deferred.resolve(result);
  }, function(result){
    deferred.reject(result);
  });
  console.log("test 3");
  deferred.promise.then(function(result){
     console.log('wierd wierd');

    configService.config(result);

  }, function(result){
    console.log("call failed.");
  });
 }
]);

这篇关于手动引导角度与http调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！