Ha senso usare Require.js con Angular.js?

Sono un novizio di Angular.js e sto cercando di capire come è diverso da Backbone.js … Prima eravamo abituati a gestire le dipendenze dei nostri pacchetti con Require.js durante l’utilizzo di Backbone. Ha senso fare lo stesso con Angular.js?

Sì, ha senso utilizzare angular.js insieme a angular.js cui è ansible utilizzare require.js per la modularizzazione dei componenti.

Posso both angular.js and require.js un seed project che utilizza both angular.js and require.js . Spero possa aiutare!

Per ribadire ciò che penso che la domanda dell’OP sia in realtà:

Se sto costruendo un’applicazione principalmente in Angular 1.x, e (implicitamente) facendo così nell’era di Grunt / Gulp / Broccoli e Bower / NPM, e forse ho un paio di dipendenze aggiuntive della libreria, Require aggiunge clear, specific valore oltre a quello che ottengo usando Angolare senza Richiedere?

O, in altre parole:

“Vanilla Angular ha bisogno di Necessità di gestire in modo efficace il caricamento di componenti angolari di base, se ho altri modi per gestire il caricamento di script di base?

E credo che la risposta di base sia: “a meno che tu non abbia qualcos’altro che sta succedendo, e / o non sei in grado di usare strumenti nuovi e più moderni”.

Diciamolo subito: RequireJS è un ottimo strumento che ha risolto alcuni problemi molto importanti, e ci ha avviato lungo la strada che stiamo percorrendo verso applicazioni Javascript più scalabili e più professionali. È importante sottolineare che è stata la prima volta che molte persone hanno incontrato il concetto di modularizzazione e di far uscire le cose dall’ambito globale. Quindi, se hai intenzione di creare un’applicazione Javascript che deve essere ridimensionata, Require e il pattern AMD non sono cattivi strumenti per farlo.

Ma c’è qualcosa di particolare in Angular che rende Require / AMD particolarmente adatto? No. In effetti, Angular fornisce il proprio modello di modularizzazione e incapsulamento, che in molti modi rende ridondanti le funzioni di modularizzazione di base di AMD. E, l’integrazione di moduli angolari nel pattern AMD non è imansible, ma è un po ‘… schizzinosa. Trascorrerai sicuramente del tempo per integrare i due modelli in modo piacevole.

Per una certa prospettiva dal team di Angular, c’è questo , di Brian Ford, autore di Angular Batarang e ora membro del core team di Angular:

Non è consigliabile utilizzare RequireJS con AngularJS. Anche se è certamente ansible, non ho visto nessuna istanza in cui RequireJS è stato utile nella pratica.

Quindi, sulla questione molto specifica di AngularJS: Angular e Require / AMD sono ortogonali e in posti sovrapposti. Puoi usarli insieme, ma non c’è alcun motivo specificamente correlato alla natura / ai modelli di Angular stesso.

Ma per quanto riguarda la gestione di base delle dipendenze interne ed esterne per le applicazioni Javascript scalabili? Non richiede fare qualcosa di veramente critico per me lì?

Raccomando di controllare Bower e NPM, in particolare NPM. Non sto cercando di iniziare una guerra santa sui vantaggi comparativi di questi strumenti. Voglio solo dire: ci sono altri modi per mettere a nudo quel gatto, e quei modi potrebbero essere anche migliori di AMD / Require. (Certamente hanno uno slancio molto più popolare a fine 2015, in particolare NPM, combinato con i moduli ES6 o CommonJS. Vedi la domanda SO relativa ).

Che ne dici di un pigro caricamento?

Nota che il caricamento lento e il download lento sono diversi. Il caricamento lento di Angular non significa che li stai tirando direttamente dal server. In un’applicazione in stile Yeoman con l’automazione javascript, stai concatenando e ministrando l’intero shebang in un unico file. Sono presenti, ma non eseguiti / istanziati fino a quando necessario. I miglioramenti in termini di velocità e larghezza di banda che si ottengono dal fare questo enormemente superano di gran lunga qualsiasi presunto miglioramento derivante dal download lazy di un particolare controller a 20 linee. In effetti, la latenza della rete e il sovraccarico di trasmissione sprecati per quel controller saranno di un ordine di grandezza maggiore delle dimensioni del controller stesso.

Ma supponiamo che tu abbia davvero bisogno del download lazy, magari per i pezzi della tua applicazione usati di rado, come un’interfaccia di amministrazione. Questo è un caso molto legittimo. Richiedere può davvero farlo per te. Ma ci sono anche molte altre opzioni potenzialmente più flessibili che realizzano la stessa cosa. E a quanto pare Angular 2.0 si prenderà cura di questo per noi, integrato nel router . ( Dettagli .)

