I have issue with Angular factory, I've tried many ways, but it's same..

This is error:

TypeError: Cannot read property 'getSchedule' of undefined
        at new <anonymous> (http://127.0.0.1:4767/js/ctrls/main.js:3:19)
        at d (.2.26/angular.min.js:35:36)
        at Object.instantiate (.2.26/angular.min.js:35:165)
        at .2.26/angular.min.js:67:419
        at link (.2.26/angular-route.min.js:7:248)
        at N (.2.26/angular.min.js:54:372)
        at g (.2.26/angular.min.js:47:256)
        at .2.26/angular.min.js:46:377
        at .2.26/angular.min.js:48:217
        at F (.2.26/angular.min.js:52:28) <ng-view class="app-content ng-scope" ng-hide="loading">

I have constructed main app this way:

'use strict';

// Declare chat level module which depends on views, and ponents
angular.module('BenShowsApp', [
    'ngRoute',
    'ngResource',
    'mobile-angular-ui',
    'BenShowsApp.filters',
    'BenShowsApp.services',
    'BenShowsApp.directives',
    'BenShowsApp.controllers'
]).
config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/schedule', {
                templateUrl: 'partials/main.html',
                controller: 'MainCtrl'
            });
}]);

//Initialize individual modules
var services = angular.module('BenShowsApp.services', []);
var factories = angular.module('BenShowsApp.factories', []);
var controllers = angular.module('BenShowsApp.controllers', []);
var filters = angular.module('BenShowsApp.filters', []);
var directives = angular.module('BenShowsApp.directives', []);

and tried use this factory/service

services.factory('tvRage', function($http) {
        var tvRage = {};
        tvRage.getSchedule = function() {
            return $http({
                method: 'get',
                url: '.php',
                params: {
                    country: 'US',
                    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
                }
            }).then(function (response) {
                return response.data;
            });
        };
    return tvRage;
});

with this controller

controllers.controller('MainCtrl', ['$scope','$http','tvRage',
    function ($scope, $http, tvRage) {
            tvRage.getSchedule().success(function(data){
                var parser = new X2JS();
                var x2js = parser.xml_str2json(data);
                $scope.request = x2js;
            }).error(function(){
                alert('nouuu');
            });
    }
]);

$http works when it's all in controller, but from functional side that request should be in factory I think.

I have issue with Angular factory, I've tried many ways, but it's same..

This is error:

TypeError: Cannot read property 'getSchedule' of undefined
        at new <anonymous> (http://127.0.0.1:4767/js/ctrls/main.js:3:19)
        at d (https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:35:36)
        at Object.instantiate (https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:35:165)
        at https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:67:419
        at link (https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular-route.min.js:7:248)
        at N (https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:54:372)
        at g (https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:47:256)
        at https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:46:377
        at https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:48:217
        at F (https://ajax.googleapis./ajax/libs/angularjs/1.2.26/angular.min.js:52:28) <ng-view class="app-content ng-scope" ng-hide="loading">

I have constructed main app this way:

'use strict';

// Declare chat level module which depends on views, and ponents
angular.module('BenShowsApp', [
    'ngRoute',
    'ngResource',
    'mobile-angular-ui',
    'BenShowsApp.filters',
    'BenShowsApp.services',
    'BenShowsApp.directives',
    'BenShowsApp.controllers'
]).
config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/schedule', {
                templateUrl: 'partials/main.html',
                controller: 'MainCtrl'
            });
}]);

//Initialize individual modules
var services = angular.module('BenShowsApp.services', []);
var factories = angular.module('BenShowsApp.factories', []);
var controllers = angular.module('BenShowsApp.controllers', []);
var filters = angular.module('BenShowsApp.filters', []);
var directives = angular.module('BenShowsApp.directives', []);

and tried use this factory/service

services.factory('tvRage', function($http) {
        var tvRage = {};
        tvRage.getSchedule = function() {
            return $http({
                method: 'get',
                url: 'http://services.tvrage./feeds/fullschedule.php',
                params: {
                    country: 'US',
                    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
                }
            }).then(function (response) {
                return response.data;
            });
        };
    return tvRage;
});

with this controller

controllers.controller('MainCtrl', ['$scope','$http','tvRage',
    function ($scope, $http, tvRage) {
            tvRage.getSchedule().success(function(data){
                var parser = new X2JS();
                var x2js = parser.xml_str2json(data);
                $scope.request = x2js;
            }).error(function(){
                alert('nouuu');
            });
    }
]);

$http works when it's all in controller, but from functional side that request should be in factory I think.

• javascript
• angularjs

• These are in the same file? If not, you probly forgot to include the file in the index.html – Fals Commented Jan 15, 2015 at 18:51
• @Fals no they aren't, but everything is linked. – Jayme Commented Jan 15, 2015 at 18:53
• promisses have then not success method, thats the issue! – Fals Commented Jan 15, 2015 at 18:53

1 Answer 1

You are returning $q promise from the factory. It does not have the methods success and error they are special functions added by $http in the returned httpPromise (which is just an extension of QPromise).

You can either change your factory to return httpPromise by removing the then chaining:

  return $http({
            method: 'get',
            url: 'http://services.tvrage./feeds/fullschedule.php',
            params: {
                country: 'US',
                key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }
        });

Or chain it in your controller with standard q promise functions then/ catch.

controllers.controller('MainCtrl', ['$scope','$http','tvRage',
    function ($scope, $http, tvRage) {
            tvRage.getSchedule().then(function(data){
                var parser = new X2JS();
                var x2js = parser.xml_str2json(data);
                $scope.request = x2js;
            }).catch(function(){
                alert('nouuu');
            });
    }
]);

But with the specific error you are getting it looks like possibly in your original code your DI list does not match argument list. Re-verify by logging what is tvRage and other arguments injected in the controller. This could easily happen because of argument mismatch in the original code. Ex:-

 .controller('MainCtrl', ['$scope','tvRage', function ($scope, $http, tvRage){
    //Now tvRage will be undefined and $http will be tvRage.

Working Demo

angular.module('app', []).controller('ctrl', ['$scope', '$http', 'tvRage',
  function($scope, $http, tvRage) {

    tvRage.getSchedule().success(function(data) {
      console.log(data)
    }).error(function() {
      alert('nouuu');
    });
  }
]).factory('tvRage', function($http) {
  var tvRage = {};
  tvRage.getSchedule = function() {
    return $http({
      method: 'get',
      url: 'http://services.tvrage./feeds/fullschedule.php',
      params: {
        country: 'US',
        key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
      }
    });
  };
  return tvRage;
});;

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
</div>