Angular：在配置/运行之前加载环境属性 [英] Angular: load environment properties before config/run

问题描述

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

I'm developing a angular app, and this app has about a 10 configurable properties (depending on the environment and client).

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

I had those properties in json config files, but this is really troublesome: there must be specific builds per env/company. So I would like to retrieve those properties once from the backend on app load.

所以为了做到这一点，我创建了一个提供者

So in order to do this I created a 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... 
}

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

How to properly work with this Provider that executes a rest call to populate his environment variable?

提前感谢

推荐答案

这是一个很好的场景来探索angularjs的功能。

This is an excelent scenario to explore angularjs features.

假设您真的需要在应用加载之前加载环境数据，您可以使用角度工具加载环境，然后在应用程序引导之前声明一个值或常量来存储您的环境配置。

Assuming that you really need the environment data loaded before the app loads, you can use angular tools to load the environment and then declare a value or a constant to store your environment configs before the app bootstraps.

所以，而不是使用 ng-app 启动你的应用程序，你必须使用 angular.bootstrap 来手动引导。

So, instead of using ng-app to start your app, you must use angular.bootstrap to bootstrap it manually.

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

Observations: You mustn't use ng-app once you are bootstrapping the app manually, otherwise your app will load with the angular default system without respecting your environment loading. Also, make sure to bootstrap your application after declare all module components; i.e. declare all controllers, servieces, directives, etc. so then, you call angular.bootstrap

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

The below code implements the solution described previously:

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

这篇关于Angular：在配置/运行之前加载环境属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！