Чи має сенс використовувати 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, і, можливо, я маю пару додаткових залежностей від бібліотеки, Потрібно додати чітке, конкретне значення понад те, що я отримую, використовуючи Angular без вимоги?

Або, по-іншому:

"Чи потрібен ванільний кутовий, щоб ефективно керувати завантаженням основних компонентів Angular, якщо у мене є інші способи обробки основного завантаження сценарію? "

І я вважаю, що основною відповіддю на це є: "якщо тільки у вас щось не відбувається, і / або ви не можете використовувати новіші, сучасніші інструменти".

Будемо зрозумілі на початку: RequireJS - це чудовий інструмент, який вирішив деякі дуже важливі проблеми та запустив нас у дорогу, до якої ми йдемо, до більш масштабованих, більш професійних додатків Javascript. Важливо, що вперше багато людей стикалися з концепцією модуляризації та виведення речей із світового масштабу. Отже, якщо ви збираєтеся створити програму Javascript, яка потребує масштабування, то «Вимагати» та «шаблон AMD» не є поганими інструментами для цього.

Але чи є щось особливе щодо Angular, що робить Require / AMD особливо гарним? Ні. Насправді, Angular надає вам власну схему модуляції та інкапсуляції, яка багато в чому робить зайвими основні особливості модуляції AMD. І інтегрувати кутові модулі в шаблон AMD неможливо, але це трохи ... вибагливо. Ви обов'язково витратите час на отримання двох моделей, щоб вони добре інтегрувались.

З точки зору самої команди Angular, це є , від Брайана Форда, автора Angular Batarang і тепер члена основної команди Angular:

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

Отже, щодо дуже специфічного питання AngularJS: Angular and Require / AMD є ортогональними, а місцями перекриваються. Ви можете використовувати їх разом, але немає причин, конкретно пов'язаних з природою / моделями самого Angular.

Але як щодо базового управління внутрішніми та зовнішніми залежностями для масштабованих програм Javascript? Чи не вимагає робити щось дійсно критичне для мене там?

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

А що з ледачим завантаженням?

Зауважте, що ледачі завантаження та ледачі завантаження різні. Ліниве завантаження Angular не означає, що ви перетягуєте їх прямо з сервера. У застосуванні в стилі Yeoman з автоматичною підтримкою JavaScript ви об'єднуєте і з’єднуєте весь шебанг разом в один файл. Вони присутні, але не виконуються / встановлюються до необхідності до необхідності. Покращення швидкості та пропускної здатності, які ви отримуєте завдяки цьому, значно перевершує будь-які ймовірні поліпшення внаслідок ледачого завантаження певного 20-рядкового контролера. Насправді, даремна затримка мережі та накладні витрати для цього контролера будуть на порядок більше, ніж розміри самого контролера.

Але скажімо, що вам дійсно потрібні ледачі завантаження, можливо, для нечасто використовуваних фрагментів вашої програми, наприклад, інтерфейс адміністратора. Це дуже законний випадок. Вимога дійсно може зробити це за вас. Але є також багато інших , потенційно більш гнучких варіантів, які виконують те саме. І Angular 2.0, мабуть, подбає про це для нас, вбудований в маршрутизатор . ( Детальніше .)

А як бути під час розвитку на моєму місцевому розробнику?

Як я можу завантажувати всі свої десятки / сотні файлів сценаріїв, не потрібно вручну вкладати їх у index.html?

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

Нижня лінія?

Вимагати - це чудовий інструмент для певних речей. Але йдіть із зерном, коли це можливо, і розділіть свої проблеми, коли це можливо. Нехай Angular потурбується про власний модуляційний модуль Angular, і розгляне можливість використання модулів ES6 або CommonJS як загальної схеми модуляції. Нехай сучасні засоби автоматизації турбуються про завантаження скриптів та управління залежностями. І дбайте про асинхронізування ледачих навантажень гранульованим способом, а не пов'язуючи це з двома іншими проблемами.

Однак, якщо ви розробляєте кутові програми, але не можете встановити Node на вашій машині, щоб з певних причин використовувати інструменти автоматизації Javascript, то «Потрібно» може бути хорошим альтернативним рішенням. І я бачив дійсно складні установки, коли люди хочуть динамічно завантажувати кутові компоненти, які кожен заявляють про власні залежності чи щось подібне. І хоча я, мабуть, спробую вирішити цю проблему іншим способом, я бачу достоїнства ідеї саме для цієї конкретної ситуації.

Але в іншому випадку ... починаючи з нуля з новим додатком Angular та гнучкістю для створення сучасного середовища автоматизації ... у вас є маса інших, більш гнучких, більш сучасних варіантів.

(Оновлено неодноразово, щоб не відставати від розвивається сцени JS.)

Так, це має сенс.

Кутові модулі не намагаються вирішити проблему впорядкування завантаження скриптів або ледачого вилучення сценарію. Ці цілі є ортогональними, і обидві модульні системи можуть жити поряд і виконувати свої цілі.

Джерело: офіційний веб-сайт Angular JS

