Je n'utilise pas angulaire sur une seule application de page, mais je voudrais définir le module d'application principal une fois en raison de problèmes de commande de chargement. Dans le même temps, je voudrais injecter / exiger des modules par page et non la couverture, car tous les fichiers JS ne seront pas chargés sur chaque page.
Puis-je définir l'application sans modules requis:
app = angulaire.module ("app", [])
et faites-les avoir injecté d'un contrôleur ou à une étape ultérieure?
6 Réponses :
Non, ce n'est pas officiellement soutenu pour le moment. Tous les modules doivent être chargés dans un navigateur (et déclaré comme une dépendance d'un module d'application principal) avant que l'application Angularjs soit bootstrapped.
Vous avez dit "en ce moment". Sera-t-il capable dans le futur?
Je pense que quelque chose dans l'impulsion du moment, posté dans une autre réponse, mais j'aimerais vraiment les contributions de Pkozlowski.
Sur le dessus de ma tête, à la lecture de votre question, je peux penser à une solution possible / hack.
L'idée serait de définir une gamme de dépendances avant que tous les modules ne soient inclus, et l'ajouter à chaque Module: P>
// before anything else
window.loadedDependencies = [];
// at the end of each module file:
window.loadedDependencies.push('moduleName')
// after all that, at the app definition:
app = angular.module("app", loadedDependencies)
C'est une excellente approche pour un site composé de multiples spa-silos
C'est en fait une solution bien meilleure à ce que l'angulaire est venu avec. Il semble juste d'être gênant de charger des modules sur chaque page de toutes les autres. De cette façon, chaque page peut définir ses dépendances du module.
Utiliser la bonne idée de Tiago (Upvote-le!), j'ai ce qui suit dans mon module: et ceci dans mon J'utilise lodash, donc je Union Les dépendances à obtenir une gamme de valeurs uniques - Certains de mes modules utilisent les mêmes dépendances que le Mon script comprend au bas de la balise Body Attention à ce que ceci: Mes pages partagent une page "Master", mais j'ai les définitions de module dans leurs propres fichiers, alors j'avais besoin de quelque chose comme ça. app.js : app.js , par exemple ngroute .
BTW Vous n'avez pas besoin de soulignement pour combiner 2 tableaux .. (Fenêtre.DePendances || []). Concat ([Module 1 ',' Module 2 '])
@Sonicoul arr.concat (ARR1) ne les fusionnera pas de manière unique. Il inclura déjà les dépendances déjà incluses. par exemple. var arr = ['A', 'B'], ARR1 = ['C', 'D', 'A']; ---- Arr.ConCat (Arr1) -> Retournera ['A', 'B', 'C', 'D', 'A'].
Je sais que ce n'est pas très beau, mais que dire ce qui suit: EDIT: Notez que ceci est utile si vous souhaitez injection de modules sans l'application qui doit les connaître (pour EXAPPPLE Pour la journalisation, la surveillance, la sécurité, etc.) mais pas si vous souhaitez injecter une fois que l'application a été renforcée.
Je me débats avec le même problème. Je pense http://blog.getelementsbydea.com/load- A-Module-On-Demand-with-angularjs / peut faire ce que vous vouliez.
sur son github https://github.com/ocombe/oclazyload Vous pouvez trouver:
appctrl.js https://github.com/ocombe/oclazyload/blob/master/examples/example1/js/app.js#l24
-
appctrl.js Charge ultérieur de la grille https://github.com/ocombe/oclazyload/blob/master/examples/example1/js/appctrl.js#l28 en exécution (et asynchreusement )! voi'la
Cela pourrait sembler un peu compliqué, mais si vous êtes vraiment intéressé à les charger au moment de l'exécution, il pourrait s'agir de la seule solution, sauf modyfing manuellement _invokequeue manuellement.
Nous pouvons y parvenir en utilisant dans mymodule.js p> et Dans votre index.html, incluez le Inclure la myModule.js à la volée de l'App.js p> app.requires code> app.js code> premier et myModule.js code> suivant. De cette façon, vous pouvez inclure n nombre de modules sans modifier le app.js code>. P> var mainHead = document.getElementsByTagName('HEAD').item(0);
var myScript= document.createElement("script");
myScript.type = "text/javascript";
mainHead.appendChild( myScript);
myScript.src='../myModule.js';
myScript.onload = function(){
angular.element(document).ready(function() {
angular.bootstrap(document, ['myngapp']);
});
}
Hey tk, pouvez-vous s'il vous plaît examiner cette question, je suis la méthode que vous avez décrite - Stackoverflow.com/Questtions/42111131/...
Merci! app.requires.push ('Modulename'); Travaillé parfaitement!