Ha senso usare Require.js con Angular.js? [chiuso]

Sono un novizio di Angular.js e sto cercando di capire in cosa differisce da Backbone.js ... Durante la Backbone gestivamo le dipendenze dei nostri pacchetti con Require.js. Ha senso fare lo stesso con Angular.js?

Sì, ha senso utilizzare angular.jsinsieme al require.jsquale è possibile utilizzare require.jsper la modularizzazione dei componenti.

C'è un progetto seed che usa both angular.js and require.js.

Per ribadire ciò che penso sia davvero la domanda del PO:

Se sto sviluppando un'applicazione principalmente in Angular 1.x, e (implicitamente) facendolo nell'era di Grunt / Gulp / Broccoli e Bower / NPM, e forse ho un paio di dipendenze di libreria aggiuntive, è necessario aggiungere chiare, specifiche valore oltre quello che ottengo utilizzando Angular senza Require?

O, in altre parole:

"La Vanilla Angular necessita di una gestione efficace del caricamento dei componenti angolari di base, se ho altri modi per gestire il caricamento degli script di base? "

E credo che la risposta di base sia: "a meno che tu non stia succedendo qualcos'altro e / o non riesci a usare strumenti più nuovi e più moderni".

Siamo chiari all'inizio: 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, allora Require e il modello AMD non sono cattivi strumenti per farlo.

Ma c'è qualcosa di particolare in Angular che rende Require / AMD particolarmente adatto? No. In effetti, Angular offre un proprio modello di modularizzazione e incapsulamento, che in molti modi rende ridondanti le funzionalità di modularizzazione di base di AMD. E, integrare i moduli angolari nel modello AMD non è impossibile, ma è un po '... schizzinoso. Passerai sicuramente del tempo a integrare bene i due schemi.

Per una prospettiva dal team Angular stesso, c'è questo , da Brian Ford, autore dell'Angular Batarang e ora membro del core team angolare:

Non consiglio di utilizzare RequireJS con AngularJS. Anche se è certamente possibile, non ho visto nessun caso in cui RequireJS fosse utile nella pratica.

Quindi, sulla domanda molto specifica di AngularJS: Angular e Require / AMD sono ortogonali e in alcuni punti sovrapposti. È possibile usarli insieme, ma non c'è motivo specificamente legati alla natura / modelli di angolare stessa.

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

Consiglio di provare Bower e NPM, in particolare NPM. Non sto cercando di iniziare una guerra santa per i vantaggi comparativi di questi strumenti. Voglio solo dire: ci sono altri modi per scuoiare quel gatto, e questi modi potrebbero essere persino migliori di AMD / Require. (Hanno sicuramente un momento molto più popolare alla fine del 2015, in particolare NPM, combinato con i moduli ES6 o CommonJS. Vedi la relativa domanda SO .)

Che dire del caricamento lento?

Si noti che il caricamento lento e il download lento sono diversi. Il caricamento lento di Angular non significa che li stai estraendo direttamente dal server. In un'applicazione in stile Yeoman con automazione javascript, stai concatenando e minimizzando l'intero shebang in un unico file. Sono presenti, ma non eseguiti / istanziati finché non sono necessari. I miglioramenti di velocità e larghezza di banda che si ottengono facendo questo in modo enorme, superano di gran lunga qualsiasi presunto miglioramento derivante dal download pigro di un particolare controller a 20 linee. In effetti, la latenza di rete sprecata e le spese generali di trasmissione per quel controller saranno di un ordine di grandezza maggiore delle dimensioni del controller stesso.

Ma supponiamo che tu abbia davvero bisogno di un download pigro, forse per pezzi della tua applicazione usati raramente, come un'interfaccia di amministrazione. Questo è un caso molto legittimo. Require può davvero farlo per te. Ma ci sono anche molte altre opzioni , potenzialmente più flessibili , che realizzano la stessa cosa. E Angular 2.0 apparentemente si occuperà di questo per noi, integrato nel router . ( Dettagli .)

Ma che dire durante lo sviluppo sulla mia casella di sviluppo locale?

Come posso caricare tutte le mie dozzine / centinaia di file di script caricati senza bisogno di collegarli manualmente a index.html?

Dai un'occhiata ai sottogeneratori nel generatore angolare di Yeoman, o ai modelli di automazione incorporati nel generatore-gulp-angolare o all'automazione Webpack standard per React. Questi offrono un modo pulito e scalabile per: allegare automaticamente i file nel momento in cui i componenti sono impalcati o semplicemente per prenderli tutti automaticamente se sono presenti in determinate cartelle / corrispondono a determinati schemi globali. Non avrai mai più bisogno di pensare al tuo caricamento di script una volta che hai le ultime opzioni.

Linea di fondo?

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

Detto questo, se stai sviluppando app angolari ma non riesci a installare Node sul tuo computer per utilizzare gli strumenti di automazione Javascript per qualche motivo, Require potrebbe essere una buona soluzione alternativa. E ho visto configurazioni davvero elaborate in cui le persone vogliono caricare dinamicamente componenti angolari che dichiarano le proprie dipendenze o qualcosa del genere. E mentre probabilmente proverei a risolvere quel problema in un altro modo, posso vedere i meriti dell'idea, per quella situazione molto particolare.

