CODEWITHSUNDEEP
javascriptangularjs
stijn.aerts
stijn.aerts

Reputation: 6206

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;
  }
]);

Upvotes: 0

Views: 129

Answers (1)

Avi
Avi

Reputation: 1964

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

Upvotes: 2

Related Questions