CODEWITHSUNDEEP
angularjs
Carson
Carson

Reputation: 194

Angular Service returning "undefined"

So I am sure I am not using best practices, but, I'm just trying to get this to work. I'm making a note taking app, and for whatever reason, the service I created, returns undefined and I can't figure out why.

Here's the service:

angular.module('notesService', []).factory('Notes', ['$http', function($http){
    return {
        get : function(){
            var notes = $http.get('/api/notes');
            return notes;
        }
    }
}]);

And here is the controller:

angular.module('mainController', [])
    .controller('mainController', function($scope, Notes){
        console.log(Notes.get());
    });

The controller is not producing anything on the page just yet, i'm still testing.

Here is what the service returns to my controller:

e {
   $$state : {
      status : 1,
      value : {
           config : Object,
           data: Array[10]
        }
    }
}

This isn't the entire thing, but it is all the stuff I need for my purposes.

Whenever I access $$state.value it returns undefined and I have no idea why.

Upvotes: 2

Views: 1168

Answers (3)

faizal vasaya
faizal vasaya

Reputation: 492

I created an application that will help you to learn the best practices, plus solve your current problem.

//--In app.module.js--//
angular.module('notesApp', []);

//-- In app.controller.js--//
angular.module('notesApp')
  .controller('MainController', ['$scope', '$http', '$log', 'notesFactory',
    function($scope, $http, $log, notesFactory) {
      $scope.data = {};
      notesFactory.getData('http://localhost:3000/api/notes', 'GET')
        .then(function(response) {
          $log.log(response.data);
        }, function(error) {
          $scope.data = error;
        });
    }
  ]);

//--In app.service.js --//
angular.module('notesApp')
  .factory('notesFactory', ['$http',
    function($http) {
      var notesService = {};
      notesService.getData = function(url, method) {
        return $http({
          url: url,
          method: method
        });
      }
      return notesService;
    }
  ]);
<html ng-app='notesApp'>

<head>
  <title>
    Notes Application
  </title>
</head>

<body>
  <div ng-controller='MainController'>
    <pre>{{ data | json}}</pre>
  </div>



  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js'></script>
  <script src='app.module.js'></script>
  <script src='app.controller.js'></script>
  <script src='app.service.js'></script>
</body>

</html>

Check the console for the json object as shown in the screenshotenter image description here

Upvotes: 0

Developer
Developer

Reputation: 6440

You have the service in an entirely different module. So you gotta inject notesService into angular.module('mainController', [notesService]).

You dont ideally need to add new module for each controller and services, you can have single module and add everything to it

Upvotes: 2

Merlin
Merlin

Reputation: 4927

$http return a promise see documentation for $http Also there is no need of the empty array in the angular.module parameter [] this might be what causes the error see in console.

angular.module('notesService').factory('Notes', ['$http', function($http){
    return {
        get : function(){
            return $http.get('/api/notes');
        }
    }
}]);


angular.module('mainController')
    .controller('mainController', function($scope, Notes){
        Notes.get().then(function(result){
            console.log(result);
        })
    });

Upvotes: 0

Related Questions