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

问题描述

我要以加载，这将在所有API调用中使用一些参数在我的AngularJS应用程序启动时加载配置文件（JSON格式）。所以，我想知道是否有可能在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.

推荐答案

EDITED

这听起来像你正在尝试做的是配置一个带参数的服务。为了异步加载外部配置文件，您将不得不自己引导的角度应用程序的数据加载完整回调的内部采用了自动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（这将是类似接触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）。在回调中，你会那么做你的角度应用的.config使用加载的JSON数据。运行的.config后，你会再手工引导应用程序。 非常重要：如果您使用此方法，或者将角自举查看此网址了解更多详情请不要使用NG-应用指令：

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/

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