Est-il judicieux d'utiliser Require.js avec Angular.js?

Question

Je suis un débutant de Angular.js et d'essayer de comprendre comment il est différent de Backbone.js... Nous avons utilisé pour gérer nos forfaits de dépendances avec Require.js lors de l'utilisation de la colonne vertébrale. Est-il judicieux de faire de même avec Angular.js?

Answer 1

Oui, il est logique d'utiliser angular.js avec require.js où vous pouvez utiliser require.js pour la modularisation de composants.

Je peux vous diriger vers un projet de semences qui utilise both angular.js and require.js. Espérons que ça aide!

Answer 2

Angulaire contrôleurs, les directives et les services sont paresseux-chargé par Angulaire intégré dans le module système, et instancié uniquement lorsque cela est nécessaire. En utilisant les processeurs AMD sur le dessus de que les frais généraux sont sans valeur, au moins pour l'angle d'composants.

Ensuite, il y a cette, de Brian Ford, auteur de l'angle de Batarang et un membre de l'Angulaire de l'équipe de base:

Je ne recommandent pas l'utilisation de RequireJS avec AngularJS. Bien qu'il est certainement possible, je n'ai pas vu de cas où RequireJS a été bénéfique dans la pratique.

Notez que le chargement différé et paresseux-téléchargement sont différents. Angulaire du lazy-loading ne signifie pas que vous êtes en tirant directement à partir du serveur. Dans un Yeoman application, vous concaténez et minifying tout le toutim ensemble dans un seul fichier. Ils sont présents, mais pas exécuté jusqu'à ce que nécessaire. La vitesse et la bande passante des améliorations que vous obtenez de faire ce considérablement, l'emportent largement sur les prétendues améliorations de paresseux-le téléchargement des en 20 ligne du contrôleur. En fait, la perte de la latence du réseau et la transmission de surcharge pour que le contrôleur va être d'un ordre de grandeur plus grand que la taille de la manette elle-même.

Bas de ligne: aller avec le grain, et laissez Angulaire inquiéter le chargement différé des composants Angulaires. Si vous voulez vous branler autour de avec Besoin pour le non-Angulaire dépendances, aller de l'avant. Mais demandez-vous si vous êtes à le faire par pure habitude (fret-culting", peut-être), ou parce que vous pouvez prouver la valeur de ce projet spécifique.

Answer 3

Oui, c'est logique.

"Angulaire des modules de ne pas essayer de résoudre le problème de script charge de la commande ou paresseux script d'extraction. Ces objectifs sont orthogonaux et les deux systèmes de modules peuvent vivre côte à côte et s'acquitter de leurs objectifs". source: Angular JS site officiel.

Answer 4

Ce que je crois est une question subjective, donc je vais vous donner mon opinion subjective.

Angulaire a une modularisation mécanisme. Lorsque vous créez votre application, la première chose que vous voulez faire est

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

et puis

app.directive(...);

app.controller(...);

app.service(...);

Si vous avez un coup d'oeil à l'angle de la graine qui est soignée starter app angulaire, ils ont séparé les directives, les services, contrôleurs, etc ... dans des modules différents et ensuite chargés de ces modules comme des dépendances de votre application principale.

Quelque chose comme :

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

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

En termes de chargement différé des fichiers de script, pour être franc, à moins que vous écrivez quelque chose d'extrêmement important, il serait inutile car angulaire de 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 autour de 30 à 50% en LDC si écrit dans angulaire.

Answer 5

À l'aide de RequireJS avec AngularJS logique, mais seulement si vous comprenez comment chacun d'eux fonctionne concernant l'injection de dépendance, en tant que bien que les deux d'entre eux injecte dépendances, ils injectent des choses très différentes.

AngularJS a son propre système de dépendance qui vous permettent d'injecter AngularJS modules d'un module nouvellement créé dans le but de réutiliser les implémentations. Disons que vous avez créé une "première" module qui implémente une AngularJS filtre "salue":

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

Et maintenant, disons que vous voulez utiliser la "salue" filtre dans un autre module, intitulé "second" qui met en œuvre un "au revoir" du filtre. Vous pouvez faire que l'injection de la "première" du module à la "seconde" module:

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

Le truc, c'est que pour faire ce travail correctement sans RequireJS, vous devez vous assurer que le "premier" AngularJS module est chargé sur la page avant de créer le "deuxième" AngularJS module. Citant la documentation:

Selon un module implique que requis module doit être chargé avant de l'exiger module est chargé.

En ce sens, c'est là que RequireJS peut vous aider comme RequireJS fournit un moyen propre à injecter des scripts de la page vous aider à organiser script dépendances entre les uns des autres.

Revenir à la "première" et "deuxième" AngularJS modules, voici comment vous pouvez le faire à l'aide de RequireJS séparant les modules sur différents dossiers à l'effet de levier script de chargement des dépendances:

// 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 sommes selon "firstModule" fichier pour être injecté avant le contenu de la RequireJS de rappel peut être exécutée qui doit "d'abord", AngularJS module pour être chargé de créer des "deuxième" AngularJS module.

Remarque: l'Injection de "angulaire" sur le "firstModule" et "secondModule" fichiers comme la dépendance est nécessaire pour utiliser AngularJS à l'intérieur de la RequireJS fonction de rappel et il faut être configuré sur RequireJS config à la carte "angulaire" pour le code de la bibliothèque. Vous pouvez avoir AngularJS chargés de la page de manière traditionnelle (balise script) bien que les défaites de RequireJS avantages.

Plus de détails sur RequireJS le soutien de AngularJS noyau de version 2.0 sur mon blog.

Basé sur mon blog "donner un sens à RequireJS avec AngularJS", voici le lien.