Це я вважаю суб'єктивним питанням, тому я висловлю свою суб’єктивну думку.

Angular має вбудований механізм модуляції. Коли ви створюєте додаток, перше, що ви зробите - це

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

і потім

app.directive(...);

app.controller(...);

app.service(...);

Якщо ви подивитесь на кутовий набір, який є акуратним додатком для початківців для кутових, вони розділили директиви, служби, контролери тощо на різні модулі, а потім завантажили ці модулі як залежності від вашого основного додатка.

Щось на зразок :

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

Кутовий також ледачий завантажує ці модулі (в пам'ять) не їх файли сценаріїв.

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

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

AngularJS має власну систему залежності, яка дозволяє вводити модулі AngularJS в новостворений модуль, щоб повторно використовувати реалізації. Скажімо, ви створили "перший" модуль, який реалізує фільтр AngularJS "привіт":

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

А тепер скажімо, що ви хочете використовувати фільтр "привітання" в іншому модулі під назвою "другий", який реалізує фільтр "до побачення". Ви можете зробити це, ввівши модуль "перший" у модуль "другий":

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.

Бічна примітка: Введення "angular" у файли "firstModule" та "secondModule" як залежність потрібна для того, щоб використовувати AngularJS всередині функції зворотного виклику RequireJS, і він повинен бути налаштований на конфігурації RequireJS для відображення "кутового" в код бібліотеки. Можливо, AngularJS також завантажується на сторінку традиційним чином (тег сценарію), хоча перемагає переваги RequireJS.

Детальніше про підтримку RequireJS від ядра AngularJS з версії 2.0 у своєму блозі.

Базуючись на моєму дописі в блозі "Створення сенсу RequireJS за допомогою AngularJS" , ось посилання .

Як згадував @ganaraj, AngularJS має ін'єкцію залежності у своїй основі. Створюючи додатки для насіння іграшок з і без RequireJS, я особисто виявив, що RequireJS був, мабуть, надмірним для більшості випадків використання.

Це не означає, що RequireJS не корисний, оскільки це можливість завантаження скриптів та підтримка чистоти вашої бази коду під час розробки. Поєднання оптимізатора r.js ( https://github.com/jrburke/r.js ) з мигдалем ( https://github.com/jrburke/almond ) може створити дуже тонку історію завантаження сценарію. Однак, оскільки функції управління залежністю не такі важливі, як у основі вашої програми, ви також можете оцінити іншу сторону клієнта (HeadJS, LABjs, ...) або навіть серверну (MVC4 Bundler, ...) рішення для завантаження сценарію. для вашої конкретної програми.

Так, спеціально для дуже великих SPA.

У деяких сценаріях RequireJS є обов'язковим. Наприклад, я розробляю програми PhoneGap за допомогою AngularJS, який також використовує API Google Map. Без завантажувача AMD, як RequireJS, додаток просто вийде з ладу при запуску в автономному режимі, оскільки він не може створити сценарії API Google Map. Навантажувач AMD дає мені можливість відобразити повідомлення про помилку користувачеві.

Однак інтеграція між AngularJS та RequireJS трохи хитра. Я створив кутовий AMD, щоб зробити це менш болісним процесом:

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

Коротка відповідь - це має сенс. Нещодавно про це йшлося в ng-conf 2014. Ось розмова на цю тему:

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

Має сенс використовувати Requjs з angularjs, якщо ви плануєте ледачі завантажувальні контролери та директиви тощо. RequireJS має інструмент оптимізації, який робить комбінування легким. Дивіться http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Так, має сенс використовувати RequJS з Angular, я витратив кілька днів на тестування декількох технічних рішень.

Я зробив кутове насіння з RequireJS на стороні сервера. Дуже простий. Я використовую позначення SHIM для жодного модуля AMD, а не для AMD, тому що я думаю, що дуже важко мати справу з двома різними системами введення залежностей.

Я використовую grunt і r.js для об'єднання файлів js на сервері, залежить від файлу конфігурації (залежності) SHIM. Тому я посилаюсь лише на один js-файл у своєму додатку.

Для отримання додаткової інформації перейдіть на мій кутовий насіння github: https://github.com/matohawk/angular-seed-requirejs

Я б уникав використання Require.js. Програми, які я бачив, це призводить до безладу декількох типів архітектури шаблонів модулів. AMD, викриття, різні аромати IIFE тощо. Існують інші способи завантаження на вимогу, наприклад, кутовий мод loadOnDemand . Додавання інших матеріалів просто заповнює ваш код, наповнений суворими, і створює низьке співвідношення сигнал / шум і робить ваш код важким для читання.

Ось підхід, який я використовую: 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/isissue/40

Я думаю, що це залежить від складності вашого проекту, оскільки кутова значно модулюється. Ваші контролери можуть бути відображені на карті, і ви можете просто імпортувати ці класи JavaScript на вашу сторінку index.html.

Але у випадку, якщо ваш проект стане більшим. Або ви передбачаєте такий сценарій, вам слід інтегрувати кутовий з Requjs. У цій статті ви можете побачити демо-додаток для такої інтеграції.