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

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

Я могу указать вам на проект семян, который использует both angular.js and require.js. Надеюсь, это поможет!

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

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

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

"Требуется ли vanilla Angular Требовать для эффективного управления базовым компонентом Angular, если у меня есть другие способы обработки базового script -loading?"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нижняя линия?

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

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

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

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

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

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

Источник: 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 также ленивы загружает эти модули (в память), а не их файлы script.

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

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

У AngularJS есть своя система зависимостей, которая позволяет вам вводить модули AngularJS в только что созданный модуль, чтобы повторно использовать реализации. Скажем, вы создали "первый" модуль, который реализует фильтр AngularJS "приветствовать":

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 обеспечивает чистый способ ввода сценариев на страницу, помогая вам организовывать зависимости script между собой.

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

// 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.

Боковое примечание: ввод "angular" в файлах "firstModule" и "secondModule" в зависимости от необходимости использования AngularJS внутри функции обратного вызова RequireJS, и его необходимо настроить в конфигурации RequireJS для отображения "angular" в библиотечный код. У вас может быть и AngularJS, загружаемый на страницу традиционным способом (script), хотя выигрывает от требований RequireJS.

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

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

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

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

Да, это особенно важно для очень большого SPA.

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

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

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

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

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

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

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

Я сделал семя 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, раскрытие, различные варианты IIFE и т.д. Существуют другие способы загрузки по запросу, такие как loadOnDemand Angular mod. Добавление другого материала просто заполняет ваш код, полный трещин, и создает низкое отношение сигнал/шум и делает ваш код трудным для чтения.

Вот подход, который я использую: 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. В статье этой вы можете увидеть демонстрационное приложение для такой интеграции.