AngularJS 在应用程序启动时加载配置 [英] AngularJS load config on app start

问题描述

我需要在我的 AngularJS 应用程序启动时加载一个配置文件(JSON 格式)，以便加载将在所有 api 调用中使用的几个参数.所以我想知道是否可以在 AngularJS 中这样做，如果可以，我将在哪里/何时加载配置文件?

I need to load a config file (JSON format) upon my AngularJS app startup in order to load few parameters which will be used in all api calls. So I was wondering if it is possible to do so in AngularJS and if yes where / when I shall be loading the config file?

注意:- 我需要在服务中保存配置文件参数，所以我需要在加载任何控制器之前加载 json 文件内容，但服务单元可用- 在我的案例中，必须使用外部 json 文件，因为应用客户端需要能够轻松地从外部文件更新应用配置，而无需查看应用源.

Note: - I will need to save the config file parameters in a service, so I will need to load the json file content before any controller is loaded but with service units available - Using an external json file is a must in my case here as the app client need to be able to update the app configuration easily from external file without the need to go through the app sources.

推荐答案

已编辑

听起来您要做的是使用参数配置服务.为了异步加载外部配置文件，您必须自己在数据加载完成回调中引导 Angular 应用程序，而不是使用自动 boostrapping.

It sounds like what you are trying to do is configure a service with parameters. In order to load the external config file asynchronously, you will have to bootstrap the angular application yourself inside of a data load complete callback instead of using the automatic boostrapping.

考虑这个服务定义的例子，它实际上没有定义服务 URL(类似于 contact-service.js):

Consider this example for a service definition that does not actually have the service URL defined (this would be something like contact-service.js):

angular.module('myApp').provider('contactsService', function () {

    var options = {
        svcUrl: null,
        apiKey: null,
    };

    this.config = function (opt) {
        angular.extend(options, opt);
    };

    this.$get = ['$http', function ($http) {

        if(!options.svcUrl || !options.apiKey) {
            throw new Error('Service URL and API Key must be configured.');
        }

        function onContactsLoadComplete(data) {
            svc.contacts = data.contacts;
            svc.isAdmin = data.isAdmin || false;
        }

        var svc =  {
            isAdmin: false,
            contacts: null,
            loadData: function () {
                return $http.get(options.svcUrl).success(onContactsLoadComplete);
            }
        };

        return svc;
    }];
});

然后，在文档准备好后，您将调用加载您的配置文件(在本例中，使用 jQuery).在回调中，您将使用加载的 json 数据执行 angular app .config.运行 .config 后，您将手动引导应用程序.非常重要:如果您正在使用此方法，请不要使用 ng-app 指令，否则 angular 将自行引导有关详细信息，请参阅此网址:

Then, on document ready, you would make a call to load your config file (in this case, using jQuery). In the callback, you would then do your angular app .config using the loaded json data. After running the .config, you would then manually bootstrap the application. Very Important: do not use the ng-app directive if you are using this method or angular will bootstrap itself See this url for more details:

http://docs.angularjs.org/guide/bootstrap

像这样:

angular.element(document).ready(function () {
    $.get('/js/config/myconfig.json', function (data) {

        angular.module('myApp').config(['contactsServiceProvider', function (contactsServiceProvider) {
            contactsServiceProvider.config({
                svcUrl: data.svcUrl,
                apiKey: data.apiKey
            });
        }]);

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

更新:这是一个 JSFiddle 示例:http://jsfiddle.net/e8tEX/

UPDATE: Here is a JSFiddle example: http://jsfiddle.net/e8tEX/

这篇关于AngularJS 在应用程序启动时加载配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！