CODEWITHSUNDEEP
javascriptangularjsrestfactory
RudolphRedNose
RudolphRedNose

Reputation: 121

Using a AngularJS Factory in a Controller

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???

Upvotes: 1

Views: 439

Answers (2)

Tariq B.
Tariq B.

Reputation: 573

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
    });
}

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

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;
        });
    }
}])

Upvotes: 1

Related Questions