需求

近期在用Angularjs做点小东西。在使用的过程中遇到如下的需求。 我想把运行环境分成开发(dev),测试(test), 线上(prod)这三个环境。在这三个不同的环境中有一些配置行为是不一样的。比如获取数据的地址了,登陆的方法等等。

解题思路

由于有点Spring的使用经验,第一反应就是想动态替换Service。

一般情况下在controller中注入服务,采用如下形式。

angular.moule('someMoule',[])
.controller('someController',function (someService){
    someService.doSomething();
}

如何动态的换掉someService呢?经过一番折腾以后,没有找到了合适的方法。

所以穷极生变以后想到采用代理的方式解决这个问题。 于是有了下面的解决方法。

解法

最终的解法是采用代理的方式。具体的结构如下:

angular.moule('serviceMoule',[])
.factory('someService',function (devSomeService,betaSomeService, prodSomeService){

    if(env === "dev"){
        return devSomeService;
    }
    if(env === "beta"){
        return betaSomeService;
    }
    if(env === "prod"){
        return prodSomeService;
    }


})
.factory('devSomeService', function(){
    var doSomething = function(){
        console.log(" i am in dev env");
    }
    return {
        doSomething: doSomething
    }
})
.factory('betaSomeService', function(){
    var doSomething = function(){
        console.log(" i am in dev env");
    }
    return {
        doSomething: doSomething
    }
})
.factory('prodSomeService', function(){
    var doSomething = function(){
        console.log(" i am in dev env");
    }

    return {
        doSomething: doSomething
    }
})

这样使用的时候直接注入someService 这个服务。最终这个服务将会根据不同的开关来代理devSomeService, betaSomeService, prodSomeService 其中的一个。

这个方法有点土,不过可以工作。如果你有什么更好的办法,欢迎指教! 谢谢!