Angular 1.5.0 - Why is factory called only once?

Question

I have an html template that displays data from an Angular factory. The problem is that the factory's get method performs call to the backend only when the page is loaded for the first time. When repeatedly opening the page I only see results from the first call to the backend. ~~It looks like the factory somehow caches the results.~~ With using Chrome debug tools I see that Angular makes GET requests with the same resource id on each page load.

This is the factory definition:

.factory('Company', ['$resource', '$routeParams', function ($resource, $routeParams) {
    return $resource('/companies/getCompany/:companyId', {}, {
        get: {
            method: 'GET',
            url: '/companies/getCompany/:companyId',
            params: {
                'companyId': $routeParams.companyId
            }
        },
        save: {
            method: 'POST',
            url: '/companies/updateCompany'
        },
        insert: {
            method: 'POST',
            url: '/companies/createNewCompany'
        }
    });
}])

This is the controller code

.controller('MyController', ['$scope', '$location', 'Company',
    function ($scope, $location, Company) {
        Company.get(function (data) {
            $scope.company = data;
        });
    }]);

I'm using ng-click to open the page

<tr ng-repeat="company in companies"
    ng-click="redirectToCompanyForm(company.id)">


$scope.redirectToCompanyForm = function (companyId) {
   $location.url('/updateCompany/' + companyId);
}

I set a breakpoint on the factory - app pauses only the first time when I access the page.

Why is my factory called only once and how can I solve this?

Ties · Answer 1 · 2016-02-26T12:23:21.130

0

~~From the Angular docs:~~

Note: All services in Angular are singletons. That means that the injector uses each recipe at most once to create the object. The injector then caches the reference for all future needs.

So you are right, all services are only created once and then cached by Angular.

Edit: better answer for your situation below:

$resource caching

You can disable caching the resource by adding the options to the $resource call:

return $resource('/companies/getCompany/:companyId', {}, {
    get: {
        method: 'GET',
        params: {
            'companyId': $routeParams.companyId
        },
        cache: false // THIS LINE
    }
}

Edit 2: according to the docs, the first parameter of $resource is not optional and must be an url.

edited Feb 26 '16 at 12:23

answered Feb 26 '16 at 11:57

Ties

806
7
13

Adding `cache: false` didn't help. Resource is still called only once. Maybe I'm using `controller` incorrectly? – droid8421 Feb 26 '16 at 12:05
Does it make a new request to the server if you go to the same url in a new tab? – Ties Feb 26 '16 at 12:10
Shouldn't the `cache:false` entry be out of the get block? – Pablo Lozano Feb 26 '16 at 12:11
@Ties Yes - in a new tab I get the correct result. I noticed that everytime a request is made with the same company id although the browser url bar shows request with correct id. – droid8421 Feb 26 '16 at 12:13
@droid8421 no it should be inside the get block (https://docs.angularjs.org/api/ngResource/service/$resource) – Ties Feb 26 '16 at 12:13

Vinay · Answer 2 · 2016-02-26T12:29:21.277

0

Maybe you can use low level $http methods in your controller.

$resource is a fantastic utility but in your case you don't want persist the data.

Try the $http.get method..

Or try the query() method.

$scope.myData = DataFactory.query();

edited Feb 26 '16 at 12:29

answered Feb 26 '16 at 12:21

Vinay

548
2
12

Actually I have other methods to persist in the factory – droid8421 Feb 26 '16 at 12:25
See my edited answer to the usage of query() method. Let me know if its solved. – Vinay Feb 26 '16 at 12:30

score 0 · Accepted Answer · answered Feb 26 '16 at 20:24

Finally fixed the issue. Factory use was incorrect. This is the factory module

.factory('Company', ['$resource', function ($resource) {
    return $resource('/companies/getCompany/:id', null, {
        save: {
            method: 'POST',
            url: '/companies/updateCompany'
        },
        insert: {
            method: 'POST',
            url: '/companies/createNewCompany'
        }
    });
}])

And this is how the factory should be called

Company.get({id: $routeParams.companyId}, function (data) {
    $scope.company = data;
});

Now the correct data is shown everytime the page is loaded.

Angular 1.5.0 - Why is factory called only once?

3 Answers3

$resource caching