Combinazione di API Angular e ASP.NET MVC / Web?


87

Vengo dall'utilizzo di ASP.NET MVC / Web API e ora sto iniziando a utilizzare Angular ma non mi è chiaro il modo corretto di mescolarli.

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

Tutti i suggerimenti che hai per un ragazzo ASP.NET MVC che passa ad Angular sarebbero utili


4
Dipenderebbe, ma penso che "dovrei usare rigorosamente l'API Web esclusivamente per ottenere dati per le chiamate HTTP angolari" è il modo corretto per farlo.
MikeSmithDev

Ecco un tutorial per la creazione di un'app angolare con un back-end API Web ASP.NET Core -> medium.com/@levifuller/…
Levi Fuller

Risposte:


113

Pure Web API

Ero piuttosto hardcore con ASP.NET MVC ma da quando ho incontrato Angular non vedo un motivo per cui ne userei framework di generazione di contenuti lato server. Pure Angular / REST (WebApi) offre un risultato più ricco e fluido. È molto più veloce e ti consente di creare siti Web che si avvicinano abbastanza alle applicazioni desktop, senza alcun trucco funky.

Angular ha una piccola curva di apprendimento, ma una volta che il tuo team l'ha padroneggiato, costruirai siti Web molto migliori in meno tempo. Principalmente questo ha a che fare con il fatto che non hai più tutti questi problemi di stato (meno).

Ad esempio, immagina un modulo guidato con qualsiasi framework lato server tradizionale. Ogni pagina deve essere convalidata e inviata separatamente. Forse il contenuto della pagina dipende dai valori di una pagina precedente. Forse l'utente ha premuto il pulsante Indietro e sta reinviando un modulo precedente. Dove memorizziamo lo stato del cliente? Tutte queste complicazioni non esistono quando si utilizzano Angular e REST.

Quindi ... vieni al lato oscuro ... abbiamo i biscotti.

Domanda simile


Sono d'accordo su: la velocità e la fluidità dello sviluppo di app tramite Angular. In MVC o WebForms (ugh) passi questo tempo a far sì che sputi markup, e poi devi fare un paio di passaggi avvitando il codice client su di esso, il che sembra strano, è laborioso e, a causa della natura scollegata, spreca un molto tempo facendo cose semplici.
moribvndvs

3
@Narayana; Questo fornisce un po 'di amore SEO.
null

5
Perché quando rinomino una proprietà su un particolare modello, non devo scavare in AngularJS per "stringhe magiche"? Angular è carino, ma in un mondo rigorosamente sicuro dei tipi di .net, un'integrazione più stretta consente di sfruttare la sicurezza dei tipi dal lato server.
Sleeper Smith

6
@Sleeper Smith: ho avuto questa discussione molte volte con persone del mio team, ma alla fine le convenzioni sul codice , i test di unità e la separazione delle preoccupazioni offrono molto di più di tutta la sicurezza dei tipi nel mondo. Anch'io mi piacerebbe vedere JS sostituito da qualcosa come C # , ma in realtà non è così. Tutto ciò che conta è il risultato che puoi ottenere. I tuoi clienti probabilmente non si preoccupano delle tue preferenze di codifica, vogliono un sito web dall'aspetto accattivante e dalle prestazioni fluide e lo vogliono velocemente. Angular porta a termine quel lavoro.
null

1
Ad esempio, quando si utilizza KnockoutJS, si creava una normale app ASP.NET MVC e ogni vista riceveva i dati del modello dal controller MVC. Quindi questi dati dal server verrebbero serializzati in JSON e da lì KnockoutJS li trasformerebbe in dati osservabili, quindi otterrei l'associazione dati a due vie. Ed è stato fantastico! Ma cosa facciamo ora, dal momento che AngularJS ha il proprio sistema di routing? Cosa succede con il routing MVC? Lo usiamo affatto? Cosa succede ora con la visualizzazione "_Layout" e @RenderBody ()?
AlexRebula

43

