How to scale controllers with angular

Question

I have some angular app, that is really easy. I've put everything into one controller, but i want to split it into multiple controllers so every controller should do action that belongs to it, not have a lot of different function of different meaning in one controller.

Here is a code:

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

So, how to split this into multiple controllers and how to pass data between them?

Answer 1

You could split things out into Services, for example the following item could be a service in your code, that you then dependency inject into your controller:

• Your Cache logic, This is normally something you would want to reuse so it makes sense to be a service.

You might also want to make the following item a filter or directive:

• $scope.formatDate - Rather than calling this function everytime you want to format a date, it would be much easier in your html to call {{ date | formatDate }} {{ date | formatDate }} or <div formatDate>{{ date }}</div>

You could probably strip out the pageSize too but it depends how granular you want to go.