Modello Breeze/Angular
The Breeze/Angular MVC Template è stato scritto da Ward Bell
AngularJS è una libreria open source di Google per la creazione di applicazioni a pagina singola. Offre data binding, inserimento delle dipendenze e gestione dello schermo. Combinalo con BreezeJS, un'altra libreria open source per la modellazione dei dati e la gestione dei dati e hai gli ingredienti essenziali per un'ottima app client HTML/JavaScript.
Il modello Spa Breeze/Angular è una variante del modello SPA KnockoutJS incluso nell'aggiornamento ASP.NET and Web Tools 2012.2. Se visual Studio è disponibile, sarà disponibile un'applicazione a pagina singola di esempio in esecuzione in meno di 60 secondi.
Esternamente, l'applicazione è molto simile al modello SPA KnockoutJS. Ma è molto diverso sotto il cofano. Il modello KnockoutJS usa Knockout per il data binding e L'AJAX non elaborato per l'accesso ai dati. Il modello Breeze/Angular usa Angular per il data binding e Breeze per l'accesso ai dati. Queste librerie consentono funzionalità aggiuntive, tra cui lo spostamento delle pagine e la cronologia.
Nella pagina Informazioni sull'applicazione viene visualizzato un log di eventi in esecuzione durante la sessione utente corrente, tra cui:
- Paging. Prendere nota della creazione del controller Todo.
- Query remote e query della cache locale.
- Salvataggio di entità nuove e modificate.
- Modifiche convalidate nel client, in modo che l'utente possa correggere gli errori prima di eseguire il commit delle modifiche al database.
In questo modello sono disponibili altre informazioni, tra cui:
- Caricamento dinamico dei modelli di visualizzazione HTML.
- Data binding personalizzato tramite Angular "direttive".
- Modularità e inserimento delle dipendenze.
- Filtri di query, ordinamenti, paging, proiezioni e inclusione di entità correlate.
- Condivisione dei dati tra più schermi.
- Salvataggio di più modifiche come singola transazione.
- Le regole di convalida vengono propagate automaticamente dal server al client JavaScript.
A questo punto, procedere con l'esercitazione.
Creare un progetto modello di brezza/Angular
Scaricare e installare il modello facendo clic sul pulsante Scarica sopra. Il modello viene creato in un pacchetto come file di estensione di Visual Studio (VSIX). Potrebbe essere necessario riavviare Visual Studio.
Nel riquadro Modelli selezionare Modelli installati ed espandere il nodo Visual C# . In Visual C# selezionare Web. Nell'elenco dei modelli di progetto selezionare ASP.NET'applicazione Web MVC 4. Assegnare un nome al progetto e fare clic su OK.
Nella procedura guidata Nuovo progetto selezionare Breeze Angular SPA.
Premere CTRL+F5 per compilare ed eseguire l'applicazione senza eseguire il debug oppure premere F5 per eseguire con il debug.
Quando l'applicazione viene eseguita per la prima volta, viene visualizzata una schermata di accesso. Fare clic sul collegamento "Iscrizione" e visualizzare una nuova pagina, in cui è possibile immettere un nome utente e una password. Le pagine di accesso e registrazione vengono compilate usando ASP.NET MVC. Quando si invia il modulo di registrazione, il server genera un Oggetto TodoList con due elementi per l'account. Poi li presenta a voi su una nota gialla.
Ora sei nella terra di SPA. Tutto ciò che vedi ed esperienza durante la manipolazione di Todos viene sottoposto a rendering e gestito sul client con l'aiuto di Knockout e Breeze. Esplorare l'app come utente ... ma con l'occhio di uno sviluppatore. Usare gli strumenti di sviluppo nel browser per acquisire il traffico di rete. In Internet Explorer: premere F12, selezionare la scheda Rete e fare clic su Avvia acquisizione. Provare a eseguire le operazioni seguenti:
- Aggiungere un nuovo elemento Todo.
- Fare clic sull'etichetta e modificare il titolo dell'elemento Todo
- Selezionare una casella di controllo per contrassegnare l'elemento completato. Si noti che la casella di testo è disabilitata, quindi il titolo non è più modificabile.
- Fare clic su "x" a destra dell'etichetta. L'elemento scompare e viene eliminato dal database.
- Selezionare un altro elemento e deselezionarne il titolo. Verrà visualizzato un errore di convalida che indica che il titolo è obbligatorio. Dopo una breve pausa, il titolo precedente viene ripristinato.
- Digitare un titolo ridicolamente lungo. Verrà visualizzato un errore di convalida diverso che il titolo è troppo lungo.
- Fare clic sul pulsante "Aggiungi elenco todo". Viene visualizzato un nuovo elenco a sinistra dell'elenco precedente.
- Gioca con il titolo TodoList, attivando le convalide necessarie e di lunghezza.
- Fare clic nella casella di testo titolo per cancellare il messaggio di errore.
- Fare clic su "x" nel cerchio nell'angolo superiore destro per eliminare TodoList e i relativi todos.
- Fare clic sul collegamento "Informazioni" in alto a destra per visualizzare un log di queste attività.
La logica di convalida viene eseguita sul lato client da Breeze. Gli attributi di convalida nelle classi del modello server vengono propagati al client ed eseguiti automaticamente prima che il client contatti il server.
Esaminare il traffico di rete. Si noti che non sono state eseguite chiamate al server quando Breeze ha rilevato un errore. Ogni modifica valida ha generato una richiesta POST a "/api/Todo/SaveChanges". La brezza aggrega le modifiche e le invia insieme come singola richiesta al metodo del SaveChanges controller API Web. Questo è diverso dal modello SPA KnockoutJS, che effettua le richieste PUT, POST e DELETE per ogni elemento singolarmente.
Si noti inoltre che non è presente traffico di rete quando si passa tra le pagine TodoList e About. Ciò è dovuto al fatto che la query è stata vincolata alla cache di Breeze locale.
Visualizza all'interno
Questa applicazione ha un lato client e un lato server. Lo stack lato client è costituito da un piccolo codice HTML e da una combinazione di moduli JavaScript dell'applicazione (nella cartella "app") più librerie JavaScript di terze parti (nella cartella "Scripts").
L'architettura dell'interfaccia utente separa i widget HTML delle visualizzazioni dal codice di presentazione di supporto nei controller. Il Angular sistema di associazione dati coordina le visualizzazioni e i controller in modo che ognuno possa svolgere il proprio lavoro senza conoscenza intima dell'altro.
Il controller chiede al contesto dati di acquisire e salvare le entità del modello. Il contesto dei dati delega la maggior parte del lavoro a Breeze, che costruisce oggetti modello di rilevamento automatico dai risultati delle query JSON.
Lo stack lato server è costituito da codice per sviluppatore e da tre librerie .NET principali: API Web, Entity Framework e Breeze.NET.
L'architettura di base è la stessa del modello SPA KnockoutJS. Tuttavia, l'implementazione è molto più semplice: le DTO sono state eliminate e la maggior parte dei dettagli di Entity Framework è stata delegata a Breeze.NET.
Passaggi successivi
È consigliabile esplorare il codice, guidato dall'ampia discussione sia del client che degli stack di server nel sito Web Breeze.
È possibile provare a giocare con la query sul lato client di Breeze; aggiungere alcuni filtri e ordinamenti. È possibile aggiungere altre proprietà del modello e altre entità per ottenere un'idea migliore per lo sviluppo di spa end-to-end. Quando si è certi della progettazione, è possibile rimuovere le funzionalità Todo e sostituirle con le proprie.
Buon lavoro.