Breeze-/Angular-Vorlage
von Mads Kristensen
Die Breeze/Angular MVC-Vorlage wurde von Ward Bell geschrieben.
AngularJS ist eine Open Source Bibliothek von Google zum Erstellen von Single Page Applications (SPAs). Es bietet Datenbindung, Abhängigkeitsinjektion und Bildschirmverwaltung. Kombinieren Sie es mit BreezeJS, einer weiteren Open Source-Bibliothek für Die Datenmodellierung und Datenverwaltung, und Sie haben die wesentlichen Komponenten für eine großartige HTML/JavaScript-Client-App.
Die Vorlage Breeze/Angular SPA ist eine Variante der KnockoutJS SPA-Vorlage, die im Update ASP.NET and Web Tools 2012.2 enthalten ist. Wenn Sie Über Visual Studio verfügen, können Sie in weniger als 60 Sekunden eine Beispiel-SPA ausführen.
Nach außen sieht die Anwendung der KnockoutJS SPA-Vorlage sehr ähnlich. Aber es ist ganz anders unter der Haube. Die KnockoutJS-Vorlage verwendet Knockout für die Datenbindung und AJAX-Rohdaten für den Datenzugriff. Die Vorlage Breeze/Angular verwendet Angular für die Datenbindung und Breeze für den Datenzugriff. Diese Bibliotheken ermöglichen zusätzliche Funktionen, einschließlich Seitennavigation und Verlauf.
Auf der Seite Info der Anwendung wird ein protokollierendes Ereignisprotokoll während der aktuellen Benutzersitzung angezeigt, einschließlich:
- Paging. Beachten Sie die Erstellung des Todo-Controllers.
- Remoteabfragen und lokale Cacheabfragen.
- Speichern neuer und geänderter Entitäten.
- Änderungen, die auf dem Client überprüft werden, sodass der Benutzer Fehler korrigieren kann, bevor Er Änderungen an der Datenbank committen kann.
In dieser Vorlage gibt es noch mehr zu erkunden, darunter:
- Dynamisches Laden von HTML-Ansichtsvorlagen.
- Benutzerdefinierte Datenbindung über Angular "Direktiven".
- Modularität und Abhängigkeitsinjektion.
- Abfragefilter, Sortierungen, Paging, Projektionen und Einschließen verwandter Entitäten.
- Freigeben von Daten über mehrere Bildschirme hinweg.
- Speichern mehrerer Änderungen als einzelne Transaktion.
- Validierungsregeln werden automatisch vom Server an den JavaScript-Client weitergegeben.
Fangen wir also an.
Erstellen eines Breeze-/Angular-Vorlagenprojekts
Laden Sie die Vorlage herunter, und installieren Sie sie, indem Sie oben auf die Schaltfläche Herunterladen klicken. Die Vorlage wird als Visual Studio-Erweiterungsdatei (VSIX) gepackt. Möglicherweise müssen Sie Visual Studio neu starten.
Wählen Sie im Bereich Vorlagendie Option Installierte Vorlagen aus, und erweitern Sie den Knoten Visual C# . Wählen Sie unter Visual C#die Option Web aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Geben Sie dem Projekt einen Namen, und klicken Sie auf OK.
Wählen Sie im Assistenten Neues Projektdie Option Breeze Angular SPA aus.
Drücken Sie STRG-F5, um die Anwendung ohne Debuggen zu erstellen und auszuführen, oder drücken Sie F5, um das Debuggen auszuführen.
Wenn die Anwendung zum ersten Mal ausgeführt wird, wird ein Anmeldebildschirm angezeigt. Klicken Sie auf den Link "Registrieren", und eine neue Seite gleitet in die Ansicht, auf der Sie einen Benutzernamen und ein Kennwort eingeben können. (Die Anmelde- und Registrierungsseiten werden mit ASP.NET MVC erstellt.) Wenn Sie das Registrierungsformular übermitteln, generiert der Server eine TodoList mit zwei Elementen für Ihr Konto. Dann präsentiert es sie Ihnen auf einer gelben Notiz.
Jetzt sind Sie im Land von SPA. Alles, was Sie beim Bearbeiten von Todos sehen und erleben, wird mithilfe von Knockout und Breeze auf dem Client gerendert und verwaltet. Erkunden Sie die App als Benutzer ... aber mit dem Auge eines Entwicklers. Verwenden Sie die Entwicklertools in Ihrem Browser, um den Netzwerkdatenverkehr zu erfassen. (In Internet Explorer: Drücken Sie F12, wählen Sie die Registerkarte Netzwerk aus, und klicken Sie auf Aufnahme starten.) Probieren Sie nun Folgendes aus:
- Fügen Sie ein neues Todo-Element hinzu.
- Klicken Sie auf die Bezeichnung, und bearbeiten Sie den Titel des Todo-Elements.
- Aktivieren Sie ein Kontrollkästchen, um das Element als erledigt zu markieren. Beachten Sie, dass das Textfeld deaktiviert ist, sodass der Titel nicht mehr bearbeitet werden kann.
- Klicken Sie rechts neben der Bezeichnung auf das "x". Das Element wird ausgeblendet und aus der Datenbank gelöscht.
- Wählen Sie ein anderes Element aus, und löschen Sie dessen Titel. Sie erhalten einen Validierungsfehler, dass der Titel erforderlich ist. Nach einer kurzen Pause wird der vorherige Titel wiederhergestellt.
- Geben Sie einen lächerlich langen Titel ein. Sie erhalten einen anderen Validierungsfehler, dass der Titel zu lang ist.
- Klicken Sie auf die Schaltfläche "Aufgabenliste hinzufügen". Links von der vorherigen Liste wird eine neue Liste angezeigt.
- Spielen Sie mit dem TodoList-Titel, und lösen Sie die erforderlichen überprüfungen und die Länge aus.
- Klicken Sie in das Textfeld titel, um die Fehlermeldung zu löschen.
- Klicken Sie auf das "x" im Kreis in der oberen rechten Ecke, um die TodoList und die zugehörigen Todos zu löschen.
- Klicken Sie oben rechts auf den Link "Info", um ein Protokoll dieser Aktivitäten anzuzeigen.
Die Validierungslogik wird clientseitig von Breeze ausgeführt. Validierungsattribute für die Servermodellklassen werden an den Client weitergegeben und automatisch ausgeführt, bevor der Client den Server kontaktiert.
Überprüfen Sie den Netzwerkdatenverkehr. Beachten Sie, dass keine Serveraufrufe aufgetreten sind, als Breeze einen Fehler erkannt hat. Jede gültige Änderung führte zu einer POST-Anforderung an "/api/Todo/SaveChanges". Breeze bündelt die Änderungen und sendet sie als einzelne Anforderung an die Methode des SaveChanges Web-API-Controllers. Dies unterscheidet sich von der KnockoutJS SPA-Vorlage, die PUT-, POST- und DELETE-Anforderungen für jedes Element einzeln festlegt.
Beachten Sie außerdem, dass kein Netzwerkdatenverkehr vorliegt, wenn Sie zwischen den Seiten TodoList und Info wechseln. Das liegt daran, dass die Abfrage auf den lokalen Breeze-Cache beschränkt wurde.
Einsehen in
Diese Anwendung verfügt über eine Client- und eine Serverseite. Der clientseitige Stapel besteht aus einem kleinen HTML-Code und einer Kombination aus JavaScript-Anwendungsmodulen (im Ordner "app") und JavaScript-Bibliotheken von Drittanbietern (im Ordner "Skripts").
Die UI-Architektur trennt die HTML-Widgets der Ansichten vom unterstützenden Präsentationscode in den Controllern. Das Angular Datenbindungssystem koordiniert Ansichten und Controller, sodass jeder seine Arbeit ohne enge Kenntnis des anderen erledigen kann.
Der Controller fordert den Datenkontext auf, die Modellentitäten zu erhalten und zu speichern. Der Datenkontext delegiert den Größten Teil der Arbeit an Breeze, das selbstnachverfolgungsfähige Modellobjekte aus JSON-Abfrageergebnissen erstellt.
Der serverseitige Stapel besteht aus Entwicklercode und drei prinzipalen .NET-Bibliotheken: Web-API, Entity Framework und Breeze.NET.
Die grundlegende Architektur ist identisch mit der KnockoutJS SPA-Vorlage. Die Implementierung ist jedoch viel einfacher: Die DTOs wurden gelöscht, und die meisten Entity Framework-Details wurden an Breeze.NET delegiert.
Nächste Schritte
Wir empfehlen Ihnen, den Code zu erkunden, geleitet von der ausführlichen Diskussion sowohl des Clients als auch der Serverstapel auf der Breeze-Website.
Sie können versuchen, mit der clientseitigen Breeze-Abfrage zu spielen. Fügen Sie einige Filter und Sortierungen hinzu. Sie können weitere Modelleigenschaften und mehr Entitäten hinzufügen, um ein besseres Gefühl für die End-to-End-SPA-Entwicklung zu erhalten. Wenn Sie sich des Designs sicher sind, können Sie die Todo-Features ausreißen und durch Ihre eigenen ersetzen.
Viel Spaß beim Programmieren!