CODEWITHSUNDEEP
angularjs
MikeW
MikeW

Reputation: 4809

function is undefined error in angular controller

I'm running into a problem trying to setup a fairly simple call using a factory and controller in angularjs. I've been attempting to follow the style guides of John Papa and Todd Motto in setting this up.

First I'm using 2 modules

(function(){

 'use strict';

  angular.module('app',[

  'app.core',
  'app.property'

     ]);
})();

In 'app.core' I define the factory

(function(){

'use strict';

angular.module('app.core')
  .factory('dataservice',dataservice);

dataservice.$inject = ['$http','$q'];

function dataservice($http,$q) {

 var service = {
    getListing: getListing
 };

 return service;


 function getListing() {

      var def = $q.defer;

      $http.get("http://acme.com/property/1?format=json")
        .success(function(data){
          service.getListing = data;
          def.resolve(data);
        });

      return def.promise;


 }
}
})();

and in 'app.property' I defined the controller

 (function(){

  'use strict';

  angular.module('app.property')
    .controller('PropertyCtrl',PropertyCtrl);

  PropertyCtrl.$inject = ['dataservice'];

  function PropertyCtrl(dataservice) {

  var vm = this;
  vm.listings = [];

  activate();

  function activate() {
    return getListing().then(function(){});
  }
  function getListing(){
    return dataservice.getListing().then(function(data){
      vm.listings = data;
      console.log("data is");
      console.log(data);
      return vm.listings;
    });
  }
  }
})();

the error I get in the console output is

Error: dataservice.getListing(...) is undefined except when I inspect dataservice in chrome I can seeenter image description here

Further on I receive 

TypeError: Cannot read property 'then' of undefined

TypeError: def.resolve is not a function

Despite these errors the remote call returns json fine.

Hoping someone with angular chops has an idea on where I went wrong.

Upvotes: 1

Views: 3226

Answers (2)

tpie
tpie

Reputation: 6221

You have to actually create the modules you are building on:

Put this above your app.property module's objects: angular.module('app.property', []);

Put this above your app.core module's objects: angular.module('app.core', []);

You are basically attaching a factory and a controller to modules that don't exist. You are trying to inject modules that don't exist into your primary module.

Here is a plunker showing the issues you were having resolved. Your code has some other issues, but at least it's finding the modules now, which was your original problem.

It should also be noted that mohamedrias is also correct - you had an error in syntax by not putting () on your defer call. I updated my plunker to include his correction as well.

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

You're very close. It should be $q.defer() but you've $q.defer

 function getListing() {
      var def = $q.defer();
      $http.get("http://acme.com/property/1?format=json")
        .success(function(data){
          service.getListing = data;
          def.resolve(data);
        });
      return def.promise;   
 }

Upvotes: 1

Related Questions