Ma che dire durante lo sviluppo sul mio boxe di sviluppo locale?

Come posso caricare tutte le mie dozzine / centinaia di file di script senza doverli albind a index.html manualmente?

Dai un’occhiata ai sub-generatori nel generatore-angular di Yeoman, o ai modelli di automazione incorporati nel generatore-gulp-angular o all’automazione Webpack standard per React. Questi forniscono un modo pulito e scalabile a entrambi: albind automaticamente i file nel momento in cui i componenti sono impalcati, o semplicemente afferrarli tutti automaticamente se sono presenti in determinate cartelle / corrispondono a determinati modelli glob. Non hai mai più bisogno di pensare al tuo script di caricamento, una volta che hai le ultime opzioni.

Linea di fondo?

Require è un ottimo strumento, per certe cose. Ma vai con il grano ogni volta che è ansible, e separa le tue preoccupazioni ogni volta che è ansible. Lascia che Angular si preoccupi del proprio modello di modularizzazione di Angular e considera l’utilizzo di moduli ES6 o CommonJS come un modello di modularizzazione generale. Lascia che i moderni strumenti di automazione si preoccupino del caricamento degli script e della gestione delle dipendenze. E prendersi cura del caricamento pigro asincrono in modo granulare, piuttosto che aggrovigliandolo con le altre due preoccupazioni.

Detto questo, se stai sviluppando applicazioni Angolari ma non riesci a installare Nodo sul tuo computer per utilizzare gli strumenti di automazione Javascript per qualche motivo, allora Richiedi potrebbe essere una buona soluzione alternativa. E ho visto configurazioni davvero elaborate in cui le persone vogliono caricare dynamicmente componenti angolari che dichiarano ciascuna le proprie dipendenze o qualcosa del genere. E mentre probabilmente cercherò di risolvere il problema in un altro modo, posso vedere i meriti dell’idea, per quella situazione molto particolare.

Altrimenti … quando si inizia da zero con una nuova applicazione Angolare e la flessibilità per creare un ambiente di automazione moderno … ci sono molte altre opzioni, più flessibili e più moderne.

(Aggiornato ripetutamente per stare al passo con la scena JS in evoluzione.)

Sì, ha senso.

I moduli angolari non cercano di risolvere il problema dell’ordinamento del caricamento degli script o del recupero di script pigro. Questi obiettivi sono ortogonali e entrambi i sistemi di moduli possono vivere fianco a fianco e raggiungere i loro obiettivi.

Fonte: sito ufficiale di Angular JS

Questa credo sia una domanda soggettiva, quindi fornirò la mia opinione soggettiva.

Angular ha un meccanismo di modularizzazione integrato. Quando crei la tua app, la prima cosa che faresti è

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

e poi

 app.directive(...); app.controller(...); app.service(...); 

Se dai un’occhiata al seme angular, che è un’app intuitiva per gli angolari, hanno separato le direttive, i servizi, i controller, ecc in diversi moduli e poi hanno caricato quei moduli come dipendenze nell’app principale.

Qualcosa di simile a :

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

Angolare carica anche questi moduli (in memoria) non i loro file di script.

In termini di file script di caricamento lazy, per essere sinceri a meno che non si stia scrivendo qualcosa di estremamente grande sarebbe eccessivo, perché per sua natura angular riduce la quantità di codice che scrivi. Un’app tipica scritta nella maggior parte degli altri framework potrebbe prevedere una riduzione di circa il 30-50% in LOC se scritto in modo angular.

L’uso di RequireJS con AngularJS ha senso, ma solo se si capisce come ognuno di loro lavori per quanto riguarda l’ iniezione delle dipendenze , poiché, sebbene entrambe le dipendenze, iniettano cose molto diverse.

AngularJS ha il proprio sistema di dipendenza che ti permette di iniettare moduli AngularJS su un modulo appena creato per riutilizzare le implementazioni. Diciamo che hai creato un “primo” modulo che implementa un filtro AngularJS “saluta”:

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

E ora diciamo che vuoi usare il filtro “saluta” in un altro modulo chiamato “secondo” che implementa un filtro “addio”. Si può fare l’iniezione del “primo” modulo al “secondo” modulo:

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

Il fatto è che per fare in modo che funzioni correttamente senza RequireJS, è necessario assicurarsi che il “primo” modulo AngularJS sia caricato sulla pagina prima di creare il “secondo” modulo AngularJS. Citando la documentazione:

A seconda di un modulo, è necessario caricare il modulo richiesto prima di caricare il modulo richiesto.

In questo senso, qui è dove RequireJS può aiutarti in quanto RequireJS fornisce un modo pulito per iniettare script nella pagina aiutandoti a organizzare le dipendenze tra gli script.

