Организация кода AngularJS огромный контроллер

Question

У меня есть огромный контроллер, я разделил его на субконтроллеры, которые я поместил в другие файлы в соответствии с их функциональностью.

Все работает нормально, но мне нужен совет и ответ на мой вопрос: Я сделал все правильно?

здесь огромный контроллер:

function controller($scope, $http) { 
    //code 
    someFunction($scope, boolA, function1, function2); 
    //code 
} 

вот код моей дки в другом файле, который я загружаю после фронт-контроллера:

function someFunction($scope, boolA, function1, function2) { 
    //code where I use all the parametrs of function 
    function someFunctionSubcontoller() { 
    //here is used another function from other subcontroller 
    } 
} 

это нормально, чтобы отправить функции, параметры? Все в порядке, не возвращаю ли я ничего из субконтроллеров, потому что $ scope наблюдает за всем? Это нормально, если я использую некоторые функции contoller в другом?

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

спасибо за ваш совет и помощь !!!

Answer 1

Контроллер с 10000 строк кода орет что вы нарушаете Single Responsibility Principle несколько раз в вашем коде.

Вместо того, чтобы создавать «субконтроллеры», вы должны сначала пересмотреть свой код и переместить многократно используемые сегменты кода в службы. Затем найдите общие компоненты в пользовательском интерфейсе, которые вы можете конвертировать в директивы, и переместите некоторую логику в контроллер для этих директив, используя области изоляции. Вы обнаружите, что гораздо легче контролировать и тестировать эти элементы, когда они несут ответственность за себя.

Далее, используйте синтаксис 'Controller As', который позволяет вам разорвать ваши связи с помощью $scope. Использование $scope - это anti-pattern, так как очень трудно определить, где используются элементы, размещенные непосредственно на $scope, из которых исходят. Очень легко найти, что объект имеет значение, отличное от того, что вы намеревались, потому что оно было изменено где-то еще. От Angular Documentation:

• Использование контроллера, так как очевидно, какой контроллер вы используете в шаблоне, когда к контроллеру применяются несколько контроллеров.

• Если вы пишете свои контроллеры в качестве классов, у вас есть более легкий доступ к свойствам и методам, которые появятся в области видимости, изнутри кода контроллера.

• Поскольку в привязках всегда есть ., вам не нужно беспокоиться о прототипальных примитивах маскирования наследования.

В нижней строке вы, вероятно, обнаружите, что если вы реорганизуете свой код, а не просто «сломаете его», вы получите гораздо более управляемое, проверяемое и надежное решение.

Answer 2

Я предлагаю вам использовать angular.module() при написании кода. Я отделяю ваш код в хорошем & модульным способом.

Вы можете создать дополнительный контроллер и ввести его в свой основной контроллер, используя зависимость $controller.

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

app.controller('subCtrl', function(){ 
    $scope.test3 = function(){ 
    //code 
    }; 
    $scope.test4 = function(){ 
    //code 
    }; 
}); 

app.controller('ParentCtrl', function($scope, $controller){ 
    //injecting subCtrl scope inside ParentCtrl 
    $controller('subCtrl', {$scope: $scope}); 
    //after this line method and $scope variables of subCtrl will be available. 
    $scope.test = function(){ 
    //code 
    }; 
    $scope.test2 = function($scope){ 
    //code 
    }; 
});