AngularJS è solo per applicazioni a pagina singola (SPA)?


201

Stiamo esaminando le opzioni per creare il front-end di un'applicazione che stiamo creando e stiamo provando a valutare uno strumento che funzionerà per noi e ci fornirà la migliore piattaforma per andare avanti.

Questo è un progetto Node.js. Il nostro piano iniziale era di usare Express e seguire questa strada, ma abbiamo deciso che prima di dare il via a questa fase potrebbe essere meglio rivedere ciò che è là fuori. La nostra applicazione ha diverse aree che non riteniamo adatte al modello a pagina singola in quanto sono correlate dal punto di vista dell'applicazione, ma non dal punto di vista visivo.

Abbiamo visto alcuni dei framework che potremmo usare per costruire il client come Backbone.js , Meteor , ecc. E anche AngularJS.

Questa potrebbe essere una domanda abbastanza ovvia, ma non possiamo decifrare se AngularJS è puramente per un'applicazione a pagina singola o può essere utilizzato per applicazioni a più pagine come Express, ad esempio.


AGGIORNAMENTO 17 luglio 2013 Solo per tenere le persone al corrente, aggiornerò questa domanda mentre proseguiamo il processo. Costruiremo tutto insieme per ora e vedremo quanto bene funziona. Abbiamo contattato alcune persone più qualificate con AngularJS di noi e abbiamo posto la domanda relativa alla suddivisione di applicazioni più grandi che condividono il contesto, ma potrebbe essere troppo grande lavorando su una singola pagina.

Il consenso era che potevamo servire più pagine statiche e creare applicazioni AngularJS che funzionavano solo con quelle pagine, creando in modo efficace una raccolta di SPA e collegando insieme tali applicazioni usando collegamenti standard. Ora il nostro caso d'uso è molto specifico in quanto la nostra soluzione ha diverse applicazioni e, come ho detto, proveremo prima la base di codice singolo e ottimizzeremo da lì.

AGGIORNAMENTO 18 giugno 2016 Il progetto è caduto da una scogliera, quindi non ci siamo mai potuti impegnare troppo. L'abbiamo ripreso di recente, ma non stiamo più usando angolare e invece stiamo usando React. Stiamo ancora utilizzando l'architettura delineata nell'aggiornamento precedente, in cui utilizziamo app espresse e autonome, quindi ad esempio abbiamo una /chatroute in express che serve la nostra app di chat React, abbiamo un'altra route /projectsche serve l'app di progetti e presto. Il modo in cui la guardiamo è che ogni app è una radice aggregata in termini di set di funzionalità, deve essere in grado di essere autonoma per essere considerata un'app in sé. Tecnicamente, tutte le informazioni sono là fuori, sono solo espresse di base e qualunque tipo di app lato client costruisca la bontà che vuoi usare.


5
Come è andata? Sto cercando di capire come spostare un'applicazione ASP.NET di oltre 50 pagine in un'applicazione HTML + Javascript + REST pura e non riesco davvero a capire come funzionerebbe come SPA.
Greg,

1
Abbiamo dovuto passare a qualcos'altro. Dalle discussioni che abbiamo avuto e che avremo di nuovo mentre questo inizia di nuovo, è che SPA può essere un ingranaggio molto focalizzato in una macchina molto più grande. Quindi, traducendo la nostra istanza nella tua (stavamo usando il nodo puro con express) se volevi rimanere in uno stack familiare (.Net) potresti usare MVC come impalcatura e usare angolare nelle viste per aggiungere elementi dinamici (ogni caratteristica) . a meno che tu non riesca a condensare la tua app, l'implementazione di 50 pagine di logica in una singola pagina potrebbe soffocare.
Modika,

1
Ciò che fa è rendere ogni sezione (ovvero utenti, notizie, prodotti ecc.) Una SPA a sé stante, ma collettivamente formano la tua app.
Modika,

1
Ottimo grazie. Esiste un codice specifico che deve essere fatto per collegare le diverse ZPS? O solo collegamenti regolari?
Greg,

1
@Greg, dalle nostre conoscenze limitate fino ad ora, dal momento che sono essenzialmente app nel loro giusto collegamento standard funzionerebbe, ovviamente non sarà probabilmente un passo avanti in quanto tale e una forma di persistenza (cookie, archiviazione locale) sarà necessaria per persistere informazioni condivise come forse e identità o profilo se l'app è dietro una qualche forma di accesso. Le nostre app saranno strettamente collegate alla nostra API e mentre stiamo costruendo un'app affidabile stiamo usando oauth per proteggere ogni richiesta, penso che Trello faccia qualcosa di simile, ma potrei sbagliarmi.
Modika,

Risposte:


216

Affatto. Puoi usare Angular per creare una varietà di app. Il routing lato client è solo una piccola parte di questo.

Hai un ampio elenco di funzionalità che ti offriranno vantaggi al di fuori del routing lato client:

  • rilegatura a due vie
  • template
  • formattazione di valuta
  • pluralizzazione
  • controlli riutilizzabili
  • RESTful gestione delle API
  • Gestione AJAX
  • modularizzazione
  • iniezione di dipendenza

È assurdo pensare che tutto ciò "possa essere utilizzato solo in un'app a pagina singola". Certo che no ... è come dire "Jquery è solo per progetti con animazioni".

Se si adatta al tuo progetto, usalo.


42
Un altro punto da menzionare è che Angular non ha nemmeno bisogno di essere utilizzato per pagine intere: può essere integrato in un sistema esistente per costruire componenti, ad esempio un widget o plugin complesso all'interno di un'applicazione legacy.
Alex Osborn,