Tornando ai moduli “primo” e “secondo” AngularJS, ecco come puoi farlo usando RequireJS separando i moduli su file diversi per sfruttare il caricamento delle dipendenze dello script:

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

Si può 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: l’iniezione di “angular” sui file “firstModule” e “secondModule” come dipendenza è necessaria per utilizzare AngularJS all’interno della funzione di callback RequireJS e deve essere configurato su RequireJS config per eseguire il mapping “angular” al codice della libreria. È ansible che AngularJS sia caricato nella pagina anche in modo tradizionale (tag script), sebbene sconfigga i vantaggi di RequireJS.

Maggiori dettagli sull’avere il supporto RequireJS dal core AngularJS dalla versione 2.0 sul mio post sul blog.

Sulla base del mio post sul blog “Rendere il senso di RequireJS con AngularJS” , ecco il link .

Come @ganaraj ha menzionato AngularJS ha un’iniezione di dipendenza nel suo nucleo. Quando ho creato applicazioni di semi giocattolo con e senza RequireJS, ho scoperto che RequireJS era probabilmente eccessivo per la maggior parte dei casi d’uso.

Ciò non significa che RequireJS non sia utile per le sue capacità di caricamento degli script e per mantenere pulito il tuo codebase durante lo sviluppo. La combinazione dell’ottimizzatore r.js ( https://github.com/jrburke/r.js ) con almond ( https://github.com/jrburke/almond ) può creare una storia di caricamento di script molto snella. Tuttavia dal momento che le sue funzioni di gestione delle dipendenze non sono così importanti con il cuore della tua applicazione, puoi anche valutare altre soluzioni di caricamento degli script lato client (HeadJS, LABjs, …) o anche lato server (MVC4 Bundler, …) per la tua particolare applicazione.

Sì, lo fa, specialmente per SPA molto grande.

In alcuni scenari, RequireJS è un must. Ad esempio, sviluppo applicazioni PhoneGap utilizzando AngularJS che utilizza anche Google Map API. Senza il caricatore AMD come RequireJS, l’applicazione si arresterebbe semplicemente al momento del lancio quando offline, in quanto non è in grado di accedere agli script dell’API di Google Maps. Un caricatore AMD mi dà la possibilità di visualizzare un messaggio di errore per l’utente.

Tuttavia, l’integrazione tra AngularJS e RequireJS è un po ‘complicata. Ho creato angularAMD per rendere questo un processo meno doloroso:

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

La risposta breve è, ha senso. Recentemente questo è stato discusso in ng-conf 2014. Ecco il discorso su questo argomento:

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

Ha senso usare requirejs con angularjs se si pianificano pigri controllori e direttive di caricamento, ecc., Combinando anche più dipendenze pigre in singoli file di script per un caricamento pigro molto più veloce. RequireJS ha uno strumento di ottimizzazione che semplifica la combinazione. Vedi http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Sì, ha senso usare requireJS con Angular, ho trascorso diversi giorni per testare diverse soluzioni tecniche.

Ho creato un seme angular con RequireJS sul lato server. Molto semplice. Uso la notazione SHIM per nessun modulo AMD e non per AMD perché ritengo sia molto difficile gestire due diversi sistemi di iniezione della dipendenza.

Io uso grunt e r.js per concatenare i file js sul server dipende dal file di configurazione SHIM (dipendenza). Quindi faccio riferimento solo a un file js nella mia app.

Per maggiori informazioni vai sul mio github Angular Seed: https://github.com/matohawk/angular-seed-requirejs

Eviterei di usare Require.js. Le app che ho visto risolvono questo problema con diversi tipi di architettura di modelli di moduli. AMD, Revealing, diversi sapori di IIFE, ecc. Ci sono altri modi per caricare su richiesta come il mod LoadOnDemand Angular . L’aggiunta di altre cose riempie semplicemente il tuo codice pieno di cruft e crea un basso rapporto segnale / rumore e rende il tuo codice difficile da leggere.

Ecco l’approccio che uso: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

La pagina mostra una ansible implementazione di AngularJS + RequireJS, in cui il codice viene diviso per caratteristiche e quindi per tipo di componente.

Risposta di Brian Ford

AngularJS ha il proprio sistema di moduli in genere non ha bisogno di qualcosa come RJS.

Riferimento: https://github.com/yeoman/generator-angular/issues/40

Penso che dipenda dalla complessità del tuo progetto poiché l’angular è praticamente modulare. I tuoi controllori possono essere mappati e puoi semplicemente importare quelle classi JavaScript nella tua pagina index.html.

Ma nel caso il tuo progetto si ingrandisca. O si anticipa tale scenario, si dovrebbe integrare angular con requirejs. In questo articolo puoi vedere un’app demo per tale integrazione.