CODEWITHSUNDEEP
javascriptangularjs
klis87
klis87

Reputation: 506

AngularJS controller called every time after ngRoute url is clicked

I have problem with below code. When I go to main controller url #/, Angular naturally calls main controller - it execute AJAX request. Problem is, that when I click #/some-url, and then #/ url again, this AJAX request is executed again, which is not desired and unnecessary due to performance. I thought controllers are called only once, but it doesn't look like this is the case, at least with ngRoute.

angular.module('robotsApp', ['ngRoute', 'controllers'])

    .config(['$routeProvider', function($routeProvider){
        var root = '/static/js/partials/';
        $routeProvider.
            when('/', {
                templateUrl: root + 'main.html',
                controller: 'main as main'
            }).
            when('/some-url', {
                templateUrl: root + 'some_template.html',
                controller: 'someController'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

angular.module('controllers', [])
    .controller('main', ['$http', function($http){
        $http.get('/user/recent-gain-loss').success(function(data){
            this.recent_gain_loss = data;
        }.bind(this));
    }]);

<p>{{ main.recent_gain_loss }}</p>

Upvotes: 0

Views: 184

Answers (1)

Raulucco
Raulucco

Reputation: 3426

Save the data in to a value and then check if the data are already set.

angular.module('values', [])
.value('recentGainLoss', {})
angular.module('controllers', ['values'])
    .controller('main', ['$http', 'recentGainLoss', function($http, recentGainLoss){

        if (Object.keys(recentGainLoss).length < 1) {
          $http.get('/user/recent-gain-loss').success(function(data){
            recentGainLoss = angular.extend(recentGainLoss, data);

           });

        }
        this.recent_gain_loss = recentGainLoss;

    }]);

Upvotes: 2

Related Questions