Mixing Angular e ASP.NET MVC / Web api?

Vengo dall'utilizzo dell'API ASP.NET MVC / Web e ora sto iniziando a usare Angular ma non sono chiaro sul modo corretto di mescolarli.

Una volta che utilizzo Angular, i concetti lato server MVC forniscono ancora qualche valore? O dovrei usare rigorosamente l'API Web solo per ottenere dati per le chiamate HTTP angolari?

C'è forse un punto di partenza più ridotto che dovrei usare se il modello VS sta aggiungendo molte cose che non mi servono?

Mi piace l'idea di una netta divisione tra lato server = dati puri e lato client = elaborazione HTML pura.

javascript mvc asp.net-mvc

— punkouter
fonte

correlati: I frontend del sito Web devono essere resi sul lato client o sul lato server?

— moscerino

Risposte:

Il modo più semplice di pensarci è che il server serve uno stato. Angular può gestire la raccolta degli aggiornamenti in quello stato e inviarlo a un web / api sul server. Se desideri utilizzare più app a pagina singola, il codice lato server sarà solo lo stato iniziale dell'app.

L'API Web è un ottimo punto di partenza per estrarre i dati nella tua app. Eventualmente aggiornerai i percorsi predefiniti per soddisfare i requisiti di progettazione dei tuoi ambienti e, se lo desideri, per essere rigorosamente completo.

Esistono alcune librerie che ASP4 includeva per impostazione predefinita e quelle erano anche incluse nei modelli MVC4. Ci sono davvero molte cose incluse nella pagina che non sono necessarie, così come incluse nel progetto e non sono mai nemmeno citate dalle loro pagine predefinite. Dovresti essere sicuro di rimuovere tutto tranne jQuery e io vado addirittura al punto di eliminare jQueryUI. Molte impostazioni predefinite significano bene, ma una volta che inizi a compilare le tue conoscenze di dominio utilizzerai librerie che soddisfano le tue esigenze specifiche.

Anche con una divisione rigorosa, troverai che mvc sul lato server è ancora un supporto molto pulito per un'app a pagina singola. Il routing efficace nella consegna della tua pagina e delle tue chiamate api è un ottimo esempio. Un'altra utile funzionalità sono i controller che restituiscono visualizzazioni che non utilizzano la pagina principale o che sono solo una vista parziale. Angular ha una "vista" che può riempire con un modello, che può essere un file statico o un parziale da uno dei tuoi percorsi.

Ho letto il tuo commento prima di oggi e ho messo insieme una soluzione demo per mostrare ciò che ho menzionato in origine. La soluzione ha anche rimosso alcuni dei "fluff" originali, anche se quando si aggiungono Angular e Bootstrap si ottengono le librerie core e ogni derivazione. Questo è il compromesso dell'utilizzo di nuGet.

Dai un'occhiata: https://github.com/QueueHammer/AngularWithPartialViewViews

Nell'apprendimento dell'angolare ho trovato abbastanza utile il programma Angular-Seed. Soprattutto dopo che ho provato le demo sul loro sito. Il progetto di esempio è abbastanza diverso da aiutarti a imparare. Dopo di che ho guardato Angular-Require-Seed ma questo è un altro post. Angular Step by Step http://docs.angularjs.org/tutorial Seme angolare: https://github.com/angular/angular-seed

— QueueHammer
fonte

Quindi avrebbe senso avere alcune viste lato server che funzionano normalmente come MVC .. e quindi per ciascuna di quelle viste ci saranno più viste angolari lato client (forse una creazione / dettagli / modifica per qualche entità specifica) .. Se è così, allora vorrei poter trovare un modello del genere che mi metta su una buona strada per usare MVC e angolare insieme

— punkouter,

Aggiunto un collegamento al progetto demo e dove ho iniziato a esaminare Angular. Ho intenzione di blog sulle SPA in generale e su alcuni dei migliori modelli / librerie che risolvono le loro sfide architettoniche nei prossimi due mesi. Aggiornerò il mio post quando lo farò.

— QueueHammer,

ho appena ricevuto il tuo link .. ho visto la demo. sembra buono .. la prima domanda è .. quindi .. Stai mantenendo la funzionalità ASP.NET MVC in posizione come pagina principale da cui inizi .. oltre quella pagina tutto il resto è viste parziali angolari .. Potresti avere DUE ASP principali. Visualizzazioni NET MVC? in altre parole .. la vista MVC ASP.NET è un genitore delle viste parziali angolari ... per esempio .. forse non voglio TUTTE le viste parziali in UNA vista ASP.NET ... ha senso? Potresti mostrarmelo? Che cosa mi ha messo in una buona posizione per un punto di partenza penso ... o forse quello che sto dicendo non ha senso?

— punkouter,

e qual è il punto di partialsController.cs poiché non chiama mai nessuno di questi?

— punkouter,

Puoi posizionare i parziali quasi ovunque. Potresti creare più controller con un'azione per vista, ho usato un "partialsController.cs" che le rotte nel progetto maturano con le viste definite nel modulo dell'app angolare. Quindi, partial / view1 sta chiamando il controller dei parziali e sta ottenendo l'azione viewOne che quindi ottiene la vista ViewOne. Nelle azioni puoi chiamare View (); con un parametro stringa passare la posizione della vista. Quindi hai la flessibilità di organizzarlo quasi come preferisci.

— QueueHammer,

C'è forse un punto di partenza più ridotto che dovrei usare se il modello VS sta aggiungendo molte cose che non mi servono?

Questi modelli VS sono utili per ridurre la configurazione iniziale e la curva di apprendimento all'inizio, tuttavia è necessario personalizzarli per le reali esigenze del progetto.

Ad esempio, su questo sito http://www.reviewstoshare.com , il mio amico usa AngularJSinsieme a ASP.NET MVC. Tieni presente che questo sito è già stato creato utilizzando ASP.MVC + Jquery per l'interazione in-page secondo necessità.

D'altra parte c'è ancora un po 'di natura "Ajaxy" nel sito come commenti, votazioni, segnalazioni ecc. Non troppo diverso da Stackoverflow stesso. Prima di AngularJS era un casino di plugin e funzioni di Jquery all'interno del $(document).ready()callback, per non parlare del codice JS non era molto testabile.

Nel complesso, avere una combinazione corretta di entrambi rende il tuo sito semplice e funzionale.

inserisci qui la descrizione dell'immagine

Alcuni buoni riferimenti da guardare:

— EL Yusubov
fonte

O se sotto una raccolta di pagine parziali angolari ci sono alcune viste MVC regolari che non sarebbero di aiuto (come ho già detto nel mio commento sopra)

— punkouter,

Questo è vero, i problemi SEO sono stati risolti da nuovi aggiornamenti.

— EL Yusubov,

Quindi, non criticare ma le affermazioni negative sul grafico non sarebbero effettivamente al di sotto dell'asse x? Ciò farebbe apparire il grafico come un'onda sin in continua espansione. So che non è il tuo grafico, ma la sua cattiva scienza.

— QueueHammer,

QueueHammer devi divertirti davvero alle feste. :-)

— Thomas Stock

Sono totalmente bloccato nei due punti inferiori dell'onda su entrambi i lati del 'Very Cool!' bolla, come un combinato inferno di merda angolare.

— MetaGuru,