Est-il judicieux d'utiliser Require.js avec Angular.js? [fermé]

Je suis un débutant à Angular.js et j'essaie de comprendre en quoi il diffère de Backbone.js ... Nous avions l'habitude de gérer nos dépendances de packages avec Require.js tout en utilisant Backbone. Est-il judicieux de faire de même avec Angular.js?

Oui, il est logique d'utiliser angular.jsavec require.jslequel vous pouvez utiliserrequire.js pour la modularisation des composants.

Il existe un projet d'amorçage qui utilise both angular.js and require.js.

Pour reformuler ce que je pense que la question du PO est vraiment:

Si je crée une application principalement dans Angular 1.x, et (implicitement) à l'ère de Grunt / Gulp / Broccoli et Bower / NPM, et que j'ai peut-être quelques dépendances de bibliothèque supplémentaires, faut-il ajouter clair, spécifique valeur au-delà de ce que j'obtiens en utilisant Angular sans exiger?

Ou, autrement dit:

"Vanilla Angular a-t-il besoin de gérer efficacement le chargement de composants Angular de base, si j'ai d'autres moyens de gérer le chargement de scripts de base? "

Et je crois que la réponse de base à cela est: "pas à moins que vous ayez quelque chose d'autre en cours et / ou que vous ne puissiez pas utiliser des outils plus récents et plus modernes."

Soyons clairs au début: RequireJS est un excellent outil qui a résolu des problèmes très importants et nous a lancé sur la voie que nous suivons, vers des applications Javascript plus évolutives et plus professionnelles. Surtout, c'était la première fois que de nombreuses personnes rencontraient le concept de modularisation et de sortir les choses de la portée mondiale. Donc, si vous allez créer une application Javascript qui doit évoluer, alors Require et le modèle AMD ne sont pas de mauvais outils pour le faire.

Mais, y a-t-il quelque chose de particulier dans Angular qui fait de Require / AMD un ajustement particulièrement bon?Non. En fait, Angular vous propose son propre modèle de modularisation et d'encapsulation, qui à bien des égards rend redondantes les fonctionnalités de modularisation de base d'AMD. Et, l'intégration de modules angulaires dans le modèle AMD n'est pas impossible, mais c'est un peu ... capricieux. Vous passerez certainement du temps à bien intégrer les deux modèles.

Pour une certaine perspective de l'équipe Angular elle-même, il y a ceci , de Brian Ford, auteur de l'Angular Batarang et maintenant membre de l'équipe de base Angular:

Je ne recommande pas d'utiliser RequireJS avec AngularJS. Bien que ce soit certainement possible, je n'ai vu aucun cas où RequireJS a été bénéfique dans la pratique.

Ainsi, sur la question très spécifique d'AngularJS: Angular et Require / AMD sont orthogonaux et se chevauchent par endroits. Vous pouvez les utiliser ensemble, mais il n'y a aucune raison spécifiquement liée à la nature / aux motifs d'Angular lui-même.

Mais qu'en est-il de la gestion de base des dépendances internes et externes pour les applications Javascript évolutives? N'exige-t-il pas de faire quelque chose de vraiment critique pour moi là-bas?

Je recommande de consulter Bower et NPM, et en particulier NPM. Je n'essaie pas de déclencher une guerre sainte au sujet des avantages comparatifs de ces outils. Je veux simplement dire: il existe d'autres façons d'écorcher ce chat, et ces façons peuvent être encore meilleures que AMD / Require. (Ils ont certainement un élan beaucoup plus populaire fin 2015, en particulier NPM, combiné avec des modules ES6 ou CommonJS. Voir la question SO connexe .)

Et le chargement paresseux?

Notez que le chargement différé et le téléchargement différé sont différents. Le chargement paresseux d'Angular ne signifie pas que vous les tirez directement du serveur. Dans une application de style Yeoman avec automatisation javascript, vous concaténez et réduisez l'ensemble du shebang ensemble dans un seul fichier. Ils sont présents, mais pas exécutés / instanciés jusqu'à ce qu'ils soient nécessaires. Les améliorations de la vitesse et de la bande passante que vous obtenez en faisant cela dépassent largement les améliorations alléguées du téléchargement paresseux d'un contrôleur 20 lignes particulier. En fait, la latence du réseau gaspillée et la surcharge de transmission pour ce contrôleur vont être d'un ordre de grandeur supérieur à la taille du contrôleur lui-même.

Mais disons que vous avez vraiment besoin d'un téléchargement paresseux, peut-être pour des éléments de votre application rarement utilisés, comme une interface d'administration. C'est un cas très légitime. Exiger peut en effet le faire pour vous. Mais il existe également de nombreuses autres options , potentiellement plus flexibles , qui accomplissent la même chose. Et Angular 2.0 s'en occupera apparemment pour nous, intégré au routeur . ( Détails .)

Mais qu'en est-il du développement sur ma boîte de développement locale?

