error while using angular constant

Question

I am trying to use angular constant in ny project which i need to get by making a http request to config.json file. But when i try to inject that constant in any controller, angular gives me the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module dashboard due to: Error: [$injector:unpr] Unknown provider: $http My code for angular constant and route looks lke this.

     'use strict';

    var dashboard = angular.module('dashboard', [
       'ngResource',
       'ngSanitize',
       'ngRoute',   
     ]);

    dashboard.config(function($routeProvider) {
        $routeProvider
          .when('/:appName', {
          templateUrl: 'views/dashboard_landing.html',
          controller: 'displayController'
        })
          .when('/:appName/individual/session/graph', {
          templateUrl: 'views/individual_session_graph.html',
          controller: 'indSessionGraphCtrl'
        })
          .when('/:appName/individual/session/piechart', {
          templateUrl: 'views/individual_session_pie.html',
          controller: 'indSessionPieCtrl'
        })
          .when('/:appName/individual/activity', {
          redirectTo: ':appName/individual/session/graph'
        })
          .when('/:appName/individual/engagement', {
          templateUrl: 'views/individual_engagement.html',
          controller: 'indEngagementCtrl'
        })
          .when('/:appName/overall/session/graph', {
          templateUrl: 'views/overall_session_graph.html',
          controller: 'oveSessionGraphCtrl'
        })

        .otherwise({
          redirectTo: '/lecafe'
        });
      });


    dashboard.config(function ($provide, $http) {
        $provide.constant('baseURL',function() {
          $http({
            method:'GET',
            url:'/baseurl.json'
          })
          .success(function(data){
            var baseURL = data[0].baseURL;
            return baseURL;
          })
          .error(function(){
          });
        });
      });

Can any one help me put to get through this error. Thank you in advance...

score 1 · Accepted Answer · edited May 23 '17 at 11:57

This is very similar to this question: use $http inside custom provider in app config, angular.js

In short, you can't use $http in a .config section because $http is itself not yet configured. But there are a few approaches you can use to achieve what you want.

My personal ideal: if you have control over the contents of baseurl.json, you could change it to a .js file that runs

angular.module('dashboard').constant('baseURL', 'http://...');

and include it before the closing body tag

<script type="text/javascript" src="/baseurl.js"></script>

I often use this pattern as a way of including various settings into an app.

If that's not an option, you could follow the approach in this question: AngularJS : Initialize service with asynchronous data

error while using angular constant

1 Answers1