javascript - 如何使用 Angular 缩放 Controller

Question

我有一些 Angular 应用程序，这非常简单。我已将所有内容放入一个 Controller 中，但我想将其拆分为多个 Controller ，以便每个 Controller 都应该执行属于它的操作，而不是在一个 Controller 中具有许多不同含义的不同功能。

这是一个代码:

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

那么，如何将其拆分为多个 Controller 以及如何在它们之间传递数据？

Answer 1

您可以将事物拆分为服务，例如以下项目可能是代码中的服务，然后将其依赖项注入(inject)到 Controller 中:

• 您的缓存逻辑，这通常是您想要重用的内容，因此成为一项服务很有意义。

您可能还希望将以下项目设为过滤器或指令:

• $scope.formatDate - 与每次想要格式化日期时调用此函数相比，在 html 中调用 {{ date | formatDate }} 会更容易。或<div formatDate>{{ date }}</div>

您也可以删除 pageSize，但这取决于您想要的粒度。