0

我正在开发一个角度应用程序，这个应用程序有大约 10 个可配置属性（取决于环境和客户端）。

我在 json 配置文件中有这些属性，但这真的很麻烦：每个 env/company 必须有特定的构建。所以我想在应用加载时从后端检索这些属性。

所以为了做到这一点，我创建了一个 Provider

var app = angular.module('myApp', [...]);
app.provider('environment', function() {
    var self = this;
    self.environment;

    self.loadEnvironment = function (configuration, $http, $q) {
        var def = $q.defer();
        $http(...)
        .success(function (data) {
            self.environment = Environment.build(...);
            def.resolve(self.environment);
        }).error(function (err) {
            ...
        });
        return def.promise;
    };

    self.$get = function(configuration, $http, $q) {
        if (!_.isUndefined(self.environment)) {
            return $q.resolve(self.environment);
        }
        return self.loadEnvironment(configuration, $http, $q);
    };
}
app.config(... 'environmentProvider', function(... environment) {
    ...
    //The problem here is that I can't do environment.then(...) or something similar... 
    //Environment does exists though, with the available functions... 
}

如何正确使用执行休息调用以填充其环境变量的此提供程序？

提前致谢！

4

1 回答 1

1

这是探索 angularjs 功能的绝佳场景。

假设您确实需要在应用程序加载之前加载环境数据，您可以使用角度工具加载环境，然后在应用程序引导之前声明 avalue或 a来存储您的环境配置。constant

因此，ng-app您必须使用angular.bootstrap手动引导它，而不是使用它来启动您的应用程序。

观察：一旦您手动引导应用程序，您就不能使用ng-app，否则您的应用程序将使用角度默认系统加载，而不考虑您的环境加载。此外，请确保在声明所有模块组件后引导您的应用程序；即声明所有控制器、服务、指令等，然后，您调用angular.bootstrap

下面的代码实现了前面描述的解决方案：

(function() {
    var App = angular.module("myApp", []);

    // it will return a promisse of the $http request
    function loadEnvironment () {
        // loading angular injector to retrieve the $http service
        var ngInjector = angular.injector(["ng"]);
        var $http = ngInjector.get("$http");

        return $http.get("/environment-x.json").then(function(response) {
            // it could be a value as well
            App.constant("environment ", response.data);
        }, function(err) {
            console.error("Error loading the application environment.", err)
        });
    }

    // manually bootstrap the angularjs app in the root document
    function bootstrapApplication() {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ["myApp"]);
        });
    }

    // load the environment and declare it to the app
    // so then bootstraps the app starting the application
    loadEnvironment().then(bootstrapApplication);
}());
于 2016-10-18T13:13:34.730 回答