AngularJS RequireJS Browserify и модуль Javascript/глобальный прицел ночного кошмара

Question

Я немного копал в последнее время во всем этом сражении CommonJS против AMD, и это мои выводы ... (BTW Я не проповедую здесь. Я делюсь своими мыслями с получить некоторые конструктивные идеи ...) Требование JS приносит большую сложность моим модулям 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», я не использовал эту технику в команде и мне интересно, если это увольняет некоторые красные огни для некоторых, и если они объяснят, почему ... Спасибо за ваше время.

Answer 1

Из запроса функции у меня есть для inclusion of an AMD loader как часть дополнительных ng-модулей.

Угловая оснащена функцией, которая позволяет пользователям создавать определения модулей и искать объекты, такие как контроллеры, позже с помощью String Identifier. Угловой не поставляется с возможностью загрузки сценариев, хранящихся в отдельном файле, что означает, что вы остаетесь с четырьмя вариантами:

1. Храните все ваши javascript в одном файле.
2. Отделите свой javascript на отдельные файлы и добавьте теги сценариев для каждого файла.
3. Используйте файловый загрузчик AMD, например requireJS, для управления файлами сценариев и их зависимостями.
4. Используйте прекомпилятор как browserify, чтобы объединить файлы стиля 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.Сервисы; был загружен, также сложно сказать, какие конкретные компоненты доступны в «myApp.services». IOW Является ли «myService» загруженным и инъекционным?

В настоящее время я использую параметр № 3 в форме requirejs, потому что мне нужно иметь возможность динамически загружать контроллеры с помощью маршрутизации (см. Первую ссылку). Кроме того, размер приложения, с которым я сейчас работаю, делает браузер непрактичным, поскольку существует так много страниц. Однако я согласен с тем, что это неоптимально, но на данный момент я не вижу другого выбора.
С практической точки зрения, я определяю одну инъекцию для каждого файла. Я также пытаюсь сделать все инъекционные массивы соответствующими массиву require. Это не обязательно, но делает код более удобным.

Я нашел эти статьи полезными в написании этого:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx