angularjs - error while using angular constant

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', [

    dashboard.config(function($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'

          redirectTo: '/lecafe'

    dashboard.config(function ($provide, $http) {
        $provide.constant('baseURL',function() {
            var baseURL = data[0].baseURL;
            return baseURL;

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

1 Answer

  1. Austin- Reply


    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

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>