Stop Controller's activity when switch route

Question

I create single page app by AngularJS and I found my problem. I have function refresh data every 2 minutes by jQuery in route A. When I change to other route, that function in controller is still working. This is my code.

App.js

var newsapp = angular.module('newsAppMD', ['ngRoute']);

newsapp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/news', {
        templateUrl: 'templates/news.html',
        controller: 'imageNewsCtrl'
    }).
    when('/news/:nameCat', {
        templateUrl: 'templates/news-thumbnail.html',
        controller: 'newsPageCtrl'
    }).
    otherwise({
        redirectTo: '/news'
    });
}]);

newsapp.controller('imageNewsCtrl', function($scope, $http, $interval, $timeout ) {
    $('#bottom-bar').find('#epg').hide();
    $scope.updateTimeEPG = 120000;
    $scope.fetchFeed = function() {
  $http.get("http://wi.th/thaipbs_tv_backend/epg_forJS.php").success(function(response) {
        $scope.items = response.Schedule;
        console.log($scope.items);
        $timeout(function() { $scope.fetchFeed(); }, $scope.updateTimeEPG);
    }).then(function() {
            $('#bottom-bar').find('.loading').hide();
            $('#bottom-bar').find('#epg').show();
    });
};

    $scope.fetchFeed();
});

newsapp.controller('newsPageCtrl', function($scope, $http, $location) {    
    // blah blah blah
}]);

I choose /news imageNewsCtrl work. And when I switch to other route, function in imageNewsCtrl still work (I see function print console.log when I changed route). I want to stop function in controller when change route. Thanks for your suggestion everyone. :)

is the controller `imageNewsCtrl` parent of other controller? — Coder, Feb 19 '15 at 05:38

score 0 · Answer 1 · edited May 23 '17 at 10:29

I am not too entirely sure, but try using $stateProvider instead of $routeProvider. If you do, then you need to npm install angular-ui-router (it is a powerful third party module) and replace ngroute. I only user $routeProvider for the .otherwise function. You can also do a lot more cool stuff like onEnter and onExit with $stateProvider. Another thing is I would recommend you to use only Angular instead of jQuery. I do not really see a point of you using both. Use Angular's two-way data binding! Also, if you really want to get into Angular, then I recommend John Papa's style guide. This guys knows what he is talking about for making a great Angular app. I hope this info helps!

Thanks for your suggestion @Stephan . I'm newbie AngularJS and try to learn it more. I will receive your comment and adjust for my project. Thanks again :) — vvkungx, Feb 19 '15 at 06:46

Stop Controller's activity when switch route

1 Answers1