Расширить угловой контроллер

Question

В текущем проекте, в котором я работаю, у меня есть контроллер, который занимается операциями, выполняемыми на сетке. Как удалить Редактировать добавить новую строку инициализировать проверку и так далее. В начале все было хорошо, но по мере того, как операции увеличивали файл, он превращался в очень длинный файл, и ему казалось, что трудно найти материал и работать. Я добавлю следующий пример кода, который будет описывать мой вопрос.

Мой вопрос: есть ли способ расширить контроллер на несколько файлов? Или есть лучший способ решить мою проблему?

app.js

var myApp = angular.module('myApp', ['mainControllers']); 

gridCntrl

mainControllers.controller('mainController', ['$scope', function ($scope) { 
    $scope.init = function() { 
    alert('I am initialized'); 
     }; 
    $scope.click = function() { 
    alert('I am clicked'); 
     }; 

}]); 

Чтобы быть более ясно, есть ли способ, чтобы отделить $ scope.init и $ scope.click под тем же контроллером но в отдельных файлах? Спасибо

Answer 1

Как указано в комментариях, вы должны оценить, почему ваш контроллер настолько велик.

Контроллеры должны просто определять данные ViewModel и маршала между ViewModel и Model.

Если у вас есть бизнес-логика, переместите ее на службу.

В противном случае, если у вас есть независимые области функциональности, разделите его на несколько контроллеров. Не бойтесь создавать контроллеры.

Скажем, у вас есть приложение с панелью управления, которая определяет некоторую конфигурацию, основной вид и другие части (например, UserProfile). Хотя они всегда могут отображаться бок о бок в пользовательском интерфейсе (и, фактически, одним и тем же представлением), логика пользовательского интерфейса панели управления (то, что отображается/включено/добавлено, когда пользователь взаимодействует с ней) должно быть инкапсулировано в controlPanelController и основное взаимодействие приложения в одном или нескольких других контроллерах.

Таким образом, вы можете сделать:

<div ng-controller="mainCtrl"> 
    <div ng-controller="controlPanelCtrl" ng-include="'partial/controlpanel'"></div> 
    <div ng-controller="mainViewCtrl" ng-include="'partial/mainview'"></div> 
    <div ng-if="isUserLoggedIn()" ng-controller="profileInfoCtrl ng-include="'partials/profile'"></div> 
</div> 

.controller("mainCtrl", function($scope, ConfigSvc, UserService){ 
    $scope.config = ConfigSvc; 
    $scope.isUserLoggedIn = UserService.isLoggedIn; 
}) 

.controller("controlPanelCtrl", function($scope, ConfigSvc){ 
    $scope.config = ConfigSvc; 
    $scope.changeColor = function(color){ ConfigSvc.color = color; }; 
}) 

.controller("mainViewCtrl", function($scope, ConfigSvc){ 
    $scope.color = ConfigSvc.color; 
}) 

Чем шире точка, разбить контроллер на несколько контроллеров, а не один контроллер, который определен в нескольких файлах.