Понимание стиля кодирования в Angularjs

Я столкнулся с другим стилем кодирования, используя Angularjs, и это заставило меня задуматься о том, какое преимущество и недостаток каждого стиля кодирования.

например. Объявление контроллеров:

Стиль # 1

angular.module('mainCtrl', []);
function MainCrl($scope, $rootScope) {}

Стиль # 2

angular.module('mainCtrl',[])
.controller('MainCtrl', function($scope, $rootScope)) { ... });

Стиль # 3

angular.module('mainCtrl',[])
.controller('MainCtrl', ['$scope', '$rootScope', function(scope, rootScope)) { ... }]);

Следовательно, стиль # 3 в некоторой степени похож на использование псевдонима, использует ли псевдоним эффект, когда вы собираетесь писать тест-тест (модульное тестирование)?. Я просто хочу иметь лучшее понимание и правильный подход при использовании Angularjs Framework.

Пожалуйста, поделитесь своими мыслями об этом. Спасибо!

Ответ 1

Стиль # 1 означает, что контроллеры определены вне модуля как глобальные, хорошо для небольших тестовых проектов, но для любой серьезной работы все должно быть выполнено с помощью # 2 или # 3. Разница между # 2 и # 3 является # 3, которая может быть изменена, поскольку имена $scope и $rootScope в # 2 обычно будут оптимизированы, что приведет к сбою приложения. # 3 Сохраняет их как строки, которые не будут уменьшены.

Если есть хотя бы вероятность того, что вы будете сокращать свой код, перейдите на # 3. Там очень мало смысла использовать # 1 над # 2, поэтому я вообще избегаю # 1.

Ответ 2

Все они действительны, но публикация глобальных функций обычно не является хорошей идеей (имена могут конфликтовать), поэтому лучше иметь функции, инкапсулированные в собственный домен angular.

Это делает стиль № 2.

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

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

Когда его гасят, например, $rootScope становится a, и он выдает ошибку, например, нет aProvider, да, это правильно.

Итак, angular имеет другой синтаксис, это нотация массива; вместо определения функции вы можете определить массив, который имеет имена зависимостей, за которыми следует функция реализации.

Итак,

angular.controller("MainCtrl", ["$scope", "$routeParams", function (a,b) {
    // a == $scope
    // b == $routeParams
}]);

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

function MainCtrl(a,b) {
    // a == $scope
    // b == $routeParams        
}
MainCtrl.$inject = ["$scope", "$routeParams"];

Для получения дополнительной информации: http://docs.angularjs.org/guide/di