Как масштабировать контроллеры с угловыми

Question

У меня есть угловое приложение, это очень просто. Я поместил все в один контроллер, но я хочу разбить его на несколько контроллеров, чтобы каждый контроллер должен выполнять действия, которые ему принадлежат, а не иметь много разных функций различного значения в одном контроллере.

Вот код:

var videoApp = angular.module('videoApp', ['videoAppFilters', 'ui.unique', 'angularUtils.directives.dirPagination']); 

videoApp.controller('VideoListCtrl', function ($scope, $http, $filter) { 

    $scope.getFilteredResults = function (category, data, callback) { 
     callback = callback ||$filter('articleFilter'); 
     $scope.videos = callback(category, data); 
     return $scope.videos; 
    }; 

    $scope.setPageSize = function (pageSize) { 
     $scope.pageSize = pageSize; 
     return $scope.pageSize; 
    }; 

    $scope.addFavorite = function (data, key) { 
     localStorage.setItem(key, data); 
     $scope.getFilteredResults(data, $scope.allData); 
     return alert(key + " "+ data + " was added to your favorite list."); 
    }; 

    $scope.addSelectedClass = function (event) { 
     if($(event.target).hasClass("selected") == true) 
     { 
      $(event.target).removeClass("selected"); 
     } else { 
      $(".selected").removeClass("selected"); 
      $(event.target).addClass("selected"); 
     } 
    }; 

    $scope.formatDate = function (dateString) { 
     var date = new Date(parseInt(dateString)); 
     return date.toDateString(); 
    }; 

    $scope.cacheLoad = function (url, allowCache) { 
     if(allowCache == false || localStorage.getItem(url) && (parseInt(localStorage.getItem(url + 'time')) + 20000) < (new Date().getTime()) || (!localStorage.getItem(url))) { 
      $http.get(url).success(function (data) { 

       $scope.allData = data; 
       $scope.videos = data; 

       if(localStorage.getItem('category')) { 
        $scope.videos = $scope.getFilteredResults(localStorage.getItem('category'), $scope.allData); 
       } else { 
        $scope.videos = data; 
       } 

       $scope.categories = $filter('categoryFilter')(data); 

       if(allowCache == true && parseInt(localStorage.getItem(url + 'time')) + 20000 < (new Date().getTime())) { 
        localStorage.setItem(url, JSON.stringify(data)); 
        localStorage.setItem(url + 'time', new Date().getTime()); 
       } 

      }); 
     } else { 
      $scope.allData = JSON.parse(localStorage.getItem(url)); 
      $scope.videos = JSON.parse(localStorage.getItem(url)); 
      $scope.categories = $filter('categoryFilter')(JSON.parse(localStorage.getItem(url))); 
     } 
    }; 

    $scope.pageSize = 12; 
    $scope.cacheLoad('http://academy.tutoky.com/api/json.php', true); 
}); 

Итак, как разделить это на несколько контроллеров и как передавать данные между ними?

Answer 1

Вы можете разделить вещи на услуги, например, следующий элемент может быть служба в вашем коде, что вы после этого зависимостей впрыснуть в контроллер:

• Вашей логики кэша, это обычно то, что вы бы хотите повторно использовать, поэтому имеет смысл быть услугой.

Вы также можете сделать следующий элемент фильтра или директивы:

• $ scope.formatDate - Вместо того, чтобы вызывать эту функцию каждый раз вы хотите отформатировать дату, это было бы намного легче ваш HTML позвонить {{ date | formatDate }} или <div formatDate>{{ date }}</div>

вы могли бы вырезать PAGESIZE тоже, но это зависит, как зернистые вы хотите пойти.