Я только недавно создал веб-приложение с угловым. Мне очень нравится, как угловой манипулятор Model-View-Controller, поэтому я строю свой контроллер для обработки события нажатия кнопки, события изменения даты и т.д., В то время как бизнес-логика контролируется моделью. Проблема в том, что чем больше кнопок или элементов управления я вставляю в мой взгляд, тем больше мой скрипт контроллера.
Например: если у меня есть 2 кнопки, мой контроллер будет выглядеть так:
$scope.onBtn1Clicked = function(){}
$scope.onBtn2Clicked = function(){}
Итак, что, если у меня еще 10 кнопок? Еще 10 функций? Мне хорошо известно о директиве Angular, но я не хочу писать директиву, если я буду использовать ее только один раз. Поэтому я думаю, что лучше разделить/разделить мой контроллер на несколько файлов "подконтроллера" и присоединиться к ним в моем "основном контроллере".
Это можно сделать? Или у кого-нибудь есть другое решение? Спасибо
PS: Я знаю о том, как создавать отдельные файлы контроллера AngularJS? , Но это другое: я уже отделил свои контроллеры к нескольким файлам, так что на странице моего приложения есть один контроллер. Проблема в том, что этот контроллер становится настолько большим и невозможным поддерживать
Это зависит:
Если функция управляет некоторым поведением элемента, она должна находиться внутри директивы
Если функция содержит некоторую независимую логику, она должна находиться внутри службы (или фабрики или поставщика)
Если функция содержит бизнес-логику, контроллер должен
Также: если какая-то логика может быть отделена, вам нужно поместить ее в субконтроллер (директиву или услугу)
Да, конечно, вы можете встраивать контроллеры
контроллеры
myApp.controller('MainController', ['$scope', function($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
$scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbread Baby';
}]);
и разметки
<body ng-app="app">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="ChildController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="GrandChildController">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</body>