AngularJS - функции сплит-контроллера в нескольких файлах

Question

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

После примера:

test.controller('testCtrl', function testCtrl($scope) { 

    $scope.init_filters = function() { 
     $scope.filter_1 = []; 
     $scope.filter_2 = []; 
     $scope.filter_3 = []; 
     $scope.filter_4 = []; 
     $scope.filter_5 = []; 
    }; 

    $scope.showChanges = function() { 
     if ($scope.item_list.length > 0) { 
      $scope.messages = []; 
      for (var i = 0; i < $scope.item_list.length; i++) { 
       $scope.messages.push($scope.item_list[i].message); 
      } 
      $scope.another_function(); 
     }else{ 
      // other stuff 
     } 
    }; 

    //other functions like these 

} 

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

Итак, каковы лучшие практики для совершения чего-либо подобного? Является ли это возможным?

Answer 1

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

File1

app.controller('CtrlOne', function($scope){ 
app.expandControllerCtrlOne($scope); 

}); 

File2

app.expandControllerCtrlOne = function($scope) 
{ 

} 

Проверить это video

Answer 2

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

test.controller('testCtrl', function testCtrl($scope) 
{ 
    showChanges($scope); 
}); 


... 

function showChanges(scope) 
{ 
    scope.param1 = "Hello World"; 
} 

Answer 3

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

Я предлагаю вам пойти с следующим подходом:

1. Использования службы, чтобы добавить этот код в нем, которые вам нужны в других местах, и вы знаете, что этот код не требует объекта области видимости ..

2. Используйте завод, чтобы добавить некоторые полезные функции. Коллекция логики, которая не требует объекта области действия снова ...

3. Как код контроллера слишком большой, я думаю View/UI в то же время также согласно написал ... Так что для этого вы можете пойти с Создание директив для секции в поле зрения .. Где бы вы ни думали, что этот мир зрения может быть отдельной и автономной логической функциональностью, которую вы можете переместить в директиву. Есть три способа создания директивы с областями:

A. Общий Scope B.Изолированная область C: общая и изолированная область

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

Пусть говорят ::

module.controller('longRunController', function() { 


    @TYPE 1 code 
    // some code which fetch dat from API 
    // some code which save variable and objects which can used in another controller or directives 
    // some code which need to passed to other controller even after route changes 


    @TYPE 2 
    // some code which is only related this controller but has some bussiness logic 
    // some code which is a kind of utility functino 

    @TYPE 3 
    // all $scope related variable $watch, $scope and related variables 
    // some code of perticular section of which VIEW which handle by this controller 

}); 

Рассмотрим в выше скороговоркой ваш код контроллера имеет:

1. Так тип 1 код может быть перемещен в Службу
2. типа 2 код может быть перемещен на завод
3. тип 3 код может быть переадресован в директивы