Как избежать большого количества зависимостей в Angularjs

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

например

app.controller('viewapps',[
    '$scope','Appfactory','Menu','$timeout','filterFilter','Notice', '$routeParams', 
    function($scope,Appfactory,Menu,$timeout,filterFilter,Notice,$routeParams) {
        //controller code..    
}])

Я уверен, что список зависимостей будет расти в будущем. Я здесь что-то не так? Правильно ли это? Каков наилучший способ эффективно справиться с этим?

Ответ 1

Трудно быть конкретным без точного варианта использования или видеть точный код в вашем контроллере, но похоже, что ваш контроллер может делать слишком много (или может закончиться тем, что слишком много добавляет, когда вы добавляете вещи позже). 3 вещи, которые вы можете сделать:

Делегировать больше логики для служб, которые вставляются.
Отделитесь от разных контроллеров, так что каждый из них имеет только (1) ответственность.
Разделите в директивы, каждый со своими собственными контроллерами и шаблонами, а также разрешите передачу параметров и выдачу данных через атрибуты и опцию scope директивы. Это часто мой предпочтительный вариант, так как вы в итоге создаете набор повторно используемых компонентов, каждый из которых имеет мини-API.

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

Ответ 2

Я играл с идеей объединения сервисов на основе контроллеров.

Итак, в вашем примере вы бы реорганизовали ваш; AppFactory, меню, filterFilter и уведомление в одном сервисе, например. ViewAppsServices.

Затем вы будете использовать свои услуги, такие как ViewAppsServices.AppFactory.yourFunction().

Как я вижу, вы можете по крайней мере перенести свои инъекции в другой файл, немного очистив контроллер.

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

Здесь JSFiddle я собрал, чтобы продемонстрировать, как это будет работать; это то, как я мог бы предположить, что ваша работа будет работать.

.service('ViewAppsServices', ['AppFactory', 'Menu', 'filterFilter', 'Notice', 
function (AppFactory, Menu, filterFilter, Notice) {
    return {
        AppFactory: AppFactory,
        Menu: Menu,
        filterFilter: filterFilter,
        Notice: Notice
    };
} ])

Ответ 3

Постарайтесь максимально использовать логику для сервисов, даже просто создайте методы контроллера как методы маршрутизации - прохождения через. Со временем вы увидите, что это очень полезно, если вы захотите использовать аналогичные методы в других контроллерах/директивах. Во всяком случае, 7 инъекций, на мой взгляд, не много:)

(отредактируйте: см. комментарий Matt Way ниже) Кроме того, подсказка - в новых версиях Angular вам не нужно писать этот массив, просто:

app.controller('viewapps', function($scope,Appfactory,Menu, $timeout,filterFilter,Notice,$routeParams){
   //controller code..    
}])

Ответ 4

Мой подход заключается в использовании $injector, когда есть много зависимостей:

app.controller('viewapps', ['$scope','$injector',function($scope,$injector){                               
    var Appfactory = $injector.get('Appfactory');
    var Menu = $injector.get('Menu'); 
    //etc...
}]);

Преимущества:

Код может быть минимизирован и обезврежен безопасно
Вам не нужно подсчитывать индекс зависимости, когда вы объявляете зависимость как параметр функции