Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Il modello Breeze/Angular MVC è 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 Breeze/Angular SPA è una variante del modello SPA KnockoutJS incluso nell'aggiornamento di ASP.NET e Strumenti Web 2012.2. Se hai Visual Studio, avrai un esempio di applicazione a pagina singola funzionante in un attimo.
Apparentemente, l'applicazione è molto simile al modello di SPA KnockoutJS. Ma è molto diverso sotto il cofano. Il modello KnockoutJS usa Knockout per il data binding e 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 e la cronologia delle pagine.
Nella pagina Informazioni sull'applicazione viene visualizzato un log di eventi in esecuzione durante la sessione utente corrente, tra cui:
- Paginazione Nota la 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.
- Associazione dati personalizzata tramite direttive di Angular.
- Modularità e inserimento delle dipendenze.
- Filtri di query, ordinamento, paginazione, proiezioni e inclusione di entità correlate.
- Condivisione dei dati tra più schermate.
- Salvataggio di più modifiche come singola transazione.
- Le regole di convalida vengono propagate automaticamente dal server al client JavaScript.
Iniziamo.
Creare un progetto modello Breeze/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 al progetto il nome 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 l'esecuzione 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 per cui il titolo è troppo lungo.
- Fare clic sul pulsante "Aggiungi elenco todo". Viene visualizzato un nuovo elenco a sinistra dell'elenco precedente.
- Prova a modificare il titolo della TodoList per attivare le convalide richieste e di lunghezza.
- Fare clic nella casella di testo del 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 su" in alto a destra per visualizzare un log di queste attività.
La logica di convalida viene eseguita 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". Breeze aggrega le modifiche e le invia insieme come singola richiesta al metodo del SaveChanges controller API Web. È diverso dal modello KNOCKoutJS SPA, che effettua 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 Informazioni su. Ciò è dovuto al fatto che la query è stata vincolata alla cache di Breeze locale.
Dai un'occhiata 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") e 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 sistema di associazione dati Angular coordina visualizzazioni e 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 sviluppatori e tre librerie .NET principali: API Web, Entity Framework e Breeze.NET.
L'architettura di base è identica al modello DI 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 dalla vasta discussione sia degli stack del client che di quelli del server nel sito web di Breeze.
Potresti provare a utilizzare la query lato client di Breeze, aggiungendo filtri e ordinamenti. È possibile aggiungere ulteriori proprietà del modello e altre entità per ottenere una maggiore comprensione dello sviluppo end-to-end di SPA (applicazioni a pagina singola). Quando si è certi della progettazione, è possibile rimuovere le funzionalità Todo e sostituirle con le proprie.
Buon codice!