Имеет ли смысл использовать Require.js с Angular.js? [закрыто]

Я новичок в Angular.js и пытаюсь понять, чем он отличается от Backbone.js ... Мы использовали для управления зависимостями наших пакетов с помощью Require.js при использовании Backbone. Имеет ли смысл делать то же самое с Angular.js?

Да, имеет смысл использовать angular.jsвместе с тем, require.jsгде вы можете использовать require.jsдля модульности компонентов.

Есть начальный проект, который использует both angular.js and require.js.

Чтобы переформулировать то, что я думаю, вопрос ОП на самом деле:

Если я создаю приложение в основном на Angular 1.x и (неявно) делаю это в эпоху Grunt / Gulp / Broccoli и Bower / NPM, и у меня может быть пара дополнительных библиотечных зависимостей, требуется ли для Require добавить четкие, специфичные значение, превышающее то, что я получаю, используя Angular без Require?

Или, говоря по-другому:

«Нужно ли Vanilla Angular требовать эффективного управления базовой загрузкой компонентов Angular, если у меня есть другие способы обработки базовой загрузки скриптов? »

И я полагаю, что основной ответ на этот вопрос: «Нет, если у вас не происходит что-то еще, и / или вы не можете использовать более новые, более современные инструменты».

Давайте с самого начала проясним: RequireJS - это отличный инструмент, который решил некоторые очень важные проблемы и направил нас по пути к более масштабируемым, более профессиональным приложениям Javascript. Важно отметить, что это было впервые, когда многие люди столкнулись с концепцией модульности и выведения вещей из глобальной сферы видимости. Итак, если вы собираетесь создавать приложение Javascript, которое нужно масштабировать, то Require и шаблон AMD не являются плохими инструментами для этого.

Но есть ли что-то особенное в Angular, которое делает Require / AMD особенно подходящим? Нет. Фактически, Angular предоставляет вам свой собственный шаблон модульности и инкапсуляции, который во многих отношениях делает избыточными базовые функции модульности AMD. И интеграция модулей Angular в паттерн AMD не является невозможной, но она немного ... привередлива. Вы определенно будете тратить время на то, чтобы эти две модели хорошо интегрировались.

Для некоторых из перспективы самого угловой команды, есть это , от Брайана Форда, автора углового Batarang и теперь члена угловой основной команды:

Я не рекомендую использовать RequireJS с AngularJS. Хотя это, конечно, возможно, я не видел ни одного случая, когда RequireJS был бы полезным на практике.

Итак, по очень конкретному вопросу AngularJS: Angular и Require / AMD ортогональны и местами перекрываются. Вы можете использовать их вместе, но нет никаких причин, конкретно связанных с природой / паттернами самого Angular.

Но как насчет базового управления внутренними и внешними зависимостями для масштабируемых приложений Javascript? Разве Требование не делает что-то действительно критическое для меня там?

Я рекомендую проверить Bower и NPM, и особенно NPM. Я не пытаюсь начать священную войну за сравнительные преимущества этих инструментов. Я просто хочу сказать: есть другие способы снять шкуру с этой кошки, и эти способы могут быть даже лучше, чем AMD / Require. (У них, конечно, гораздо более популярный импульс в конце 2015 года, особенно NPM, в сочетании с модулями ES6 или CommonJS. См. Связанный вопрос SO .)

Что насчет ленивой загрузки?

Обратите внимание, что отложенная загрузка и отложенная загрузка различаются. Ленивая загрузка Angular не означает, что вы извлекаете их прямо с сервера. В приложении в стиле Yeoman с автоматизацией javascript вы объединяете и минимизируете весь shebang в один файл. Они присутствуют, но не исполняются / не создаются, пока не понадобятся. Улучшения скорости и пропускной способности, которые вы получаете от этого, значительно перевешивают любые предполагаемые улучшения от ленивой загрузки конкретного контроллера с 20 линиями. Фактически, затраченная сетевая задержка и накладные расходы передачи для этого контроллера будут на порядок больше, чем размер самого контроллера.

Но допустим, что вам действительно нужна отложенная загрузка, возможно, для нечасто используемых частей вашего приложения, таких как интерфейс администратора. Это очень законный случай. Требовать действительно может сделать это для вас. Но есть также много других , потенциально более гибких вариантов, которые выполняют то же самое. И Angular 2.0, по-видимому, позаботится об этом для нас, встроенных в маршрутизатор . ( Подробности .)

