CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui-router
J.Doe
J.Doe

Reputation: 33

How to make View redirects in AngularJS without constant server requests

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

Upvotes: 0

Views: 51

Answers (2)

sonnenhaft
sonnenhaft

Reputation: 1647

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

Upvotes: 1

Daniel
Daniel

Reputation: 904

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?

Upvotes: 0

Related Questions