TypeError: Factory.function is not a function

11,217

you inject different services/factories to your controller

['$scope', '$routeParams', '$log', '$http', 'Table', 
function tableController($scope, $routeParams, $log, Table)

should be

['$scope', '$routeParams', '$log', '$http', 'Table', 
function tableController($scope, $routeParams, $log, $http, Table)
Share:
11,217
Valdemar Edvard Sandal Rolfsen
Author by

Valdemar Edvard Sandal Rolfsen

Updated on June 18, 2022

Comments

  • Valdemar Edvard Sandal Rolfsen
    Valdemar Edvard Sandal Rolfsen almost 2 years

    I am writing my first angular application with a web api and I am having some problems with calling functions from a factory.

    I have two factories that looks like this:

    main.factory('Table', function ($http, $log) {
        return {
            build: function (token, cubeid) {
                return $http({
                    method: 'POST',
                    url: 'http://localhost:50051/api/structure/cube',
                    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: { token: token, cubeId: cubeid }
                });
            }
        };
    });
    
    main.factory('Login', function ($http, $log) {
        return {
            authorize: function (username, password) {
                return $http({
                    method: 'POST',
                    url: 'path/to/api/',
                    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, password: password }
                });
            }
        };
    });
    

    And two controllers that looks like this:

    main.controller('loginController', ['$scope', '$log', '$http', '$location', 'Login', function jobListController($scope, $log, $http, $location, Login) {
    
        $scope.login = function () {
            Login.authorize($scope.username, $scope.password).success(function (response) {
                $location.path('/table/'+response.token);
            });
        }
    
    }]);
    
    main.controller('tableController', ['$scope', '$routeParams', '$log', '$http', 'Table', function tableController($scope, $routeParams, $log, Table) {
        var cube = 130;
        var token = $routeParams.token;
        $log.log($routeParams.token);
        Table.build(token, cube).success(function (response) {
            $scope.structure = response;
            $log.log(response);
        });
    }]);
    

    For some reason the build function raises an error saying "TypeError: Table.build is not a function" while the authorize function works like a charm.

    Can anyone explain to me why the build function does not work?

    PS: I have checked that the token actually gets passet through to the controller.