Но как насчет разработки моего локального dev boxen?

Как я могу загрузить все свои десятки / сотни файлов сценариев без необходимости присоединять их все к index.html вручную?

Посмотрите на суб-генераторы в Yeoman-генератор-angular, или на шаблоны автоматизации, воплощенные в generator-gulp-angular , или на стандартную автоматизацию Webpack для React. Они предоставляют вам чистый, масштабируемый способ: либо автоматически прикреплять файлы во время создания компонентов, либо просто автоматически захватывать их, если они присутствуют в определенных папках / соответствуют определенным шаблонам глобуса. Вам больше никогда не нужно думать о собственной загрузке скрипта, если у вас есть последние опции.

Нижняя граница?

Require - отличный инструмент для определенных вещей. Но идите с зерном, когда это возможно, и разделяйте ваши проблемы, когда это возможно. Позвольте Angular позаботиться о собственном шаблоне модульности Angular и рассмотрите возможность использования модулей ES6 или CommonJS в качестве общего шаблона модульности. Пусть современные средства автоматизации беспокоятся о загрузке скриптов и управлении зависимостями. И позаботьтесь об асинхронной ленивой загрузке, а не путайте ее с двумя другими проблемами.

Тем не менее, если вы разрабатываете приложения для Angular, но по какой-то причине не можете установить Node на свой компьютер для использования инструментов автоматизации Javascript, то Require может быть хорошим альтернативным решением. И я видел действительно сложные установки, где люди хотят динамически загружать компоненты Angular, каждый из которых объявляет свои собственные зависимости или что-то в этом роде. И хотя я, вероятно, попытался бы решить эту проблему по-другому, я вижу преимущества этой идеи для этой конкретной ситуации.

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

(Обновляется неоднократно, чтобы не отставать от развивающейся сцены JS.)

Да, это имеет смысл.

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

Источник: Angular JS официальный сайт

Я считаю, что это субъективный вопрос, поэтому я выскажу свое субъективное мнение.

В Angular встроен механизм модульности. Когда вы создаете свое приложение, первое, что вы должны сделать, это

var app = angular.module("myApp");

а потом

app.directive(...);

app.controller(...);

app.service(...);

Если вы посмотрите на angular-seed, который является аккуратным стартовым приложением для angular, они разделили директивы, сервисы, контроллеры и т. Д. На разные модули, а затем загрузили эти модули как зависимости от вашего основного приложения.

Что-то вроде :

