Value not set to global variable in JS/AngularJs

Question

I am using gulp to run and build to run my application. I am getting file contents using $http service in my index.js file and then setting value of a variable like

window.variablex = "http://localhost:8080/appname".

here is how I am doing it (in index.js)

(function ()
 {
  'use strict';

   angular
    .module('main')
    .controller('IndexController', IndexController);
function IndexController($http){
   $http.get('conf/conf.json').success(function(data){

     window.variable = data.urlValue;

  }).error(function(error){
    console.log(error);
  });
    }
});

And I've created a factory to call the rest APIs of my backend application like

(function(){

  'use strict';

   angular
   .module('main')
   .factory('testService',['$resource',testService]);
     function agentService($resource){
 var agents = $resource('../controller/',{id:'@id'},
  {

    getList:{
      method:'GET',
      url:window.variable+"/controller/index/",
      isArray:false
}
});

Now, I except a rest call to made like

http://localhost:8080/appname/controller

But it always sends a call like http://undefined/appname/controller which is not correct.

I can get the new set value anywhere else, but this value is not being set in resource service objects somehow. I am definitely missing something.

Any help would be much appreciated

score 1 · Answer 1 · answered Oct 23 '17 at 19:05

As you are using Gulp, I advise you to use gulp-ng-config

For example, you have your config.json:

{
  "local": {
    "EnvironmentConfig": {
      "api": "http://localhost/"
    }
  },
  "production": {
    "EnvironmentConfig": {
      "api": "https://api.production.com/"
    }
  }
}

Then, the usage in gulpfile is:

gulp.task('config', function () {
    gulp.src('config.json')
        .pipe(gulpNgConfig('main.config', {
            environment: 'production'
        }))
        .pipe(gulp.dest('.'))
});

You will have this output:

angular.module('myApp.config', [])
.constant('EnvironmentConfig', {"api": "https://api.production.com/"});

And then, you have to add that module in your app.js

angular.module('main', [ 'main.config' ]);

To use that variable you have to inject in your provider:

angular
    .module('main')
    .factory('testService', ['$resource', 'EnvironmentConfig', testService]);
function agentService($resource, EnvironmentConfig) {

    var agents = $resource('../controller/', {id: '@id'},
        {

            getList: {
                method: 'GET',
                url: EnvironmentConfig + "/controller/index/",
                isArray: false
            }
        });
}

Although this worked but I may have to change configurations at run time, when application is deployed and I don't want to tweak into `module` with constants , created by this gulp task. Anyways, thanks for taking time — Muhammad Usman, Oct 24 '17 at 07:51

score 0 · Accepted Answer · answered Oct 24 '17 at 07:59

@Kenji Mukai's answer did work but I may have to change configuration at run time and there it fails. This is how I achieved it (in case anyone having an issue setting variables before application gets boostrap)

These are the sets that I followed

Remove ng-app="appName" from your html file as this is what causing problem. Angular hits this tag and bootstraps your application before anything else. hence application is bootstratped before loading data from server-side (in my case)

Added the following in my main module

var injector = angular.injector(["ng"]);
var http = injector.get("$http");
   return http.get("conf/conf.json").then(function(response){
    window.appBaseUrl = response.data.gatewayUrl
      }).then(function bootstrapApplication() {
         angular.element(document).ready(function() {
         angular.bootstrap(document, ["yourModuleName"]);
        });
     });

This will load/set new values everytime you refresh your page. You can change conf.json file even at runtime and refreshing the page will take care of updating the values.

Value not set to global variable in JS/AngularJs

2 Answers2