$http and $q service are not available!

Hello all,

I am going with “tabs” starter app and I am trying to use $http and $q services in starter.services module. I am adding a new factory and trying to us those services here. But it gives error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module $http due to:
Error: [$injector:nomod] Module ‘$http’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
this is my app.js:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform, DSCacheFactory) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    DSCacheFactory("FBTokenCache",{ storageMode: "localStorage" });


  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js

  openFB.init({appId: '442472149233967'});
  
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html",
    controller: "AppCtrl"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })
    .state('tab.friend-detail', {
      url: '/friend/:friendId',
      views: {
        'tab-friends': {
          templateUrl: 'templates/friend-detail.html',
          controller: 'FriendDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

And this is my services.js

angular.module('starter.services', ['angular-data.DSCacheFactory', '$http','$q'])

.factory('Chats', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Andrew Jostlin',
    lastText: 'Did you get the ice cream?',
    face: 'https://pbs.twimg.com/profile_images/491274378181488640/Tti0fFVJ.jpeg'
  }, {
    id: 3,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 4,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
  }];

  return {
    all: function() {
      return chats;
    },
    remove: function(chat) {
      chats.splice(chats.indexOf(chat), 1);
    },
    get: function(chatId) {
      for (var i = 0; i < chats.length; i++) {
        if (chats[i].id === parseInt(chatId)) {
          return chats[i];
        }
      }
      return null;
    }
  }
})

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  // Some fake testing data
  var friends = [{
    id: 0,
    name: 'Ben Sparrow',
    notes: 'Enjoys drawing things',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    notes: 'Odd obsession with everything',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Andrew Jostlen',
    notes: 'Wears a sweet leather Jacket. I\'m a bit jealous',
    face: 'https://pbs.twimg.com/profile_images/491274378181488640/Tti0fFVJ.jpeg'
  }, {
    id: 3,
    name: 'Adam Bradleyson',
    notes: 'I think he needs to buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 4,
    name: 'Perry Governor',
    notes: 'Just the nicest guy',
    face: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
  }];


  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
})

.factory('FBToken', function(DSCacheFactory, $q, $http) {

  self.FBTokenCache = DSCacheFactory.get('FBTokenCache');

  
  function getToken() {
      var deferred = $q.defer(),
          cacheKey = "token",
          FBToken = self.FBTokenCache.get(cacheKey);

      if (FBToken) {
          console.log("Found data inside cache", FBToken);
          deferred.resolve(FBToken);
      } else {

          //https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=11111111111111111&client_secret=111111111111111111111
          $http.get("https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=1111111111111111111&client_secret=1111111111111111111111")
              .success(function(data) {
                  console.log("Received data via HTTP");
                  self.FBTokenCache.put(cacheKey, data);
                  deferred.resolve(data);
              })
              .error(function() {
                  console.log("Error while making HTTP call.");
                  deferred.reject();
              });

        
          $http.get("http://elite-schedule.net/api/leaguedata")
              .success(function(data) {
                  console.log("Received data via HTTP");
                  self.leaguesCache.put(cacheKey, data);
                  deferred.resolve(data);
              })
              .error(function() {
                  console.log("Error while making HTTP call.");
                  deferred.reject();
              });

      }
      return deferred.promise;
  }


  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    },
    getToken: getToken
    

  }
});

Why angular cant find these 2 modules.

Thanks in advance…

Do you add controllers.js and services.js into index.html?

Yes i checked it. I think its really simple but i cant figure out. I am beginner.

This is wrong (i think)

angular.module('starter.services', ['angular-data.DSCacheFactory', '$http','$q'])   
.factory('Chats', function() {

This must be:

angular.module('starter.services', []).factory('Chats', function($q, $http) {

I dont know what is “angular-data.DSCacheFactory”

Thanks, It worked but why? because how can i use modules i didnt inject to my module?

$q and $http are in the core of angular. so they are already “injected”

thanks man. 123456789

1 Like

@soutlink
sorry to reply with a kind off topic question

but if i do this

angular.module('starter.services', []).factory('Chats', function($q, $http) {

i will have problems when i minify(or uglify) ?

Not sure (Maybe not)

but with

angular.module('starter.services', []).factory('Chats', ['$q', '$http', function($q, $http) {

I’m sure you will not