AngularJS RequireJS Browserify и модуль Javascript / глобальный охват кошмар
В последнее время я немного копался во всех этих битвах CommonJS против AMD, и это мои выводы... (Кстати, я не проповедую здесь, я делюсь своими мыслями, чтобы получить некоторые конструктивные идеи...) RequireJS приносит много сложности мои модули Angular, мне кажется это неправильным, так как это обертка модуля в модуле... Способ Browserify более понятен, но для правильной работы с каждой вещью вам необходимо правильно реализовать все свои зависимости и зависимости-зависимости и к сожалению, мы не живем в идеальном мире... так что вы должны подбадривать внутреннюю зависимость от подкованных либов... я не большой поклонник дополнительной сложности...
То, как я сейчас иду (и подвергается всей вашей конструктивной критике...)
У меня есть файл grunt, который объединяет и минимизирует все мои ресурсы, такие как библиотеки BreezeJS, $, Q, Ladda и т. Д.... утечки в глобальной области видимости... Затем я объявляю этот модуль типа для этих глобальных переменных:
module.value('gLadda', (function(){
if("Ladda" in window && "Spinner" in window){
return Ladda;
}else{
throw new Error("The Globals Ladda || Spinner are missing");
}
})());
После того, как в моем приложении я работаю с зависимостями Angularify, я не использовал эту технику в команде, и мне интересно, не зажигает ли она некоторые красные огни, и если они объяснят почему... Спасибо за ваш время.
1 ответ
Из запроса функции я имею для включения загрузчик AMD в составе дополнительных ng-модулей.
Angular поставляется с функцией, которая позволяет пользователям создавать определения модулей и искать объекты, такие как контроллеры, позже по идентификатору строки. Angular не имеет возможности загружать скрипты, хранящиеся в отдельном файле, что означает, что у вас есть четыре варианта:
- Храните все ваши JavaScript в одном файле.
- Разделите ваш javascript на отдельные файлы и добавьте теги сценария для каждого файла.
- Используйте загрузчик файлов AMD, например requireJS, для управления файлами сценариев и их зависимостями.
- Используйте прекомпилятор, такой как http://browserify.org/, чтобы объединить файлы стилей nodejs в один файл сценария.
По мере роста проекта управлять файлами становится сложнее не только из-за их размера, но и из-за усложнения зависимостей между модулями. Крупные проекты также могут выиграть от ленивой загрузки загрузчика AMD.
Загрузчик модулей AMD перечисляет зависимости, которые должны присутствовать перед запуском этого файла. Проблема в том, что зависимости AMD близки к списку Injection, используемому Angular, но это не совсем то же самое. Одна проблема может быть замечена в этом коде:
define(['angular'], function(angular) {
return angular.module('myApp.controllers', ['myApp.services'])
.controller('MyController', ['$scope', 'myService',
function($scope, myService) {
$scope.data = myService.getData();
}
])
};
Определение оператора в верхней части говорит, чтобы убедиться, что angular инициализируется перед запуском этой функции. angular.module оператор говорит, что нужно искать "$scope" и "myService" и вставлять их в переменные $scope а также myService, Проблема в том, что загрузчик AMD мог не инициализировать файл, который определяет myApp.services, в котором вы можете предположить, определяется myServiceпотому что он не появился в определении определения выше. Это создает огромный разрыв между списком внедрения и списком зависимостей AMD. Мало того, что трудно сказать, если 'myApp.services; было загружено, также трудно сказать, какие конкретные компоненты доступны в "myApp.services". IOW Является ли myService одновременно загруженным и инъецируемым?
В настоящее время я использую опцию № 3 в форме requirejs, потому что мне нужно иметь возможность динамически загружать контроллеры через маршрутизацию (см. Первую ссылку). Кроме того, размер приложения, с которым я сейчас работаю, делает браузер непрактичным, так как страниц очень много. Я, однако, согласен, что это неоптимально, но я не вижу другого выбора в данный момент.
С практической точки зрения я определяю одну инъекцию для каждого файла. Я также стараюсь, чтобы все инъекционные массивы соответствовали массиву require. В этом нет необходимости, но это делает код более понятным.
Я нашел эти статьи полезными при написании этого: