Est-il judicieux d'utiliser l'Exigent.js avec angle.js? [fermé]

je suis un débutant à Angular.js et essayer de comprendre en quoi c'est différent de Backbone.js... Nous avions l'habitude de gérer nos dépendances de paquets avec Require.js tout en utilisant la colonne vertébrale. Est-il judicieux de faire de même avec Angulaire.js?

443
demandé sur Franck 2012-09-21 14:49:38
la source

14 ответов

Oui il est logique d'utiliser angular.js avec require.js où vous pouvez utiliser require.js pour modulariser les composants.

je peux vous indiquer un seed project qui utilise both angular.js and require.js . Espérons que ça aide!

222
répondu Anshu 2013-05-24 18:21:38
la source

pour reformuler ce que je pense que la question de L'OP est vraiment:

si je construis une application principalement en angle 1.x, et (implicitement) le faire à l'époque de Grunt/Gulfp/brocoli et Bower/NPM, et j'ai peut-être quelques dépendances supplémentaires de bibliothèque, ne nécessite pas d'ajouter une valeur claire et spécifique au-delà de ce que j'obtiens en utilisant Angular sans Require?

Ou, pour l'exprimer d'une autre manière:

"Ne la vanille Angulaire besoin nécessaire à la gestion de base Angulaire de la composante-chargement efficace, si j'ai d'autres façons de traiter le script de base de chargement? "

et je crois que la réponse de base à cela est:" pas à moins que vous avez quelque chose d'autre en cours, et/ou vous êtes incapable d'utiliser des outils plus récents, plus modernes."

soyons clairs d'entrée de jeu: RequireJS est un grand outil qui a résolu des problèmes très importants, et nous avons commencé sur la route que nous sommes, vers des applications plus évolutives, plus professionnelles Javascript. Fait important, 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 construire une application Javascript qui doit être mise à l'échelle, 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 L'angle qui rend Require/AMD a particulièrement bon ajustement? Pas de. En fait, Angular vous fournit son propre modèle de modularisation et d'encapsulation, ce qui rend redondantes les caractéristiques de base de la modularisation D'AMD. Et, intégrer des modules angulaires dans le modèle AMD n'est pas impossible, mais c'est un peu... capricieux. Vous passerez certainement du temps à faire en sorte que les deux motifs s'intègrent bien.

pour un certain point de vue de l'équipe angulaire elle-même, il ya ce , de Brian Ford, auteur de The Angular Batarang et maintenant membre de L'équipe Angular core:

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

ainsi, sur la question très spécifique des AngularJS: angulaires et D'exiger/AMD sont orthogonaux, et dans les endroits se chevauchant. Vous can utilisez - les ensemble, mais il n'y a aucune raison spécifiquement liée à la nature/les modèles de L'angle 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 important pour moi?

je recommande de vérifier Bower et NPM, et en particulier NPM. Je n'essaie pas de déclencher une guerre sainte sur les avantages comparatifs de ces outils. J'ai simplement envie de dire: il y a d'autres façons d'écorcher ce chat, et ces façons peut sont encore meilleures que AMD/Require. (Ils ont certainement une dynamique beaucoup plus populaire à la fin de l'année 2015, en particulier la NGP, combinée avec les modules ES6 ou CommonJS. Voir , question connexe .)

et le chargement paresseux?

Notez que le chargement différé et paresseux-téléchargement sont différents. Le chargement paresseux d'Angular ne veut pas dire que tu les tires directement. à partir du serveur. Dans une application de style Yeoman avec l'automatisation javascript, vous concaténez et minifiez l'ensemble du shebang en un seul fichier. Ils sont présents, mais pas exécutés / instanciés jusqu'à ce que nécessaire. Les améliorations de la vitesse et de la bande passante que vous obtenez en faisant cela de façon extensive, l'emportent largement sur toutes les prétendues améliorations provenant du téléchargement paresseux d'un contrôleur particulier de 20 lignes. En fait, la latence réseau gaspillée et la transmission aérienne pour ce contrôleur va être un ordre de magnitude supérieure à la taille du contrôleur lui-même.

mais disons que vous avez vraiment besoin paresseux-téléchargement, peut-être pour les pièces de votre application rarement utilisées, comme une interface d'administration. C'est un très légitime cas. Besoin peut en effet le faire pour vous. Mais il ya aussi beaucoup autres , potentiellement plus flexible options qui accomplissent la même chose. Et Angular 2.0 va apparemment s'occuper de cela pour nous, intégré au routeur . ( Détails .)

mais qu'en est-il pendant le développement de mon local dev boxen?

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

Jetez un coup d'oeil aux sous-générateurs de Yeoman's generator-angular, ou aux modèles d'automatisation incorporés dans generator-gulp-angular , ou à L'automatisation standard de webpack pour React. Ceux-ci vous fournissent une façon propre et évolutive pour soit: attacher automatiquement les fichiers au moment où les composants sont échafaudés, ou tout simplement les saisir tous automatiquement si ils sont présents dans certains dossiers/match certains glob-patterns. Vous n'avez jamais besoin de penser au sujet de votre propre chargement de script une fois que vous avez les dernières options.

conclusion?

Besoin est un outil formidable, pour certaines choses. Mais allez avec le grain dans la mesure du possible, et séparez vos préoccupations dans la mesure du possible. Laissez Angular s'inquiéter de son propre modèle de modularisation et envisagez d'utiliser les modules ES6 ou les CommonJS comme modèle général de modularisation. Laissez les outils modernes d'automatisation s'occuper du chargement des scripts et de la gestion des dépendances. Et de prendre soin de async chargement différé de façon granulaire, plutôt que par l'enchevêtrement avec les deux autres préoccupations.

cela dit, si vous développez des applications angulaires mais que vous 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 de rechange. 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 comme ça. Et pendant que j'essaierais probablement de résoudre ça problème d'une autre façon, je peux voir les mérites de l'idée, pour cette situation très particulière.

mais autrement... en partant de zéro avec une nouvelle application angulaire et la flexibilité pour créer un environnement d'automatisation moderne... vous avez beaucoup d'autres, plus souples, plus d'options modernes.

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

151
répondu XML 2017-05-23 15:18:24
la source

Oui, c'est logique.

les modules angulaires n'essaient pas de résoudre le problème de la commande de charge de script ou un scénario fainéant. Ces objectifs sont orthogonaux et les deux modules les systèmes peuvent vivre côte à côte et de réaliser leurs objectifs.

Source: site officiel de Angular JS

135
répondu Tiago Reis 2015-04-23 13:00:05
la source

je crois que c'est une question subjective, donc 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 puis

app.directive(...);

app.controller(...);

app.service(...);

si vous avez un regard sur l'application angular-seed qui est neat starter app pour angular, ils ont séparé les directives, les services, les contrôleurs etc en différents modules et puis chargez ces modules comme dépendances sur votre application principale.

quelque chose comme:

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

Angular charge aussi paresseusement ces modules (en mémoire) pas leurs fichiers de script.

en termes de fichiers de script de chargement paresseux, pour être franc, à moins que vous n'écriviez quelque chose d'extrêmement grand, ce serait exagéré parce que angulaire par sa nature même réduit la quantité de code que vous écrivez. Une application classique écrite dans la plupart des autres cadres pourrait s'attendre à une réduction d'environ 30-50% en LOC si écrit en angle.

57
répondu ganaraj 2012-09-21 18:51:41
la source

utiliser des Requerjs avec AngularJS a du sens, mais seulement si vous comprenez comment chacun d'eux fonctionne en ce qui concerne injection de dépendance , comme si les deux injectent des dépendances, ils injectent des choses très différentes.

AngularJS dispose de son propre système de dépendances qui vous permet d'injecter des modules AngularJS dans 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 " saluez":

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

et maintenant disons que vous voulez utiliser le filtre" greet "dans un autre module appelé" second "qui implémente un filtre" goodbye". 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 + '!';
    }
  });

la chose est que pour faire ce travail correctement sans Requerjs, vous devez vous assurer que le" premier "module AngularJS est chargé sur la page avant de créer le" second " module AngularJS. Citer document:

en fonction d'un module implique que le module requis doit être chargé avant de charger le module requis.

dans ce sens, voici où Requerjs peut vous aider puisque Requerjs fournit une manière propre d'injecter des scripts à la page en vous aidant à organiser les dépendances de script entre eux.

retour aux modules" premier "et" second " AngularJS, voici comment vous pouvez faire il utilise des RequireJS séparant les modules sur des fichiers différents pour tirer parti des dépendances de script 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 Requerjs puisse être exécuté qui nécessite que le" premier "module AngularJS soit chargé pour créer le" second " module AngularJS.

note de Côté: l'Injection de "angulaire" sur le "firstModule" et "secondModule" fichiers comme la dépendance est requis pour utiliser AngularJS à l'intérieur de la fonction de rappel Requerjs et il doit être configuré sur la configuration Requerjs pour mapper "angular" au code de la bibliothèque. Vous pouvez avoir AngularJS chargé à la page d'une manière traditionnelle aussi (étiquette de script) bien que les défaites exigent des avantages js.

plus de détails sur le fait d'avoir besoin de l'aide de AngularJS core à partir de la version 2.0 sur mon blog.

D'après mon billet de blog " making sense of Requerjs avec AngularJS " , voici le lien .

33
répondu LeoG 2014-10-19 05:44:05
la source

comme @ganaraj l'a mentionné AngularJS a l'injection de dépendance à son centre. En construisant des applications de semences de jouets avec et sans Requerjs, J'ai personnellement trouvé que Requerjs était probablement exagéré pour la plupart des cas d'utilisation.

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

21
répondu johlrich 2012-09-22 16:11:04
la source

Oui, il n', spécialement pour les très grandes SPA.

dans un certain scénario, RequireJS est un must. Par exemple, je développe des applications PhoneGap en utilisant AngularJS qui utilise également L'API GoogleMap. Sans AMD loader comme RequireJS, L'application se planterait tout simplement lors de son lancement hors ligne car elle ne peut pas obtenir les scripts de L'API GoogleMap. Un chargeur AMD me donne une chance d'afficher un message d'erreur à l'utilisateur.

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

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

17
répondu marcoseu 2013-11-20 17:26:58
la source

brève réponse est, il est logique. Récemment, cela a été discuté dans ng-conf 2014. Voici l'exposé sur ce sujet:

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

13
répondu Dalorzo 2014-01-21 20:54:40
la source

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

7
répondu ify.io 2013-05-28 13:46:26
la source

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

j'ai fait une graine angulaire avec Requerjs Côté Serveur. Très simple. J'utilise la notation SHIM pour aucun module AMD et pas AMD parce que 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 les fichiers js sur le serveur dépend du fichier de configuration SHIM (dépendance). Je ne renvoie donc qu'un seul fichier js dans mon application.

pour plus d'informations allez sur ma graine angulaire github : https://github.com/matohawk/angular-seed-requirejs

7
répondu Matohawk 2013-05-28 15:21:04
la source

j'éviterais D'utiliser Require.js. Les applications que j'ai vu qui font cela finissent par un gâchis de plusieurs types d'architecture de modèle de module. AMD, Révélant, différentes saveurs de IIFE, etc. Il existe d'autres façons de charger à la demande comme le loadOnDemand Angular mod . Ajouter d'autres choses remplit simplement votre code plein de cruft et crée un faible rapport signal / bruit et rend votre code difficile à lire.

3
répondu Julia Anne Jacobs 2013-11-08 00:49:03
la source

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 mise en œuvre possible D'AngularJS + RequireJS, où le code est divisé par les caractéristiques et puis le type de Composant.

2
répondu Avi Haiat 2014-08-25 21:10:30
la source

réponse de Brian Ford

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

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

1
répondu stevemao 2017-01-10 01:22:52
la source

je pense que cela dépend de la complexité de votre projet puisque l'angle est assez bien modularisé. Vos contrôleurs peuvent être mappés et vous pouvez simplement importer ces classes JavaScript dans votre index.la page html.

mais au cas où votre projet grossirait. Ou vous anticipez un tel scénario, vous devriez intégrer angulaire avec des requisjs. Dans cet" article 151940920 " vous pouvez voir une application de démonstration pour une telle intégration.

0
répondu lastboy 2013-09-15 12:04:52
la source

Autres questions sur javascript angularjs requirejs