Comment puis-je charger toutes mes dizaines / centaines de fichiers de script sans avoir besoin de les attacher tous à index.html manuellement?

Jetez un œil aux sous-générateurs dans le générateur angulaire de Yeoman, ou aux modèles d'automatisation incorporés dans le générateur-gulp-angulaire , ou à l'automatisation Webpack standard pour React. Ceux-ci vous offrent un moyen propre et évolutif de: attacher automatiquement les fichiers au moment où les composants sont échafaudés, ou simplement les saisir tous automatiquement s'ils sont présents dans certains dossiers / correspondre à certains modèles globaux. Vous n'aurez plus jamais besoin de penser à votre propre chargement de script une fois que vous aurez ces dernières options.

En bout de ligne?

Exiger est un excellent outil pour certaines choses. Mais allez avec le grain chaque fois que possible et séparez vos préoccupations autant que possible. Laissez Angular s'inquiéter du modèle de modularisation d'Angular et envisagez d'utiliser des modules ES6 ou CommonJS comme modèle de modularisation général. Laissez les outils d'automatisation modernes s'inquiéter du chargement des scripts et de la gestion des dépendances. Et prenez soin du chargement différé asynchrone de manière granulaire, plutôt qu'en le mêlant aux deux autres préoccupations.

Cela dit, si vous développez des applications angulaires mais ne pouvez pas installer Node sur votre machine pour utiliser les outils d'automatisation Javascript pour une raison quelconque, alors Require peut être une bonne solution alternative. Et j'ai vu des configurations vraiment élaborées où les gens veulent charger dynamiquement des composants angulaires qui déclarent chacun leurs propres dépendances ou quelque chose. Et même si j'essayais probablement de résoudre ce problème d'une autre manière, je peux voir le bien-fondé de l'idée, pour cette situation très particulière.

Mais sinon ... en partant de zéro avec une nouvelle application angulaire et la flexibilité de créer un environnement d'automatisation moderne ... vous avez beaucoup d'autres options plus flexibles et plus modernes.

(Mis à jour à plusieurs reprises pour suivre l'évolution de la scène JS.)

Oui, c'est logique.

Les modules angulaires n'essaient pas de résoudre le problème de l'ordre de chargement des scripts ou de la récupération des scripts paresseux. Ces objectifs sont orthogonaux et les deux systèmes de modules peuvent coexister et atteindre leurs objectifs.

Source: site officiel d'Angular JS

Je pense que c'est une question subjective, donc je vais donner mon opinion subjective.

Angular dispose d'un mécanisme de modularisation intégré. Lorsque vous créez votre application, la première chose à faire est de

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

et alors

app.directive(...);

app.controller(...);

app.service(...);

Si vous regardez la graine angulaire qui est une application de démarrage soignée pour angular, ils ont séparé les directives, les services, les contrôleurs, etc. en différents modules, puis chargé ces modules en tant que dépendances de votre application principale.

Quelque chose comme :

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

Angular charge également paresseusement ces modules (en mémoire) et non leurs fichiers de script.

En termes de chargement paresseux de fichiers de script, pour être franc, à moins que vous n'écriviez quelque chose d'extrêmement volumineux, ce serait exagéré car angulaire par sa nature même, il réduit la quantité de code que vous écrivez. Une application typique écrite dans la plupart des autres frameworks pourrait s'attendre à une réduction d'environ 30 à 50% du LOC si elle est écrite en angulaire.

L'utilisation de RequireJS avec AngularJS est logique, mais uniquement si vous comprenez comment chacun d'eux fonctionne en ce qui concerne l' injection de dépendance , car bien que les deux injectent des dépendances, ils injectent des choses très différentes.

AngularJS possède son propre système de dépendance qui vous permet d'injecter des modules AngularJS à un module nouvellement créé afin de réutiliser les implémentations. Supposons que vous ayez créé un "premier" module qui implémente un filtre AngularJS "accueillir":

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

Et maintenant, disons que vous voulez utiliser le filtre "d'accueil" dans un autre module appelé "second" qui implémente un filtre "au revoir". Vous pouvez faire cela en injectant le "premier" module dans le "deuxième" module:

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

Le fait est que pour que cela fonctionne correctement sans RequireJS, vous devez vous assurer que le "premier" module AngularJS est chargé sur la page avant de créer le "deuxième" module AngularJS. Citation de la documentation:

Selon un module, cela signifie que le module requis doit être chargé avant le chargement du module requis.

Dans ce sens, voici où RequireJS peut vous aider car RequireJS fournit un moyen propre d'injecter des scripts dans la page pour vous aider à organiser les dépendances de script entre eux.

Pour en revenir aux "premier" et "deuxième" modules AngularJS, voici comment vous pouvez le faire en utilisant RequireJS en séparant les modules sur différents fichiers pour tirer parti du chargement des dépendances de 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 + '!';
      }
    });
});