2
@Blesh, grazie per la risposta, ha senso, ma quello che stiamo lottando per trovare è "il come" lo usiamo per costruire app multipagina ed è per questo che la domanda è stata pubblicata, che è davvero una domanda diversa, quindi la tua risposta è stata accettato ma ad esempio possiamo usare angular.js con express.js o è qualcosa del genere solo una perdita di tempo e complicazioni eccessive.
Modika,

Angular con Express è quasi ideale! È davvero molto semplice creare un'API RESTful con Express che puoi utilizzare dalle tue applicazioni angolari. API RESTful di Google NodeJS Express e servizi $ http e $ http di Angular. Dopodiché, inizia a prototipare e giocarci. Penso che potresti scoprire che stai pensando troppo / preoccupandoti troppo del "COME" una volta che vedi quanto bene lavorano insieme.
Ben Lesh,

@Blesh, scusa per il ritardo. Abbiamo già un'API REST / Hypermedia costruita usando Restify, immagino che dobbiamo trovare un modo pulito per collegare le "app" separate create in qualche modo, esamineremo questo e probabilmente aggiorneremo la domanda ad un certo punto.
Modika,

@Modika sei stato in grado di trovare buone risorse o avere buone intuizioni per le app multipagina?
dre

16

All'inizio ho lottato con il "come" anche con Angular. Poi un giorno mi è venuto in mente: "È ANCORA javascript". Ci sono un sacco di esempi sui dettagli di Angular (uno dei miei preferiti insieme al libro https://github.com/angular-app/angular-app ). La cosa più importante da ricordare è caricare i file js proprio come faresti in qualsiasi altro progetto. Tutto quello che devi fare è assicurarti che le diverse pagine facciano riferimento all'oggetto Angolare corretto (controller, vista, ecc.) E che tu sia spento e funzionante. Spero che abbia un senso, ma la risposta è stata così semplice che l'ho trascurata.


6

Forse la mia esperienza sarà utile a qualcuno. Abbiamo diviso il nostro progetto logicamente. Una SPA che utilizziamo per i feed, un'altra per lavorare con la mappa, un'altra per modificare un profilo utente e così via. Ad esempio, abbiamo tre app: feed, utente e mappa. Lo uso negli URL separati, in questo modo:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

Ognuna di queste applicazioni ha i propri mapping di routing locali tra gli stati nell'applicazione. Penso che sia una buona pratica perché ogni applicazione funziona solo con il proprio contesto e carica le dipendenze di cui ha davvero bisogno. Inoltre, è molto buona pratica per i processi di debug e integrazione.

In effetti, puoi facilmente creare un mix di app SPA, ad esempio il feed sarà url con l'applicazione angularjs, l'app utente con i reagenti e mappata all'applicazione backbone.js.

In risposta alla tua domanda:

Angolare non solo per le SPA, Angular gioca bene e velocemente per le applicazioni SPA, ma nessuno si preoccupa di creare applicazioni MPA per una varietà di applicazioni SPA. Ma pensando alla tua architettura URL non dimenticare la disponibilità SEO delle tue applicazioni.

Sostengo anche l'idea:

Qual è la differenza tra un progetto e un'app? Un'app è un'applicazione Web che fa qualcosa, ad esempio un sistema Weblog, un database di record pubblici o una semplice app di sondaggio. Un progetto è una raccolta di configurazioni e app per un determinato sito Web. Un progetto può contenere più app. Un'app può essere in più progetti.


3

Se tutto ciò di cui hai bisogno sono poche pagine con la banca dati dei client, sceglierei Knockout e Javascript Namespacing.

Il knockout è eccezionale, soprattutto se hai bisogno di una compatibilità all'indietro semplice e di pagine abbastanza dirette. Se si utilizzano componenti di terze parti, i collegamenti personalizzati di Knockout sono semplici e facili da utilizzare.

Lo spazio dei nomi Javascript consente di mantenere il codice separato e gestibile.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

E in un tag script dopo aver caricato gli altri script

<script>
    myCo.init();
</script>

La chiave è che usi qualsiasi strumento tu voglia quando ne hai bisogno. Hai bisogno di un databinding? Knockout (o qualunque cosa ti piaccia). Hai bisogno di instradare? sammy.js (o qualunque cosa ti piaccia).

Il codice client può essere semplice o complicato come lo desideri. Ho provato a integrare Angular in un sito molto complicato con un framework proprietario esistente, ed è stato un incubo. L'angolare è ottimo se stai iniziando fresco, ma ha una curva di apprendimento e ti blocca in un flusso di lavoro molto stretto. Se non lo segui, il tuo codice può impigliarsi molto velocemente.


1

Direi che Angular è eccessivo se stai solo cercando di sviluppare una SPA. Certo, se ti senti già a tuo agio a svilupparlo, vai avanti. Ma se sei nuovo nel framework e hai solo bisogno di sviluppare una SPA, sceglierei qualcosa di più semplice con un certo numero di vantaggi. Consiglio di consultare Vue.js o Aurelia.io .

Vue.js utilizza l'associazione dati bidirezionale, MVVM, componenti riutilizzabili, raccolta semplice e veloce, meno codice da scrivere, ecc. Combina alcune delle migliori funzionalità di Angular e React.

Aurelia.io , in tutta onestà, non ne so molto. Ma ho dato una sbirciatina in giro e sembra un'alternativa che valga la pena esaminare, simile a quanto sopra.

Link:
https://vuejs.org/
http://aurelia.io/

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.