Geek Answers Handbook

Angular js read environment variables

I am trying to read environment variables in http get calls

$http.get('http://' + $location.host() + ':8080/api')

I want to be able to read the environment variable and use it as the http rest server in the above API call, as shown below.

  $http.get('environmental_variable ':8080/api')

Note. I do not know the environment variable until execution. Therefore, I cannot make a difference before using it as a constant

+6
source share
3 answers

There are no variables in the browser such as environment variables.

The $location service will always receive your current URL. I assume your API may live on a different host.

You can simulate environment variables by storing the configuration in an Angular constant.

 app.constant('env', { API_URL: "http://someurl.com:8080/api" });

Then you can enter this constant into your other providers.

 app.controller('MyController', function($http, env) { $http.get(env.API_URL); });

Here's a decent article on best practices with constants . The article does not use constants, since it is useful to be able to change the configuration without the need to rebuild the code.

I usually process this to move all instance configuration data to the config.json file and then load it with $http when I load my application.

For example, you may have a configuration file such as this.

 { apiUrl: "http://someurl.com:8080/api" }

Then the Angular service loads.

 app.service('Config', function($http) { return function() { return $http.get('config.json'); }; });

Then other services can receive a promise that will reveal the configuration when it is resolved.

 app.controller('MyController', function($http, Config) { Config() .then(function(config) { $http.get(config.apiUrl); }); });
+4
source

There are many examples showing how you can put your settings in different files or constants. Most of them work, but lacking in meaning.

Your configuration settings are not part of your code!

In addition to the Hello World examples, the deployment must be performed by the CI / CD server, and this should be responsible for setting configuration parameters. This has several advantages:

1) You deploy the same code in different environments. If you are deploying code in a test environment, then you want to deploy the same code in a production environment. If your servers need to rebuild the code to add production configuration settings, you are deploying different code.

2) The code can be exchanged without transmitting API data, AWS settings and other secret information.

3) This makes it easy to add new environments.

There are many examples of how to do this. One example is www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables

+2
source

I highly recommend you use the library to set environment variables. You can use the angular -environment plugin to do this: https://www.npmjs.com/package/angular-environment

Here is an example

 angular.module('yourApp', ['environment']). config(function(envServiceProvider) { // set the domains and variables for each environment envServiceProvider.config({ domains: { development: ['localhost', 'acme.dev.local'], production: ['acme.com', '*.acme.com', 'acme.dev.prod'], test: ['test.acme.com', 'acme.dev.test', 'acme.*.com'], // anotherStage: ['domain1', 'domain2'] }, vars: { development: { apiUrl: '//api.acme.dev.local/v1', staticUrl: '//static.acme.dev.local', // antoherCustomVar: 'lorem', // antoherCustomVar: 'ipsum' }, test: { apiUrl: '//api.acme.dev.test/v1', staticUrl: '//static.acme.dev.test', // antoherCustomVar: 'lorem', // antoherCustomVar: 'ipsum' }, production: { apiUrl: '//api.acme.com/v1', staticUrl: '//static.acme.com', // antoherCustomVar: 'lorem', // antoherCustomVar: 'ipsum' }, // anotherStage: { // customVar: 'lorem', // customVar: 'ipsum' // }, defaults: { apiUrl: '//api.default.com/v1', staticUrl: '//static.default.com' } } }); // run the environment check, so the comprobation is made // before controllers and services are built envServiceProvider.check(); });

Then you can get the right variable based on the environment in which your application is running: var apiUrl = envService.read('apiUrl');

Hooray!

0
source

More articles:


All Articles