Vous pouvez voir que nous dépendons du fichier "firstModule" à injecter avant que le contenu du rappel RequireJS puisse être exécuté, ce qui nécessite le chargement du "premier" module AngularJS pour créer le "deuxième" module AngularJS.

Note latérale: L'injection de "angulaire" sur les fichiers "firstModule" et "secondModule" en tant que dépendance est requise afin d'utiliser AngularJS à l'intérieur de la fonction de rappel RequireJS et elle doit être configurée sur la configuration RequireJS pour mapper "angular" au code de bibliothèque. Vous pouvez également avoir AngularJS chargé sur la page de manière traditionnelle (balise de script) bien que défait les avantages RequireJS.

Plus de détails sur la prise en charge RequireJS du noyau AngularJS à partir de la version 2.0 sur mon blog.

Basé sur mon article de blog "Donner du sens à RequireJS avec AngularJS" , voici le lien .

Comme @ganaraj l'a mentionné, AngularJS a l'injection de dépendances à sa base. Lors de la création d'applications de semences de jouets avec et sans RequireJS, j'ai personnellement trouvé que RequireJS était probablement excessif pour la plupart des cas d'utilisation.

Cela ne signifie pas que RequireJS n'est pas utile pour ses capacités de chargement de script et pour garder votre base de code propre pendant le développement. La combinaison de l'optimiseur r.js ( https://github.com/jrburke/r.js ) avec de l'amande ( https://github.com/jrburke/almond ) peut créer une histoire de chargement de script très mince. Cependant, comme ses fonctionnalités de gestion des dépendances ne sont pas aussi importantes avec angular au cœur de votre application, vous pouvez également évaluer d'autres solutions de chargement de script côté client (HeadJS, LABjs, ...) ou même côté serveur (MVC4 Bundler, ...) pour votre application particulière.

Oui, spécialement pour les très grands SPA.

Dans certains scénarios, RequireJS est un must. Par exemple, je développe des applications PhoneGap en utilisant AngularJS qui utilise également l'API Google Map. Sans chargeur AMD comme RequireJS, l'application se bloquerait simplement lors du lancement lorsqu'elle est hors ligne, car elle ne peut pas source les scripts API Google Map. Un chargeur AMD me donne la possibilité d'afficher un message d'erreur à l'utilisateur.

Cependant, l'intégration entre AngularJS et RequireJS est un peu délicate. J'ai créé angularAMD pour rendre ce processus moins douloureux:

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

La réponse courte est que cela a du sens. Récemment, cela a été discuté dans ng-conf 2014. Voici l'exposé sur ce sujet:

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

Il est logique d'utiliser requirejs avec angularjs si vous prévoyez d'utiliser des contrôleurs et des directives de chargement différé, etc., tout en combinant plusieurs dépendances paresseuses dans des fichiers de script uniques pour un chargement paresseux beaucoup plus rapide. RequireJS dispose d'un outil d'optimisation qui facilite la combinaison. Voir http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Oui, il est logique d'utiliser requireJS avec Angular, j'ai passé plusieurs jours à tester plusieurs solutions techniques.

J'ai fait une graine angulaire avec RequireJS côté serveur. Très simple. J'utilise la notation SHIM pour aucun module AMD et non AMD car je pense qu'il est très difficile de gérer deux systèmes d'injection de dépendances différents.

J'utilise grunt et r.js pour concaténer des fichiers js sur le serveur dépend du fichier de configuration SHIM (dépendance). Je ne fais donc référence qu'à un seul fichier js dans mon application.

Pour plus d'informations, rendez-vous sur mon github Angular Seed: https://github.com/matohawk/angular-seed-requirejs

J'éviterais d'utiliser Require.js. Les applications que j'ai vues font cela gâcher plusieurs types d'architecture de modèle de module. AMD, Revealing, différentes versions de IIFE, etc. Il existe d'autres façons de charger à la demande comme le mod angulaire loadOnDemand . L'ajout d'autres éléments remplit simplement votre code de corruption, crée un faible rapport signal / bruit et rend votre code difficile à lire.

Voici l'approche que j'utilise: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

La page montre une implémentation possible d'AngularJS + RequireJS, où le code est divisé par fonctionnalités puis par type de composant.

Réponse de Brian Ford

AngularJS a son propre système de modules et n'a généralement pas besoin de quelque chose comme RJS.

Référence: https://github.com/yeoman/generator-angular/issues/40

Je pense que cela dépend de la complexité de votre projet car angulaire est à peu près modulaire. Vos contrôleurs peuvent être mappés et vous pouvez simplement importer ces classes JavaScript dans votre page index.html.

Mais au cas où votre projet deviendrait plus grand. Ou si vous prévoyez un tel scénario, vous devez intégrer angular avec requirejs. Dans cet article, vous pouvez voir une application de démonstration pour une telle intégration.