Question

假设我的应用程序上有一条路由，例如/config.json，它将返回一个包含用户货币，用户区域设置等设置的对象。

我想尽快预加载所有这些值，而且只有一次，同时应用程序正在运行。

我认为app.config()部分会很好，但我当时无法访问$ http服务。你会怎么做到这一点？

修改

我正在添加此尝试以提供更多上下文。

module.factory("test", function ($http) {

    // This is the service. It depends on the
    // settings, which must be read with a HTTP GET.
    return service = {
        settings: null,
        get: function(value) {
            return this.settings[ value ];
        }
    };

});

我试图返回一个被拒绝的服务实例，即

return $http.get('/config').then(function(response){
    service.settings = response.data;
    return service;
});

但显然，不允许退回延期服务。

Answer 1

我可以想到一些方法来处理这个问题。

如果您使用像php这样的东西来编写索引页面，您可以在浏览器处理页面之前将该文件的内容写入索引页面。

<?php 
   //load the contents of the config file
   $configContents = file_get_contents('./config.json');
?>
<html>
  <head>
    <!--all your script and css includes here-->
    <script>
       var configJson = <?php echo $configContents; ?>
       module.constant('config', configJson );
    </script>
    <!-- rest of your page... -->

基于this post，看起来您可以使用注入器来获取服务，然后您可以在加载所需数据后手动引导应用程序（基于this documentation）。（我没有测试过这个...）

angular.injector(['ng']).get('$http').get('./config.json').then(function(response){
    module.constant('config', response.data);

    //manually bootstrap your application now that you have gotten your data
    angular.element(document).ready(function() {
        angular.bootstrap(document, ['myApp']);
    });
});

Answer 2

尝试使用app.run()方法而不是配置，您可以注入

更新：尝试使用带缓存的提供程序：

app.provider('configurationsProvider', function() {

    this.$get = function($http) {
        if (!this.configurationsPromise){
            this.configurationsPromise = $http.get('/ConfigUrl');
        }

        return this.configurationsPromise;
    };
});

app.service('someService', function(configurations){
    configuration.then(function(conf){
    });
});

UPDATE2：

任何方式，你需要假设设置加载可能需要一些时间......所以你可以采用这样的方法：

app.value('config', { isLoading: true })
   .service('someService', ['config', function('config') { 
        ...
        this.doSomething = function() {
             var someConfig = config.configValue;
        }
    }]);
app.run(['config', '$http', function(config, $http){
    $http.get('configUrl').then(function(conf) {
        _.defaults(config, conf); // or some other way to clone all the properties
        config.isLoading = false;
    });
});

这个想法是当设置加载时应用程序尚未就绪但您希望用户看到某些内容，因此当设置isLoading为true时，显示一些加载栏，当它变为false时显示应用程序... 使用ng-if绑定到isLoading以在准备好时呈现所有应用程序内容，并在未准备好时呈现微调器

Answer 3

是否可以从控制器中访问此json文件的内容？如果是这样，我建议创建一个api，以便在一个服务中访问它，并将其传递给需要它的每个控制器。

接下来是（你何时需要它）的问题。如果它是可以异步加载的东西，那么在服务的初始化中使用$ http.get方法。如果需要在应用程序或控制器加载之前加载它，那么可以考虑将其作为页面的一部分加载并通过全局范围访问它。

<script src="config.json"></script>

异步方法是首选方法，您应该在开始将其放入全局范围之前尝试使用它。

更新服务应该是什么样子

.service('ConfigService', function($http) {
    var ConfigService = {};
    ConfigService.config = {};

    ConfigService.load = function() {
        $http.get('/config').then(function(response){
            this.config = response.data
        });
    };
    ConfigService.load();

    return ConfigService;
});

然后在您的控制器中，您将访问ConfigService.config;

AngularJS - 预加载应用程序设置

3 个答案: