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


Je suis un débutant sur Angular.js et j'essaie de comprendre comment il est différent de Backbone.js ... Nous avons utilisé pour gérer nos dépendances de paquets avec Require.js tout en utilisant Backbone. Est-il judicieux de faire la même chose avec Angular.js?


443
2017-09-21 10:49


origine


Réponses:


Oui, il est logique d'utiliser angular.js de même que require.js dans lequel tu peux utiliser require.js pour la modularisation des composants.

Je peux vous diriger vers un projet semencier qui utilise both angular.js and require.js. J'espère que cela pourra aider!


222
2017-09-21 12:54



Pour réitérer ce que je pense que la question du PO est vraiment:

Si je construis une application principalement dans Angular 1.x, et que je le fais implicitement à l’époque de Grunt / Gulp / Broccoli et Bower / NPM, et que j’ai peut-être quelques dépendances de bibliothèque supplémentaires, est-ce que Require ajoute un paramètre clair, spécifique? valeur au-delà de ce que je reçois en utilisant angulaire sans exiger?

Ou, en d'autres termes:

"Est-ce que Vanilla Angular a besoin de gérer efficacement le chargement des composants angulaires de base, Si j'ai d'autres moyens de gérer le script de base?"

Et je crois que la réponse de base à cette question est: "sauf si vous avez autre chose en cours, et / ou vous ne pouvez pas utiliser d’outils plus récents et plus modernes".

Soyons clairs dès le départ: RequireJS est un excellent outil qui a permis de résoudre des problèmes très importants et qui nous a permis de progresser vers des applications Javascript plus évolutives et plus professionnelles. Ce qui est important, c’est la première fois que de nombreuses personnes ont rencontré le concept de modularisation et de développement global. Donc, si vous voulez créer une application Javascript à mettre à l'échelle, alors Require et le modèle AMD ne sont pas de bons outils pour cela.

Mais, Y a-t-il quelque chose de particulier à propos d'Angular qui rend Require / AMD particulièrement approprié? En fait, Angular vous fournit son propre modèle de modularisation et d’encapsulation, ce qui, à bien des égards, rend redondantes les fonctions 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 ... difficile. Vous allez certainement passer du temps à bien intégrer les deux modèles.

Pour une perspective de l'équipe Angular elle-même, il y a ce, 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 était 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. Toi pouvez utilisez-les ensemble, mais il n'y a pas de raison spécifiquement liée à la nature / les modèles de 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? Ne nécessite pas de faire quelque chose de vraiment critique pour moi là-bas?

Je recommande de vérifier Bower et NPM, et en particulier NPM. Je ne cherche pas à déclencher une guerre sainte concernant les avantages comparatifs de ces outils. Je veux simplement dire: il y a d'autres façons de peler ce chat, et ces manières mai être encore mieux que AMD / Require. (Ils ont certainement beaucoup plus de succès à la fin de 2015, en particulier NPM, combiné avec les modules ES6 ou CommonJS. question SO liée.)

Qu'en est-il du 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 l'automation javascript, vous concaténez et réduisez l'ensemble du shebang en un seul fichier. Ils sont présents, mais ne sont pas exécutés / instanciés avant d'être nécessaires. Les améliorations de la vitesse et de la bande passante que vous obtenez de cette manière dépassent largement toutes les améliorations supposées du téléchargement paresseux d’un contrôleur de 20 lignes particulier. En fait, le temps de latence du réseau et le temps de transmission gaspillés 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 morceaux peu utilisés de votre application, comme une interface d'administration. C'est un cas très légitime. Exiger peut effectivement le faire pour vous. Mais il y a aussi  beaucoup  autre, potentiellement  plus  flexible  options qui accomplissent la même chose. Et Angular 2.0 va apparemment prendre soin de cela pour nous, intégré à la routeur. (Détails.)

Mais qu'en est-il au cours du développement sur mon box dev locale?

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

Jetez un coup d'œil aux sous-générateurs de Yeoman's generator-angular, ou aux schémas d'automatisation incorporés dans générateur-gulp-angulaireou à l'automatisation Webpack standard pour React. Celles-ci vous offrent un moyen propre et évolutif: soit de joindre automatiquement les fichiers au moment de l'échafaudage des composants, soit de les saisir automatiquement s'ils sont présents dans certains dossiers / correspondent à certains modèles de globes. Vous n'avez plus jamais besoin de penser à votre propre chargement de script une fois que vous avez les dernières options.

Bottom-line?

Exiger est un excellent outil, pour certaines choses. Mais allez avec le grain autant que possible, et séparez vos préoccupations autant que possible. Laisser Angular s'inquiéter du propre modèle de modularisation d'Angular, et envisager d'utiliser des modules ES6 ou CommonJS comme un modèle de modularisation générale. Laissez les outils d'automatisation modernes s'inquiéter du chargement des scripts et de la gestion des dépendances. Et prendre soin de chargement asynchrone paresseux d'une manière granulaire, plutôt qu'en l'emmêlant avec les deux autres préoccupations.

Cela étant 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 très élaborées où les gens veulent charger dynamiquement des composants angulaires qui déclarent chacun leurs propres dépendances ou quelque chose. Et bien que j'essaierais probablement de résoudre ce problème d'une autre manière, je peux voir les mérites de l'idée, pour cette situation très particulière.

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

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


150
2017-09-04 13:56



Oui, c'est logique.

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

La source: Site officiel de Angular JS


135
2018-03-27 17:10



Je crois que c'est une question subjective, alors je vais donner mon opinion subjective.

Angular a un mécanisme de modularisation intégré. Lorsque vous créez votre application, la première chose que vous feriez est

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

et alors

app.directive(...);

app.controller(...);

app.service(...);

Si vous jetez un oeil à l'angulaire-graine qui est l'application de démarrage soignée pour angulaire, ils ont séparé les directives, les services, les contrôleurs etc dans différents modules et ensuite chargé ces modules en tant que dépendances sur votre application principale.

Quelque chose comme :

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

Angulaire aussi paresseux charge ces modules (en mémoire) pas leurs fichiers script.

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


57
2017-09-21 14:51



Utiliser RequireJS avec AngularJS a du sens mais seulement si vous comprenez le fonctionnement de chacun injection de dépendanceComme si tous deux injectent des dépendances, ils injectent des choses très différentes.

AngularJS a 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. Disons que vous avez créé un "premier" module qui implémente un filtre AngularJS "greet":

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

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

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

Le truc 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 "second" module AngularJS. Citant la documentation:

Selon un module implique que le module requis doit être chargé   avant que le module requis soit chargé.

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

Pour en revenir aux "premier" et "second" modules AngularJS, voici comment vous pouvez le faire en utilisant RequireJS en séparant les modules sur différents fichiers pour tirer parti des dépendances de scripts en cours de chargement:

// 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 callback RequireJS puisse être exécuté, ce qui nécessite le "premier" module AngularJS à charger pour créer le "second" module AngularJS.

Side note: Injecter "angulaire" sur les fichiers "firstModule" et "secondModule" comme dépendance est nécessaire pour utiliser AngularJS dans la fonction de rappel RequireJS et il doit être configuré sur RequireJS config pour mapper "angulaire" au code de la bibliothèque. AngularJS peut aussi être chargé sur la page d'une manière traditionnelle (balise script), mais il annule les avantages de RequireJS.

Plus de détails sur le support RequireJS du noyau AngularJS à partir de la version 2.0 sur mon blog.

Basé sur mon blog "Donner un sens à RequireJS avec AngularJS", Voici la lien.


33
2018-01-06 16:11



Comme l'a mentionné @ganaraj, AngularJS a pour base l'injection de dépendance. Lors de la construction d'applications de graines de jouets avec et sans RequireJS, j'ai personnellement trouvé que RequireJS était probablement trop lourd 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. Combiner l'optimiseur r.js (https://github.com/jrburke/r.js) aux amandes (https://github.com/jrburke/almond) peut créer une histoire de chargement de script très mince. Cependant, puisque ses fonctionnalités de gestion des dépendances ne sont pas aussi importantes avec angulaire 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.


21
2017-09-22 12:11



Oui, c'est le cas, 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 bloque simplement lors du lancement hors ligne car elle ne peut pas générer les scripts de l'API Google Map. Un chargeur AMD me permet 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/


17
2017-11-20 13:26



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

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


13
2018-01-21 16:54



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


7
2018-05-28 09:46