CODEWITHSUNDEEP
javascriptangularjsangularjs-serviceangularjs-controllerangularjs-factory
user3358423
user3358423

Reputation: 85

AngularJS : cannot connect factory to controller

I'm sorry if this is an easy question. I'm new and probably don't understand the right things to search for to find the answer.

I've basically followed this angularJS tutorial http://www.youtube.com/watch?v=i9MHigUZKEM

I've gotten through all of it except setting up a factory that connects to my controller.

Here is the code for the factory:

    demoApp.factory('simpleFactory', function(){
    var people = [
          { name: 'Will', age: '30' },
          { name:'Jack', age:'26' },
          { name: 'Nadine', age: '21' },
          { name:'Zach', age:'28' }
        ];

  var factory = {};
  factory.getPeople = function() {
    return people;
  };
});

Here is the controller:

    demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {

    $scope.people = simpleFactory.getPeople();        
    }]);

And just a simple repeat in the HTML:

Name:
   <input type="text" ng-model="filter.name"> {{ nameText }}
   <ul>
      <li ng-repeat="person in people | filter:filter.name | orderBy: 'name'">{{ person.name }}- {{ person.age }}</li>
   </ul>

The error I get is "TypeError: Cannot call method 'getPeople' of undefined" in the javascript console.

Note: This all works correctly when within the controller I have the data object hardcoded in like so:

    demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {

    $scope.people = [
      { name: 'Will', age: '30' },
      { name:'Jack', age:'26' },
      { name: 'Nadine', age: '21' },
      { name:'Zach', age:'28' }
    ];        
 }]);

Upvotes: 2

Views: 2560

Answers (2)

BKM
BKM

Reputation: 7079

A small change in your service;

  demoApp.factory('simpleFactory', function(){
  var people = [
        { name: 'Will', age: '30' },
        { name:'Jack', age:'26' },
        { name: 'Nadine', age: '21' },
        { name:'Zach', age:'28' }
  ];

  return {
    getPeople: function() {
     return people;
    };
  }

});

And in your controller

demoApp.controller('FirstCtrl', ['$scope', 'simpleFactory', function ($scope, simpleFactory) {

$scope.people = simpleFactory.getPeople();        
}]);

Upvotes: 2

omgaz
omgaz

Reputation: 367

Essentially you're just missing the return statement from your 'factory' object, but it might be clearer if you do a little renaming as well to avoid confusion.

Example, adapted from the AngularJS book:

demoApp.factory('People', function(){ // Renamed factory to be more descriptive
  var people = {}; // Renamed 'factory' to 'people', as an object we can prototype more functions later

  people.query = function() { // called query, but could be getPeople
    return [ // just return a static array for now
      { name: 'Will', age: '30' },
      { name:'Jack', age:'26' },
      { name: 'Nadine', age: '21' },
      { name:'Zach', age:'28' }
    ];
  }

  return people;
});

So now your controller can pull this information in:

demoApp.controller('FirstCtrl', ['$scope', 'People', function ($scope, People) { // dependency injection
  $scope.people = People.query();
});

So now we have a descriptive factory for People that returns an object, one of which is called query. We can later update this query function to read in parameters, fire off AJAX calls and do some complicated stuff. But one step at a time :)

Upvotes: 0

Related Questions