AngularJS supporta AMD come RequireJS?

Question

In this repo AngularJS è impiantato con RequireJS per AMD.

Nel this repo il team AngularJS semina un progetto AngularJS con AMD che non include include RequireJS.

• Sto pensando a questo nel modo sbagliato - I.E. stanno risolvendo diversi problemi?
• La libreria AngularJS supporta AMD ora dove non era mai stata prima?
• Non è più necessario utilizzare RequireJS con i progetti AngularJS?

Answer 1

Sì, è possibile utilizzare RequireJS con angolare. Devi fare un po 'di lavoro extra per farlo funzionare, come nel link che hai incluso, ma è possibile.

In generale, tuttavia, non ho trovato alcun bisogno di AMD con Angolare. L'intera idea di AMD è che ti permette di specificare in modo dichiarativo le dipendenze tra i tuoi script e non preoccuparti dell'ordine in cui li includi nella pagina. Tuttavia, Angular si prende cura di questo per te con il suo meccanismo di iniezione delle dipendenze, quindi non otterrai alcun beneficio utilizzando AMD.

tl; dr Non ho trovato un motivo valido per utilizzare AMD con Angular.js.

Answer 2

Utilizzando RequireJS con AngularJS ha un senso, ma solo se si capisce come ciascuno di essi lavori relativi Dependency Injection, come anche se entrambi inietta dipendenze, iniettano cose molto diverse.

AngularJS dispone di un proprio sistema di dipendenze che consente di inserire moduli AngularJS in un modulo appena creato per riutilizzare le implementazioni. Diciamo che è stato creato un modulo di "prima" che implementa un filtro AngularJS "salutare":

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

E ora diciamo che si desidera utilizzare il filtro "salutare" in un altro modulo chiamato "secondo" che implementa un "arrivederci "filtro. Si può fare che iniettando il modulo "prima" al modulo di "secondo":

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

Il fatto è che per fare questo lavoro correttamente senza RequireJS, è necessario assicurarsi che il modulo "primi" AngularJS viene caricato sulla pagina prima di creare il "secondo" modulo AngularJS. Documentazione di quotazione:

A seconda del modulo, è necessario caricare il modulo richiesto prima che venga caricato il modulo richiesto.

In questo senso, qui è dove RequireJS può aiutare come RequireJS fornisce un modo pulito per iniettare script per la pagina di aiutare ad organizzare le dipendenze di script tra loro.

Tornando alle "prime" e "secondo" moduli AngularJS, ecco come si può farlo utilizzando RequireJS che separano i moduli su diversi file per sfruttare lo script dipendenze di carico:

// 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 + '!'; 
     } 
    }); 
}); 

È possiamo vedere che dipendiamo dal file "firstModule" da iniettare prima che possa essere eseguito il contenuto del callback RequireJS che necessita del "primo" modulo AngularJS da caricare per creare il "secondo" modulo AngularJS.

Nota a margine: Iniezione "angolare" sul file "secondModule" come dipendenza "firstModule" ed è necessario al fine di utilizzare AngularJS all'interno della funzione di callback RequireJS e devono essere configurato sul RequireJS config per mappare "angolare" per il codice della biblioteca. È possibile che AngularJS sia caricato nella pagina anche in modo tradizionale (tag script), sebbene sconfigga i vantaggi di RequireJS.

Ulteriori dettagli sull'avere il supporto RequireJS dal core AngularJS dalla versione 2.0 sul post del blog.

Sulla base della mia post sul blog "Dare un senso di RequireJS con AngularJS", ecco la link.

Answer 3

È possibile caricare i componenti angolari.js utilizzando i provider. Da article:

I provider sono essenzialmente oggetti che vengono utilizzati per creare e configurare istanze di artefatti AngularJS. Quindi, per registrare un controller pigro, si usa lo $controllerProvider. ...

In breve, è necessario innanzitutto definire il modulo dell'app per mantenere le istanze dei provider pertinenti. Quindi definiresti i tuoi artefatti pigri per registrarti utilizzando i provider piuttosto che l'API del modulo. Quindi, utilizzando una funzione di 'risoluzione' che restituisce una promessa nella definizione del percorso, caricheresti tutti gli artefatti pigri e risolverai la promessa una volta caricati. Ciò garantisce che tutti gli artefatti pigri siano disponibili prima che venga eseguito il rendering della rotta pertinente. Inoltre, non dimenticare di risolvere la promessa all'interno di $ rootScope. $ Apply, se la risoluzione avverrà fuori da AngularJS. Quindi creerai uno script 'bootstrap' che prima carica il modulo dell'app prima di avviare l'app. Infine, collegheresti allo script di bootstrap dal tuo file 'index.html'.

http://ify.io/lazy-loading-in-angularjs/