Зависимости в Angular
Внеднение зависимостей
Все знают, что Angular построен на постоянном и вездесущем внедрении зависимостей, т.н. dependency injection. Существуют как минимум три способа сделать это.
1. Implicit annotation
Зависимости просто перечисляются как аргументы нашего модуля.
Пример
(function (A){
"use strict";
A.module('app', []).controller('MyCtrl', function($scope, $sce){
//Тут должен быть код контроллера
});
}(this.angular));Всё хорошо до момента минификации нашего кода. Это потому, что при таком объявлении функций Angular для определения нужных зависимостей превращает их код в строку, которую затем разбирает. А при минификации, как известно, все идентификаторы заменяются на более короткие, что делает наши скрипты неработоспособными.
2. $inject
Хороший способ внедрения зависимостей - создать статическое свойство функции под названием $inject. В нужный момент Angular возьмёт список зависимостей оттуда.
Пример
(function (A){
"use strict";
function MyCtrl($scope, $sce){
//Код контроллера
}
MyCtrl.$inject = [ '$scope', '$sce' ]; //Строки не сжимаются никогда
A.module('app', []).controller('MyCtrl', MyCtrl);
}(this.angular));Уже лучше. Такой код успешно переживёт минификацию.
3. Inline array annotation
Весьма хороший метод, не хуже предыдущего, но многие статические анализаторы кода, например, в Eclipse, считают такое поведение ошибкой (Они не правы!):
Пример
(function (A){
"use strict";
function MyCtrl($scope, $sce){
//Код контроллера
}
A.module('app', []).controller('MyCtrl', [ '$scope', '$sce', MyCtrl ]);
}(this.angular));Такой код тоже хорошо переживёт минификацию.
Дополнительно
Недавно узнал, что в Angular даже есть специальная директива для запрета внедрения зависимостей первым способом - ng-strict-di. Указывать её надо рядом с ng-app:
Пример
<!doctype html>
<html ng-app="app" ng-strict-di>
<head>
<!-- Код -->
</head>
<body>
<!-- И тут тоже код -->
</body>
</html>После этого попытка внедрения зависимостей через Implicit Annotation будет вызывать ошибку.
Спасибо, все по полочкам.
ОтветитьУдалить