如何用角度縮放控制器

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 }} {{ date | formatDate }}或<div formatDate>{{ date }}</div>

您可能也可以去除pageSize，但這取決於您想要的粒度。