How is possible to load some setting from .json file before angular app starts

Question

i'm building application which uses CORS requests. Each request i use get host address from a constant

angular.module('siteApp').constant('baseUrl', {
'server':'htttp://localhost/',
})

And in each service i use to send request like this:

angular.module('siteApp').factory('DocsSvc', function ($http, baseUrl) {
   var baseurl = baseUrl.server ;
   $http.get(baseurl + 'document')

Is it possible to make 'htttp://localhost/' value - to came from config.json file into baseUrl constant or baseUrl factory? I mean : how can i load something from ajax request an make it accessible to app modules

i have tried:

.run(['$rootScope', , function ($rootScope) {

  $.ajax('config.json', {async: false})
  .success(function (data) {
    $rootScope.HOST = data.HOST;
  });

And tried to access it from baseUrl:

angular.module('siteApp').factory('baseUrl',function($rootScope) {
 return {
  server: $rootScope.HOST

But no luck - the baseUrl.server comes undefined into functions

vinesh · Accepted Answer · 2016-02-03 07:12:42Z

8

You can use run method of angular.

  var app = angular.module('plunker', []);

  app.run(function($http, $rootScope){
  $http.get('config.json')
  .success(function(data, status, headers, config) {
    $rootScope.config = data;
    $rootScope.$broadcast('config-loaded');
  })
  .error(function(data, status, headers, config) {
    // log error
    alert('error');
  });
})

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.$on('config-loaded', function(){
    $scope.name = $rootScope.config.name;  
  });
});

see this plunker

edited Feb 3, 2016 at 7:12

answered Dec 31, 2014 at 11:44

vinesh

4,9436 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

happyZZR1400 Over a year ago

please look into updated question: i had tried doing something like this, but without success

vinesh Over a year ago

You need to listen config-loaded event only for controllers that are loaded initially. Because in this case controller is getting called before the json file is loaded.

happyZZR1400 Over a year ago

thank you for trying so hard to help me. i have modified your plunker to be closer to my situation, and it not worked well :plnkr.co/edit/QfSzS0jbO8wRXwiM6T0W?p=preview . Anyway - thank you again, and it seems that i better render the host from server side

Lars Anundskås · Accepted Answer · 2014-12-31 12:01:46Z

2

If you want to do it even before the angular app starts, you can, instead of using the ng-app directive, use the bootstrap function.

From: https://docs.angularjs.org/api/ng/function/angular.bootstrap

<!doctype html>
<html>
<body>
<div ng-controller="WelcomeController">
  {{greeting}}
</div>

<script src="angular.js"></script>
<script>
  var app = angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
      $scope.greeting = 'Welcome!';
  });
  // Do your loading of JSON here
  angular.bootstrap(document, ['demo']);
</script>
</body>
</html>

answered Dec 31, 2014 at 12:01

Lars Anundskås

1,3551 gold badge10 silver badges25 bronze badges

Comments

AlokeT · Accepted Answer · 2017-10-10 08:27:39Z

1

You need to tell angular about data change, so modify your code something like this:

.run(['$rootScope', function ($rootScope) {

  $.ajax('config.json', {async: false})
  .success(function (data) {
    $rootScope.HOST = data.HOST;
    $rootScope.$apply();            // New line
  });
}])

That $apply() is needed since its a non-angular asynchronous call.

edited Oct 10, 2017 at 8:27

AlokeT

1,21611 silver badges24 bronze badges

answered Dec 31, 2014 at 12:03

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Comments

Yuvraj · Accepted Answer · 2020-09-21 11:53:48Z

0

use the blow code snippet to load the json values

.run(function ($http, $rootScope) {
$http.get('launchSettings.json')
    .success(function (data, status, headers, config) {
        $rootScope.config = data;
        $rootScope.$broadcast('config-loaded');
    })
    .error(function (data, status, headers, config) {
        // log error
        alert('error');
    });

});

answered Sep 21, 2020 at 11:53

Yuvraj

4231 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

How is possible to load some setting from .json file before angular app starts

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related