AngularJS è più associato al paradigma dell'applicazione a pagina singola e, come tale, non beneficia molto delle tecnologie lato server che rendono il markup. Non c'è motivo tecnico che ti impedisca di usarli insieme, ma in senso pratico, perché dovresti?

Una SPA recupera le risorse di cui ha bisogno (viste JS, CSS e HTML) e funziona da sola, comunicando ai servizi per inviare o recuperare dati. Quindi, una tecnologia lato server è ancora necessaria per fornire quei servizi (così come altri mezzi come l'autenticazione e simili), ma le parti di rendering sono in gran parte irrilevanti e non particolarmente utili perché è una duplicazione degli sforzi, tranne che MVC lo fa lato server e Angular lo fa sul client. Se stai usando Angular, lo vuoi sul client per ottenere i migliori risultati. Puoi creare moduli HTML post Angular e recuperare visualizzazioni parziali dalle azioni MVC, ma ti perderesti le funzionalità migliori e più semplici di Angular e ti renderai la vita più difficile.

MVC è piuttosto flessibile e potresti usarlo per le chiamate di servizio da un'applicazione SPA. Tuttavia, WebAPI è ottimizzato e un po 'più facile da usare per tali servizi.

Ho scritto un certo numero di applicazioni AngularJS, tra cui un paio migrate da WebForm e applicazioni MVC preesistenti, e l'aspetto ASP.NET si evolve verso una piattaforma per fornire l'app AngularJS come client effettivo e per ospitare il livello dell'applicazione il client comunica tramite REST (utilizzando WebAPI). MVC è un ottimo framework, ma di solito si trova senza un lavoro in questo tipo di applicazioni.

L'applicazione ASP.NET diventa un altro livello dell'infrastruttura, dove le sue responsabilità sono limitate a:

  • Ospita il contenitore delle dipendenze.
  • Collega le implementazioni della logica di business al container.
  • Imposta pacchetti di risorse per JS e CSS.
  • Ospita i servizi WebAPI.
  • Rafforzare la sicurezza, eseguire la registrazione e la diagnostica.
  • Interfacciamento con cache dell'applicazione per le prestazioni.

Un'altra cosa grandiosa di una SPA è che può aumentare la larghezza di banda del tuo team. Un gruppo può eliminare i servizi mentre l'altro giace nell'app client. Dal momento che puoi facilmente bloccare o simulare i servizi REST, potresti avere un'app client completamente funzionante sui servizi fittizi e sostituirla con quelli reali quando hanno finito.

Devi investire in anticipo su Angular, ma ripaga alla grande. Dato che hai già familiarità con MVC, hai un vantaggio su alcuni dei concetti fondamentali.


Ok, quindi voglio andare con Angular e avere un back-end .NET per mantenere la mia produttività con l'API, Entity Framework, sicurezza, ecc. Le mie pagine hanno ancora bisogno di una configurazione / layout master-child lato server? Cosa posso usare per questo: WebForms (no, quindi ottengo viewstate), MVC, ASP.NET Web Pages o qualcos'altro?
Sean

1
Tecnicamente, non hai bisogno di pagine del server, pagine di layout, ecc. Va bene solo il semplice HTML. Tuttavia, a seconda delle dimensioni e della complessità della tua applicazione, potresti voler suddividere la tua app Angular in diverse applicazioni distinte per funzionalità (e puoi collegarti da un'app all'altra usando un comune navigatore o altro). In tal caso, potresti utilizzare una pagina di layout per mantenere le cose ASCIUTTE e coerenti. Inoltre, probabilmente stai utilizzando pacchetti di risorse per CSS o script e hai pagine radice che sono Razor o qualsiasi altra cosa che riunirebbe bene queste cose.
moribvndvs

1
Uso ASP.NET MVC da tre anni su almeno 8 grandi progetti e mi sono abituato a questo framework lato server fine e maturo. Tuttavia conosco l'importanza delle SPA e adoro Angular, quindi ho deciso ora di optare per mini SPA o app ibride ... o "SPA silos" come le chiamava Miguel Castro. La mia domanda è: che dire dell'autorizzazione e dell'autenticazione? So che ASP.NET MVC semplifica notevolmente questo compito. Come si fa senza ASP.NET MVC?
AlexRebula

1
@AlexRebula Penso che la domanda sia più una questione di come vuoi fare l'autenticazione in WebApi vs MVC. Normalmente è con i cookie (puoi anche utilizzare i cookie FormsAuth o ASP.NET Identity con WebApi) o le intestazioni (OAuth, ecc.). Entrambi gli approcci sono completamente supportati sia dall'API Web che da Angular, ma richiedono una scelta sull'implementazione. È difficile darti una risposta più precisa senza maggiori dettagli su ciò che stai facendo e quali sono i tuoi obiettivi specifici.
moribvndvs

@HackedByChinese Capisco. E ora penso che sarebbe davvero fantastico se avessi più tempo per approfondire l'API Web di più ...
AlexRebula

6

Dipende dal progetto su cui stai lavorando.

Se angularJS è qualcosa di nuovo per te, preferirei scegliere un piccolo progetto a basso rischio / pressione per iniziare e assicurarti di imparare come fare le cose nel modo giusto (ho visto molti progetti che usano Angularjs in modo sbagliato a causa della pressione, delle scadenze ... mancanza di tempo per impararlo in modo corretto, ad esempio utilizzando JQuery o accedendo al DOM all'interno dei controller, ecc ...).

Se il progetto è un campo verde e hai una certa esperienza su AngularJS, ha senso abbandonare ASP.net MVC e sul lato server andare per REST / WebAPI puro.

Se si tratta di un progetto esistente, puoi raccogliere un sottoinsieme complesso di funzionalità e creare quella pagina come app angularJS separata (ad esempio la tua app è composta da un grande gruppo di pagine standard Razor di complessità semplice / media ma hai bisogno di un editor avanzato / pagina, che potrebbe essere il pezzo di destinazione da costruire con AngularJS).


1
Mi piace la tua risposta e condivido in gran parte ciò che hai detto. Tuttavia c'è una cosa che mi turba. ASP.NET MVC è un framework Web lato server molto bello e maturo con ottime funzionalità integrate come l'autenticazione e l'autorizzazione. Hai scritto che si potrebbe abbandonare ASP.NET MVC per passare al puro REST / WebAPI. Ora mi chiedo: l'autenticazione e l'autorizzazione sono facili da realizzare come in ASP.NET MVC? Per non parlare di quanto sia facile implementare OAuth per Google, ecc. Quindi la mia domanda è, quanto sia facile realizzare tutte quelle cose con REST / WebAPI. Quindi prenderei in considerazione di avere una mini SPA.
AlexRebula

Nel nostro caso impostiamo un token in ogni richiesta http (http predefinito in un unico posto per aggiungerlo) usa ASP .net MVC / web api AuthorizeAttribute per controllare il token e le autorizzazioni, puoi anche all'interno del metodo api web ottenere quel token ed eseguire controlli di sicurezza più accurati. Se hai bisogno di OAuth, ci sono anche librerie sul lato angolare per aiutarti in questo.
Braulio

0

È possibile utilizzare il framework Angular per lo sviluppo front end, ovvero per costruire viste. Fornisce un'architettura robusta e, una volta che impari, scoprirai i suoi vantaggi rispetto al motore di visualizzazione razor di Asp.net MVC. Per recuperare i dati è necessario utilizzare WebAPI e ora il progetto ASP.Net MVC supporta entrambi i controller WebAPI e MVC fuori dagli schemi. È possibile fare riferimento al collegamento seguente per lo sviluppo di applicazioni Angular e ASP.Net MVC.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

Sono attualmente disponibili due framework per lo sviluppo di componenti UI per applicazioni angolari. Ho utilizzato entrambi questi framework in uno dei progetti angolari che ho lavorato.

Materiale https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

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.