While building any apps its important for a developer to switch between the environments.
below is a simple way i felt for switching environment in angular 2/4 or ionic 2/3.
its easy with a provider and associative arrays. below is an example:
create a provider called environments and use the below:
_envs = {
dev:{
baseURL:"https://somedev.exaple.net/api/mobile",
config:{
serviceRefName:"/demo1",
serviceRefname2:"/demo2",
serviceRefname3:"/demo3",
//...
//...
}
}
qa:{
baseURL:"https://someqa.exaple.net/api/mobile",
config:{
serviceRefName:"/demo1",
serviceRefname2:"/demo2",
serviceRefname3:"/demo3",
//...
//...
}
},
prod:{
baseURL:"https://someprod.exaple.net/api/mobile",
config:{
serviceRefName:"/demo1",
serviceRefname2:"/demo2",
serviceRefname3:"/demo3",
//...
//...
}
}
};
_env={};
_selectedEnv = "qa";
//add this line in constructor
this._env = this._envs[this._selectedEnv];
//add this method to the environment provider
getURL(configUrl){
console.log("configUrl Sec : "+configUrl);
//console.log("this._env="+JSON.stringify(this._env));
console.log("URL="+this._env["baseURL"]+this._env["config"][configUrl]);
return this._env["baseURL"]+this._env["config"][configUrl];
}
In components, where you want to call a service,
whenever you need to change, simple change the _selectEnv in you Environment provider.
For ex:
_selectedEnv = "prod";
It will take the service names from prod obj of _env. this way with a very simple step, you can switch environment in angular.
Note: It has nothing much specific to angular. this logic can be used in any programming language with respective object constructs.
below is a simple way i felt for switching environment in angular 2/4 or ionic 2/3.
its easy with a provider and associative arrays. below is an example:
create a provider called environments and use the below:
_envs = {
dev:{
baseURL:"https://somedev.exaple.net/api/mobile",
config:{
serviceRefName:"/demo1",
serviceRefname2:"/demo2",
serviceRefname3:"/demo3",
//...
//...
}
}
qa:{
baseURL:"https://someqa.exaple.net/api/mobile",
config:{
serviceRefName:"/demo1",
serviceRefname2:"/demo2",
serviceRefname3:"/demo3",
//...
//...
}
},
prod:{
baseURL:"https://someprod.exaple.net/api/mobile",
config:{
serviceRefName:"/demo1",
serviceRefname2:"/demo2",
serviceRefname3:"/demo3",
//...
//...
}
}
};
_env={};
_selectedEnv = "qa";
//add this line in constructor
this._env = this._envs[this._selectedEnv];
//add this method to the environment provider
getURL(configUrl){
console.log("configUrl Sec : "+configUrl);
//console.log("this._env="+JSON.stringify(this._env));
console.log("URL="+this._env["baseURL"]+this._env["config"][configUrl]);
return this._env["baseURL"]+this._env["config"][configUrl];
}
In components, where you want to call a service,
- add environment provider dependency
- use this: this.environment.getURL("YourSericeName")
whenever you need to change, simple change the _selectEnv in you Environment provider.
For ex:
_selectedEnv = "prod";
It will take the service names from prod obj of _env. this way with a very simple step, you can switch environment in angular.
Note: It has nothing much specific to angular. this logic can be used in any programming language with respective object constructs.
