Где я должен разместить свой код ag-grid?

У меня есть одно представление, содержащее ag-сетку и один контроллер для моего углового приложения. Я пытаюсь очистить контроллер, сделать его «тонким», и я уже убрал часть кода в директиву и настроил службы для извлечения данных.

Теперь у меня остался большой блог с кодом ag-grid, который в идеале я хотел бы увидеть где-нибудь в другом месте, но я не уверен, где это будет лучше всего.

Есть ли здесь лучшая практика?

<div class="container" ng-controller="MainController">

<div class="row">
    <div class="col-sm-4">
        <div>
            <div ag-grid="gridOptions" class="ag-fresh" style="height: 500px; width: 100%"></div>
        </div>
    </div>
    <div class="col-sm-8">
        <div my-directive body-unid="currentUNID"></div>
    </div>
</div>

agGrid.initialiseAgGridWithAngular1(angular);

angular.module('app') .controller('MainController', function ($scope, myService, MyConfig) {

    $scope.isExternalFilterPresent = function () {
        return $scope.searchtext != "";
    };

    $scope.doesExternalFilterPass = function (node) {

        // Returning true means all the documents are displayed
        if ($scope.searchtext == "") {
            return true;
        }

        if ($scope.joinedUnidsOfSearch) {
            return ($scope.joinedUnidsOfSearch.indexOf(node.data['@unid']) >= 0);
        } else {
            return true;
        }
    };

    var columnDefs = [
        {
            headerName: "Navigation", field: "Subject", cellStyle: function (params) {
            if (params.data["@indent"]) {
                switch (params.data["@indent"]) {
                    case 1:
                        return {'margin-left': '10px'};
                        break;
                    case 2:
                        return {'margin-left': '20px'};
                        break;
                    case 3:
                        return {'margin-left': '30px'};
                        break;
                    case 4:
                        return {'margin-left': '40px'};
                        break;
                    default:
                        return {'margin-left': '50px'};
                        break;
                }
            } else {
                return {'font-size': 'large'};
            }
        }
            //, headerName: "unid", field: "@unid"
        }
    ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowSelection: 'single',
        enableFilter: true,
        isExternalFilterPresent: $scope.isExternalFilterPresent,
        doesExternalFilterPass: $scope.doesExternalFilterPass,

        angularCompileRows: true,
        onRowClicked: function (event) {
            //console.log('a row was clicked', event.data["@unid"]);
            $scope.currentUNID = event.data["@unid"];
            $scope.$apply();
        },
        onColumnResized: function (event) {
            //console.log('a column was resized');
        },
        onGridReady: function (event) {
            //console.log('the grid is now ready');
        },

        // onRowSelected: rowSelected,
        // onSelectionChanged: onSelectionChanged,

        onGridSizeChanged: function () {
            //console.log('Grid Size changed');
            $scope.gridOptions.api.sizeColumnsToFit();
        }
    };

    $scope.databaseTitle = MyConfig.databaseTitle;

    $scope.SearchButtonClick = function () {
        $scope.searchComment = '';
        loadSearchResults($scope);
    };

    $scope.ClearSearchBox = function () {
        $scope.searchtext = '';
        $scope.searchComment = '';
        $scope.gridOptions.api.onFilterChanged();
    };


    $scope.NextButtonClick = function () {
        //console.log("next button clicked");
        var selectedNodes = $scope.gridOptions.api.getSelectedNodes();
        if (selectedNodes) {
            if (selectedNodes && selectedNodes.length === 1) {
                var selectedNode = selectedNodes[0];
                $scope.gridOptions.api.forEachNodeAfterFilter(function (node) {
                    if (node.childIndex === (selectedNode.childIndex + 1)) {
                        node.setSelected(true);
                        $scope.currentUNID = node.data["@unid"];
                        return;
                    }
                });
            }
        }
    };

    $scope.PrevButtonClick = function () {
        //console.log("next button clicked");
        var selectedNodes = $scope.gridOptions.api.getSelectedNodes();
        if (selectedNodes) {
            if (selectedNodes && selectedNodes.length === 1) {
                var selectedNode = selectedNodes[0];
                $scope.gridOptions.api.forEachNodeAfterFilter(function (node) {
                    if (node.childIndex === (selectedNode.childIndex - 1)) {
                        node.setSelected(true);
                        $scope.currentUNID = node.data["@unid"];
                        return;
                    }
                });
            }
        }
    };

    function loadSearchResults($scope) {
        //console.log('loadSearchResults started');
        if ($scope.searchtext) {
            myService.loadAllUNIDSThatMatchSearch($scope.searchtext).then(function (data) {
                //console.log('start after loading of search UNIDS');
                var receiveddata = angular.fromJson(data);
                if (receiveddata) {
                    if (receiveddata.length > 0) {
                        $scope.searchComment = '';
                        var arrayUNIDS = receiveddata.map(function (a) {
                            return a["@unid"];
                        });
                        $scope.joinedUnidsOfSearch = arrayUNIDS.join(); // this variable gets used in the function doesExternalFilterPass
                        $scope.gridOptions.api.onFilterChanged(); // refreshes filter of grid
                        // set the selected document to the first of the search query
                        $scope.gridOptions.api.forEachNodeAfterFilter(function (node) {
                            if (node.firstChild === true) {
                                // node.setSelected(true);
                                $scope.gridOptions.api.selectNode(node, true);
                                $scope.currentUNID = node["@unid"];
                            }
                        });
                    } else {
                        if ($scope.searchtext == '' || $scope.searchtext == undefined) {
                            $scope.searchComment = 'Das Suchfeld ist leer!';
                        } else {
                            $scope.searchComment = 'Keine Dokumenten für ' + $scope.searchtext + ' gefunden.';
                        }


                    }
                }
                //console.log('end after loading of search UNIDS');
            });
        }
        //console.log('loadSearchResults ended');
    }

    myService.loadAllNavigationDocuments()
        .then(function (response) {
            $scope.gridOptions.api.setRowData(response);
        });


});