应用程序启动时AngularJS加载配置

Question

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

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

Answer 1

EDITED

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

考虑这个示例,实际上没有定义服务URL的服务定义(这可能是这样的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会自行引导自己查看此URL以获取更多详细信息:

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/

Answer 2

我无法得到我的基思莫里斯工作的方法.

所以我创建了一个config.js文件,并在所有的角度文件之前将它包含在index.html中

config.js

var configData = {
    url:"http://api.mydomain-staging.com",
    foo:"bar"
}

的index.html

...
<script type="text/javascript" src="config.js"></script>
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

然后在我的run函数中,我将配置变量设置为$ rootScope

.run( function run($rootScope) {
    $rootScope.url = configData.url;
    $rootScope.foo = configData.foo;
    ...
})