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会自行引导有关详细信息，请参阅此网址：

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;
    ...
})

Answer 3

您可以将常量用于以下内容：

angular.module('myApp', [])

// constants work
//.constant('API_BASE', 'http://localhost:3000/')
.constant('API_BASE', 'http://myapp.production.com/')
//or you can use services
.service('urls',function(productName){ this.apiUrl = API_BASE;})

//Controller calling
.controller('MainController',function($scope,urls, API_BASE) {
     $scope.api_base = urls.apiUrl; // or API_BASE
});

//在html页面中调用它 {{api_base}}

还有其他几个选项，包括.value和.config，但它们都有其局限性。如果您需要联系服务提供商进行一些初始配置，.config会很棒。除了可以使用不同类型的值之外，.value类似于常量。

https://stackoverflow.com/a/13015756/580487

Answer 4

使用常数解决。与提供程序一样，您可以在.config阶段配置它。像凯斯莫里斯这样的其他所有人都曾写过。所以实际的代码看起来像这样：

(function () {
var appConfig = {

};

angular.module('myApp').constant('appConfig', appConfig);
})();

然后在app.bootstrap.js

(function () {

angular.element(document).ready(function () {

    function handleBootstrapError(errMsg, e) {
        console.error("bootstrapping error: " + errMsg, e);
    }

    $.getJSON('./config.json', function (dataApp) {
        angular.module('myApp').config(function (appConfig) {
            $.extend(true, appConfig, dataApp);
            console.log(appConfig);
        });

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

    }).fail(function (e) {
        handleBootstrapError("fail to load config.json", e);
    });

});
})();

Answer 5

对于json配置文件，Jaco Pretorius博客上有一个练习示例。基本上：

angular.module('plunker', []);
angular.module('plunker').provider('configuration', function() {
  let configurationData;

  this.initialize = (data) => {
    configurationData = data;
  };

  this.$get = () => {
    return configurationData;
  };
});

angular.module('plunker').controller('MainCtrl', ($scope, configuration) => {
  $scope.externalServiceEnabled = configuration.external_service_enabled;
  $scope.externalServiceApiKey = configuration.external_service_api_key;
});

angular.element(document).ready(() => {
  $.get('server_configuration.json', (response) => {
    angular.module('plunker').config((configurationProvider) => {
      configurationProvider.initialize(response);
    });

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

Plunker：http://plnkr.co/edit/9QB6BqPkxprznIS1OMdd?p=preview

参考：https://jacopretorius.net/2016/09/loading-configuration-data-on-startup-with-angular.html，最后一次访问于13/03/2018

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

5 个答案: