Can't use multiple services in one controller in angular

I want to use 2 services in one controller, but somehow the second service doesn't work:

First controller (which works):

angular.module('services', [

])
    .service('userService', function ($http, $q, auth, userFactory) {
        var user = null;

        if(!user){
            userFactory.getUser(auth.currentUser()).getValue(function(result){
                user = result;
                return result;
            });
        }

        this.getUser = function() {
            //console.log("user: ", user);
            return user;
        }

        this.setUserChallenge = function(id) {
            var newUser = user;
            //console.log("newuser: ", newUser);
            newUser.currentchallenge = id;
            //console.log("newuser2: ", newUser);
            user = newUser;
        }

    })
;

Second service:

angular.module('services', [

])
    .service('suggestionsService', function ($http, auth, challengeFactory, userService) {
        var suggestions = null;

        if(!suggestions){
            $scope.$watch(userService.getUser, function(getUser){
                console.log(getUser);
                if(getUser) {
                    challengeFactory.findManyChallengesById(getuser.challengessuggestions).getValue(function(challengesResponse) {
                        $scope.suggestions = challengesResponse.data;
                    });
                }

            });
            /*challengeFactory.getChallenges().getValue(function(result){
                suggestions = result;
                return result;
            });*/
        }

        this.getSuggestions = function() {
            return suggestions;
        }

    })
;

I reference them like this:

angular.module('eva').controller('ChallengeCtrl', ['$scope', 'auth','$translate', 'challengeFactory', 'userFactory', 'userService', 'suggestionsService'
  function($scope, auth, $translate, challengeFactory, userFactory, userService, suggestionsService ) {

But I get this error:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.7/$injector/unpr?p0=suggestionsServiceProvider%20%3C-uggestionsService%20%3C-%20ChallengeCtrl

I reference them in my index.html:

<script type="text/javascript" src="js/services/bootstrap.js"></script>
    <script type="text/javascript" src="js/services/ChallengesService.js"></script>
    <script type="text/javascript" src="js/services/SuggestionsService.js"></script>
    <script type="text/javascript" src="js/services/UserService.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

Why is this happening, the service has the same structure as the first one but still it doesn't work.

ChallengeFactory:

angular.module('factories')
.factory('challengeFactory', ['$http', '$state', '$window',
  function($http, $state, $window) {
    var challengeFactory = {};

    challengeFactory.startSeries = function(user){
      return{
        getValue: function(){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/startuserseries',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {username: user}
          });
        }
      }
    };

    challengeFactory.setsuggestions = function(user, suggestions){
      return{
        getValue: function(){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/setsuggestions',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {username: user, challengessuggestions: JSON.stringify(suggestions)}
          });
        }
      }
    };

    challengeFactory.getChallenges = function(){
      return{
        getValue: function(callback){
          $http({
            method: 'GET',
            url:'http://groep6api.herokuapp.com/challenges'
          }).then(function (result) {
            callback(result.data);
          });
        }
      }
    };

    challengeFactory.findChallengeById = function(id){
      return{
        getValue: function(callback){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/findchallengebyid',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {_id: id}
          }).then(function (result) {
            callback(result);
          });
        }
      }
    };

    challengeFactory.findManyChallengesById = function(challengesIds){
      return{
        getValue: function(callback){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/findmanychallengesbyid',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {ids: JSON.stringify(challengesIds)}
          }).then(function (result) {
            callback(result);
          });
        }
      }
    }


    challengeFactory.setUserChallenge = function(user, id){
      return{
        getValue: function(callback){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/setuserchallenge',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {username: user, _id: id}
          }).then(function (result) {
            callback(result);
          });
        }
      }
    };

    challengeFactory.completeChallenge = function(user){
      return{
        getValue: function(){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/completecurrentchallenge',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {username: user}
          }).then(function (result) {

          });
        }
      }
    };

    challengeFactory.completeChallengeSeries = function(username){
      return{
        getValue: function(){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/completechallengeseries',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {username: username}
          }).then(function (result) {

          });
        }
      }
    };

    challengeFactory.setRating = function(score, challenge, user){
      $http({
        method: 'POST',
        url:'http://groep6api.herokuapp.com/setrating',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
          var str = [];
          for(var p in obj)
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
          return str.join("&");
        },
        data : {user: user, challenge: challenge, score: score}
      }).success(function (result) {

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

    challengeFactory.getScore = function(user, challenge){
      return{
        getValue: function(callback){
          $http({
            method: 'POST',
            url:'http://groep6api.herokuapp.com/getscore',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            },
            data : {user: user, challenge: challenge}
          }).then(function (result) {
            callback(result.data);
          });
        }
      }
    };

    return challengeFactory;
  }
]);

Answers


Ok, now i see what you did

this code will create new module:

angular.module('services', [

])

if you want to add to the same module you should do:

angular.module('services').service(...)

you created two modules with the same name and overwrite your module


Need Your Help

internationalizing combo boxes

c# winforms internationalization combobox

We have a WinForms application that is currently being internationalized. While some controls are straightforward to be i18n'ed, combo boxes with drop down items are giving us a hard time. Take a c...

insertAdjacentHTML and Array variables

javascript innerhtml

Trying to replace using .innerHTML with .insertAdjacentHTML and running into an issue. It seems innerHTML will parse variables when replacing but insertAdjacentHTML will not. Any guidance would be