Ma per il resto ... quando si parte da zero con una nuova applicazione angolare e flessibilità per creare un ambiente di automazione moderno ... hai molte altre opzioni, più flessibili e più moderne.

(Aggiornato ripetutamente per stare al passo con l'evoluzione della scena JS.)

Sì, ha senso.

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

Fonte: sito web ufficiale di Angular JS

Credo che questa 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 da fare è

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

e poi

app.directive(...);

app.controller(...);

app.service(...);

Se dai un'occhiata al seme angolare che è un'app di avvio ordinata per angolare, hanno separato le direttive, i servizi, i controller ecc. In diversi moduli e quindi li hanno caricati come dipendenze sulla tua app principale.

Qualcosa di simile a :

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

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

In termini di caricamento lento dei file di script, per essere sinceri se non si scrive qualcosa di estremamente grande, sarebbe un eccesso perché la sua natura angolare 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 scritta in angolare.

L'uso di RequireJS con AngularJS ha senso, ma solo se si capisce come ciascuno di essi funziona riguardo all'iniezione di dipendenze , come se entrambi iniettassero dipendenze, iniettano cose molto diverse.

AngularJS ha un proprio sistema di dipendenze che consente di iniettare i moduli AngularJS in un modulo appena creato per riutilizzare le implementazioni. Supponiamo che tu abbia creato un "primo" modulo che implementa un filtro AngularJS "greet":

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

E ora diciamo che vuoi usare il filtro "greet" in un altro modulo chiamato "second" che implementa un filtro "arrivederci". Puoi farlo iniettando il "primo" modulo nel "secondo" modulo:

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

Il fatto è che per farlo funzionare correttamente senza RequireJS, devi assicurarti che il "primo" modulo AngularJS sia caricato sulla pagina prima di creare il "secondo" modulo AngularJS. Citando la documentazione:

A seconda del modulo implica che il modulo richiesto deve essere caricato prima che il modulo richiesto venga caricato.

In questo senso, qui è dove RequireJS può aiutarti poiché RequireJS fornisce un modo chiaro per iniettare script nella pagina aiutandoti a organizzare le dipendenze degli script tra di loro.

Tornando al "primo" e al "secondo" modulo AngularJS, ecco come puoi farlo usando RequireJS separando i moduli su file diversi per sfruttare il caricamento delle dipendenze degli 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 + '!';
      }
    });
});

Puoi vedere che dipendiamo dal file "firstModule" da iniettare prima che il contenuto del callback RequireJS possa essere eseguito, il che richiede il caricamento del "primo" modulo AngularJS per creare il "secondo" modulo AngularJS.

Nota a margine: l'iniezione di "angolare" nei file "firstModule" e "secondModule" come dipendenza è necessaria per utilizzare AngularJS all'interno della funzione di richiamata RequireJS e deve essere configurata sulla configurazione RequireJS per mappare "angolare" al codice della libreria. È possibile che AngularJS sia caricato sulla pagina anche in modo tradizionale (tag script) sebbene sconfigga i vantaggi di RequireJS.

Maggiori dettagli su come avere il supporto di 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 menzionato da @ganaraj, AngularJS ha al centro l'iniezione di dipendenza. Quando ho creato applicazioni di seed giocattolo con e senza RequireJS, ho scoperto personalmente 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 pulita la base di codice 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 degli script molto snella. Tuttavia, poiché le sue funzioni di gestione delle dipendenze non sono così importanti con angolare al centro dell'applicazione, è anche possibile valutare altre soluzioni di caricamento degli script lato client (HeadJS, LABjs, ...) o addirittura lato server (MVC4 Bundler, ...) per la tua particolare applicazione.

Sì, specialmente per SPA di grandi dimensioni.

In alcuni scenari, RequireJS è un must. Ad esempio, sviluppo applicazioni PhoneGap usando AngularJS che utilizza anche Google Map API. Senza il caricatore AMD come RequireJS, l'app si bloccherebbe semplicemente all'avvio quando è offline in quanto non è in grado di generare gli script dell'API di Google Map. 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 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

È logico utilizzare requestjs con angularjs se si pianificano controllori di caricamento e direttive pigri, ecc., Combinando al contempo 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 requestJS con Angular, ho trascorso diversi giorni a testare diverse soluzioni tecniche.

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

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

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

Eviterei di utilizzare Require.js. Le app che ho visto in questo modo finiscono in un casino di molteplici tipi di architetture di moduli. AMD, Rivelazione, diversi gusti di IIFE, ecc. Esistono altri modi per caricare su richiesta come il loadOnDemand mod angolare . L'aggiunta di altre cose riempie semplicemente il codice pieno di cruft e crea un rapporto segnale / rumore basso e rende il 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 possibile implementazione di AngularJS + RequireJS, in cui il codice è suddiviso per caratteristiche e quindi per tipo di componente.

Risposta di Brian Ford

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

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

Penso che dipenda dalla complessità del progetto poiché l'angolare è praticamente modulare. I controller possono essere mappati e puoi semplicemente importare quelle classi JavaScript nella tua pagina index.html.

Ma nel caso il tuo progetto si ingrandisca. Oppure prevedi tale scenario, dovresti integrare gli angolari con i requisiti. In questo articolo puoi vedere un'app demo per tale integrazione.