Using a AngularJS Factory in a Controller

Question

OK so Im trying to create a Factory that will make a call to my REST api to retrieve data. All was fine until I updated to Angular 1.6 which forced me to use Promises and so I decided to try factories out:

var registerApplication = angular.module('applications', ['ajoslin.promise-tracker']);

registerApplication.factory('HTTPFactory', ['$http', function dataService($http) {

    var applications = {};

        applications = function getApplications() { $http ({
                'url': '/adminapi/getApplications',
                'method': 'GET',
                'cache' : true
            }).then(function(response){
               // return response.data;
                console.log(response);
                return response;
            });
        }
    return applications;
}]);

registerApplication.controller("ApplicationController", ['HTTPFactory',     function ($scope, HTTPFactory) {

    $scope.applications = {};
    getApplications();

    // when landing on the page, get all applications and show them
    function getApplications() {
        HTTPFactory.getApplications().then(function(response){
            $scope.applications = response;
        });
    }
}]);

However I'm getting this error: angular.js:10859Error: undefined is not an object (evaluating 'HTTPFactory.getApplications')

I've tried several ways and all seem to give me an error of some form, what am I doing wrong???

Sachila Ranawaka · Accepted Answer · 2017-02-26 07:56:04Z

1

Factory is not properly injected.

registerApplication.controller("ApplicationController", ['HTTPFactory', function ($scope, HTTPFactory) {

should be

registerApplication.controller("ApplicationController", ['$scope', 'HTTPFactory', function ($scope, HTTPFactory) {

Furthermore, the following piece of code needs to be fixed.

applications = function getApplications() {
    // Logic
}

Should be replaced with by fixing the closure problem and also removing .then() from the logic of the factory.

applications.getApplications = function() {
    return $http({
        'url': '/adminapi/getApplications',
        'method': 'GET',
        'cache': true
    });
}

edited Feb 26, 2017 at 7:56

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

answered Feb 26, 2017 at 7:22

Tariq B.

5733 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RudolphRedNose Over a year ago

Fixed that problem but now I get Error: HTTPFactory.getApplications is not a function. (In 'HTTPFactory.getApplications()', 'HTTPFactory.getApplications' is undefined) which was a error I was previously having prior to making some changes.

Tariq B. Over a year ago

@RudolphRedNose please review.

RudolphRedNose Over a year ago

Thank you it worked! Now to figure out why my UI didn't update... One step closer though. Thanks again.

Tariq B. Over a year ago

You are welcome. Please upvote and select the answer if you may pls.

Tariq B. Over a year ago

HTTPFactory.getApplications().then(function(response){ $scope.applications = response; }); Please log the console and check if you are getting the correct response.

Sachila Ranawaka · Accepted Answer · 2017-02-26 07:46:14Z

first change the factory like this

registerApplication.factory('HTTPFactory', ['$http', function ($http) {

    var applications = {
          getApplications : getApplications
    };

        function getApplications() { 
            return $http ({
                'url': '/adminapi/getApplications',
                'method': 'GET',
                'cache' : true
            })
        }
    return applications;
}])

you don't have to write the promise inside factory just return the http req to controller and catch the promise in there.

In the controller add string scope to array

registerApplication.controller("ApplicationController", ['$scope','HTTPFactory', function ($scope, HTTPFactory) {

registerApplication.controller("ApplicationController", ['$scope','HTTPFactory',     function ($scope, HTTPFactory) {

    $scope.applications = {};
    getApplications();

    // when landing on the page, get all applications and show them
    function getApplications() {
        HTTPFactory.getApplications().then(function(response){
            $scope.applications = response;
        });
    }
}])

Collectives™ on Stack Overflow

Using a AngularJS Factory in a Controller

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related