var app = angular.module("myApp",["Directives","Controllers","Services"];

Angular также лениво загружает эти модули (в память), а не их файлы сценариев.

С точки зрения отложенной загрузки файлов сценариев, если быть откровенным, если вы не пишете что-то очень большое, это будет излишним, потому что angular по самой своей природе уменьшает количество кода, который вы пишете. Типичное приложение, написанное в большинстве других фреймворков, может ожидать сокращения LOC примерно на 30-50%, если оно написано в угловом формате.

Использование RequireJS с AngularJS имеет смысл, но только в том случае, если вы понимаете, как каждый из них работает в отношении внедрения зависимостей , поскольку, хотя оба они внедряют зависимости, они вводят совершенно разные вещи.

AngularJS имеет свою собственную систему зависимостей, которая позволяет вводить модули AngularJS во вновь созданный модуль для повторного использования реализаций. Допустим, вы создали «первый» модуль, который реализует AngularJS-фильтр «greet»:

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

А теперь давайте предположим, что вы хотите использовать фильтр "greet" в другом модуле под названием "second", который реализует фильтр "до свидания". Вы можете сделать это, вставив «первый» модуль во «второй» модуль:

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

Дело в том, что для правильной работы без RequireJS необходимо убедиться, что «первый» модуль AngularJS загружен на страницу перед созданием «второго» модуля AngularJS. Цитирование документации:

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

В этом смысле, вот где RequireJS может помочь вам, так как RequireJS предоставляет чистый способ внедрения сценариев на страницу, помогая вам организовать зависимости между сценариями между собой.

Возвращаясь к «первому» и «второму» модулям AngularJS, вот как вы можете сделать это, используя RequireJS, разделяющий модули на разные файлы, чтобы использовать загрузку зависимостей скрипта:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

Вы можете видеть, что мы зависим от файла «firstModule», который должен быть введен до того, как может быть выполнен контент обратного вызова RequireJS, для которого требуется «первый» модуль AngularJS, чтобы создать «второй» модуль AngularJS.

Примечание: для использования AngularJS внутри функции обратного вызова RequireJS необходимо настроить «angular» в файлах «firstModule» и «secondModule» и настроить его в конфигурации RequireJS для сопоставления «angular» с кодом библиотеки. Возможно, AngularJS также загружен на страницу традиционным способом (тэг скрипта), хотя и не дает преимуществ RequireJS.

Более подробная информация о поддержке RequireJS из ядра AngularJS версии 2.0 в моем блоге.

Основываясь на моем сообщении в блоге "Осмысление RequireJS с AngularJS" , вот ссылка .

Как упомянул @ganaraj, AngularJS имеет в своей основе внедрение зависимостей. При создании приложений для игрушечных семян с и без RequireJS я лично обнаружил, что RequireJS, вероятно, был излишним для большинства случаев использования.

Это не означает, что RequireJS бесполезен из-за возможностей загрузки скриптов и поддержания чистоты базы кода во время разработки. Объединение оптимизатора r.js ( https://github.com/jrburke/r.js ) с Almond ( https://github.com/jrburke/almond ) может создать очень тонкую историю загрузки скриптов. Однако, поскольку его функции управления зависимостями не так важны для angular в ядре вашего приложения, вы также можете оценить решения для загрузки скриптов на стороне клиента (HeadJS, LABjs, ...) или даже на стороне сервера (MVC4 Bundler, ...) для вашего конкретного применения.

Да, это так, особенно для очень больших SPA.

В некоторых случаях RequireJS является обязательным. Например, я разрабатываю приложения PhoneGap, используя AngularJS, который также использует Google Map API. Без загрузчика AMD, такого как RequireJS, приложение просто зависнет при запуске в автономном режиме, так как не сможет получить сценарии API Google Map. Загрузчик AMD дает мне возможность отобразить сообщение об ошибке пользователю.

Однако интеграция между AngularJS и RequireJS немного сложнее. Я создал angularAMD, чтобы сделать этот процесс менее болезненным:

http://marcoslin.github.io/angularAMD/

Короткий ответ, это имеет смысл. Недавно это обсуждалось в ng-conf 2014. Вот разговор на эту тему:

http://www.youtube.com/watch?v=4yulGISBF8w

Имеет смысл использовать requirejs с angularjs, если вы планируете ленивую загрузку контроллеров и директив и т. Д., А также объединять несколько ленивых зависимостей в отдельные файлы сценариев для гораздо более быстрой ленивой загрузки. RequireJS имеет инструмент оптимизации, который облегчает объединение. Смотрите http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Да, имеет смысл использовать requireJS с Angular, я потратил несколько дней, чтобы протестировать несколько технических решений.

Я сделал угловое семя с RequireJS на стороне сервера. Очень простой Я использую обозначение SHIM для модуля AMD, а не для AMD, потому что я думаю, что очень трудно иметь дело с двумя разными системами внедрения Dependency.

Я использую grunt и r.js для объединения файлов js на сервере, в зависимости от файла конфигурации (зависимости) SHIM. Поэтому я ссылаюсь только на один файл js в моем приложении.

Для получения дополнительной информации перейдите на мой github Angular Seed: https://github.com/matohawk/angular-seed-requirejs

Я бы не использовал Require.js. Приложения, которые я видел, которые делают это, запутывают много типов архитектуры шаблонов модулей. AMD, Revealing, различные варианты IIFE и т. Д. Существуют и другие способы загрузки по требованию, например мод LoadOnDemand Angular . Добавление других вещей просто наполняет ваш код, полный бесполезности и создает низкое отношение сигнал / шум и делает ваш код трудным для чтения.

Вот подход, который я использую: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

На странице показана возможная реализация AngularJS + RequireJS, где код разбит по функциям, а затем по типу компонента.

Ответ от Брайана Форда

AngularJS имеет собственную модульную систему, которая обычно не требует чего-то вроде RJS.

Ссылка: https://github.com/yeoman/generator-angular/issues/40

Я думаю, что это зависит от сложности вашего проекта, так как angular в значительной степени модульный. Ваши контроллеры могут быть сопоставлены, и вы можете просто импортировать эти классы JavaScript на своей странице index.html.

Но в случае, если ваш проект станет больше. Или вы предвидите такой сценарий, вам следует объединить angular с requirejs. В этой статье вы можете увидеть демонстрационное приложение для такой интеграции.