How to make View redirects in AngularJS without constant server requests

Question

Everytime when I make View redirect (I use href to do so) I can see that AngularJS runs GetAjaxData1, GetAjaxData2. In the other words: instead of the single initial request to the server, I do it everytime when I make View redirection. What is wrong?

Here is my AngularJS code:

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'UController',
        templateUrl: '/Partial/View1.html'
    }).when('/View2', {
        controller: 'UController',
        templateUrl: '/Partial/View2.html'
    }).otherwise({redirectTo: '/View3'});
}]).factory('uFactory', function () {
    var factory = {};
    data1 = [];
    data2 = [];

    factory.getAjaxData1 = function () {
        $.ajax({
            url: url,
            type: 'GET',
            contentType: "application/json",
            async: false,
            success: function (result) {
                data1 = result;
            }
        });

        return data1;
    };

    factory.getAjaxData2 = function () {
        $.ajax({
            url: url,
            type: 'GET',
            contentType: "application/json",
            async: false,
            success: function (result) {
                data2 = result;
            }
        });

        return data2;
    }
};

var controllers = {};

controllers.uController = function ($scope, $location, uFactory) {
    $scope.data1 = uFactory.getAjaxData1();
    $scope.data2 = uFactory.getAjaxData2();
};

Probably shouldn't use `async:false` as it will lock up the UI until the request is done, also should use Angular's [$http](https://docs.angularjs.org/api/ng/service/$http) service instead of jQuery's ajax — Patrick Evans, Jan 25 '16 at 14:46

score 1 · Answer 1 · answered Jan 25 '16 at 15:31

You definitely have to read about $http and ng-resource library and try more angular way in your application and you also should understand that ajax request is always asynchronous, and try to understand promise pattern.

Technically - what you need is a caching - no matter how you are going to implement this - you need to make a single call to the API and the to cache variable.

I don't like idea of usage $.ajax, but it can look like this:

angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'UController',
        templateUrl: '/Partial/View1.html'
    }).when('/View2', {
        controller: 'UController',
        templateUrl: '/Partial/View2.html'
    }).otherwise({redirectTo: '/View3'});
}]).factory('uFactory', function () {
    return {
        getFirstPromise: function () {
            if (!this.$$firstPromise) {
                this.$$firstPromise = $.ajax({
                    url: url,
                    type: 'GET',
                    contentType: "application/json"
                }).then(function (data) {
                    window.data1 = data;
                });
            }
            return this.$$firstPromise;
        }
        ... //some other code
    }
});

var controllers = {
    uController: function ($scope, $location, uFactory) {
        uFactory.getFirstPromise().then(function (data) {
            $scope.data1 = data;
        });
        // same for other data - and don't try to make ajax requests synhronous ;-)
    }
};

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Controllers are not singletons. So your "UController" is created everytime your view changes. I assume that the factory is used inside this controller. See: What is the lifecycle of an AngularJS Controller?

edited May 23 '17 at 11:52

Community

1
1

answered Jan 25 '16 at 14:39

Daniel

874
10
31

How to make View redirects in AngularJS without constant server requests

2 Answers2