Brise/Angular-Vorlage

von Mads Kristensen

Die Brise/Angular MVC-Vorlage wurde von Ward Bell geschrieben

Herunterladen der Brise/Angular MVC-Vorlage

AngularJS ist eine Open Source-Bibliothek von Google zum Erstellen von Single Page Applications (SPAs). Es bietet Datenbindung, Abhängigkeitseinfügung und Bildschirmverwaltung. Kombinieren Sie es mit BreezeJS, einer anderen Open Source-Bibliothek für die Datenmodellierung und Datenverwaltung, und Sie verfügen über die wesentlichen Zutaten 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 und Web Tools 2012.2 enthalten ist. Wenn Sie Visual Studio haben, verfügen Sie über ein Beispiel für SPA, das in weniger als 60 Sekunden ausgeführt wird.

Nach außen sieht die Anwendung der KnockoutJS SPA-Vorlage sehr ähnlich aus. Aber es ist ganz anders unter der Haube. Die KnockoutJS-Vorlage verwendet Knockout für die Datenbindung und unformatierte AJAX 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 Laufendes Protokoll von Ereignissen während der aktuellen Benutzersitzung angezeigt, darunter:

• Paging. Beachten Sie die Erstellung des Todo-Controllers.
• Remoteabfragen und lokale Cacheabfragen.
• Neue und geänderte Entitäten werden gespeichert.
• Änderungen, die auf dem Client überprüft wurden, sodass der Benutzer Fehler korrigieren kann, bevor Änderungen an der Datenbank vorgenommen werden.

In dieser Vorlage sind weitere Informationen zu finden, darunter:

• Dynamisches Laden von HTML-Ansichtsvorlagen.
• Benutzerdefinierte Datenbindung über Angular -Direktiven.
• Modularität und Abhängigkeitsinjektion.
• Abfragefilter, Sortierungen, Paging, Projektionen und Einbeziehung verwandter Entitäten.
• Freigeben von Daten über mehrere Bildschirme hinweg.
• Speichern mehrerer Änderungen als einzelne Transaktion.
• Validierungsregeln, die automatisch vom Server an den JavaScript-Client weitergegeben werden.

Fangen wir an.

Erstellen Sie ein Breeze/Angular-Vorlagenprojekt

Laden Sie die Vorlage herunter, und installieren Sie sie, indem Sie oben auf die Schaltfläche "Herunterladen" klicken. Die Vorlage wird als VSIX-Datei (Visual Studio Extension) verpackt. Möglicherweise müssen Sie Visual Studio neu starten.

Wählen Sie im Bereich "Vorlagen " die Option "Installierte Vorlagen " aus, und erweitern Sie den Knoten "Visual C# ". Wählen Sie unter Visual C#"Web" aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt, und klicken Sie auf 'OK'.

Wählen Sie im Assistenten "Neues Projekt" die Option "Breeze Angular SPA" aus.

Drücken Sie Ctrl-F5, um die Anwendung ohne Debugging zu erstellen und auszuführen, oder drücken Sie F5, um mit dem 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, in 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 Ihnen auf einem gelben Zettel.

Jetzt befinden Sie sich im Land der SPA. Alles, was Sie beim Bearbeiten von Todos sehen und erleben, wird mit Hilfe 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 Aufzeichnung starten.) Probieren Sie jetzt Folgendes aus:

• Fügen Sie ein neues Todo-Element hinzu.
• Klicken Sie auf die Beschriftung, und bearbeiten Sie den Titel des Todo-Elements.
• Aktivieren Sie ein Kontrollkästchen, um das Element fertig zu markieren. Beachten Sie, dass das Textfeld deaktiviert ist, sodass der Titel nicht mehr bearbeitet werden kann.
• Klicken Sie rechts neben der Beschriftung auf das "x". Das Element wird ausgeblendet und aus der Datenbank gelöscht.
• Wählen Sie ein anderes Element aus, und löschen Sie den 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, da der Titel zu lang ist.
• Klicken Sie auf die Schaltfläche "Todoliste hinzufügen". Links neben der vorherigen Liste wird eine neue Liste angezeigt.
• Experimentieren Sie mit dem Titel "TodoList", um die erforderlichen und Längenüberprüfungen auszulösen.
• Klicken Sie im Titeltextfeld, um die Fehlermeldung zu löschen.
• Klicken Sie auf das "x" im Kreis in der oberen rechten Ecke, um die TodoList und deren 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 beim Erkennen eines Fehlers keine Aufrufe an den Server aufgetreten sind. 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. Das unterscheidet sich von der KnockoutJS SPA-Vorlage, die PUT-, POST- und DELETE-Anforderungen für jedes Element einzeln vorgibt.

Beachten Sie außerdem, dass kein Netzwerkdatenverkehr vorhanden ist, wenn Sie zwischen den Seiten "TodoList" und "Info" wechseln. Das liegt daran, dass die Abfrage auf den lokalen Breeze-Cache beschränkt wurde.

Einen Blick hineinwerfen

Diese Anwendung verfügt über eine clientseitige und eine Serverseite. Der clientseitige Stapel besteht aus einem kleinen HTML-Code und einer Kombination aus JavaScript-Anwendungsmodulen (im Ordner "App") sowie 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 Aufgabe ohne intime Kenntnisse der anderen erledigen kann.

Der Controller fordert den Datenkontext auf, die Modellentitäten abzurufen und zu speichern. Der Datenkontext delegiert die meiste Arbeit an Breeze, wodurch Selbstverfolgungsmodellobjekte aus JSON-Abfrageergebnissen erstellt werden.

Der serverseitige Stapel besteht aus einigen Entwicklercode und drei Prinzipal.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 Details des Entity Framework wurden an Breeze.NET delegiert.

Nächste Schritte

Wir empfehlen Ihnen, den Code zu erkunden, geführt von der ausführlichen Diskussion über den Client und die Serverstapel auf der Breeze-Website.

Sie können versuchen, mit der clientseitigen Abfrage von Breeze zu spielen; Fügen Sie einige Filter und Sortierungen hinzu. Möglicherweise fügen Sie weitere Modelleigenschaften und mehr Entitäten hinzu, 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!