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

问题描述

我正在开发一个 angular 应用程序，这个应用程序有大约 10 个可配置的属性(取决于环境和客户端).

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

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

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

如何正确使用这个执行 rest 调用以填充其环境变量的 Provider?

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.

假设你真的需要在app加载前加载环境数据，你可以使用angular工具加载环境，然后声明一个value或者一个constant来存储在应用程序引导之前您的环境配置.

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 默认系统加载而不考虑您的环境加载.另外，请确保在声明所有模块组件后引导您的应用程序；即声明所有控制器、服务、指令等，然后调用 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屋！