Breeze-/Angular-mall

av Mads Kristensen

Breeze/Angular MVC-mallen skrevs av Ward Bell

Ladda ned Breeze/Angular MVC-mallen

AngularJS är ett bibliotek med öppen källkod från Google för att skapa ensidesprogram (SPA). Den erbjuder databindning, beroendeinmatning och skärmhantering. Kombinera det med BreezeJS, ett annat bibliotek med öppen källkod för datamodellering och datahantering, och du har de viktigaste ingredienserna för en bra HTML-/JavaScript-klientapp.

Breeze/Angular SPA-mallen är en variant på KnockoutJS SPA-mallen som ingår i ASP.NET och Web Tools 2012.2 Update. Om du har Visual Studio har du ett exempel på spa som körs på mindre än 60 sekunder.

Utåt ser programmet mycket likt Mallen KnockoutJS SPA. Men det är helt annorlunda under huven. Mallen KnockoutJS använder Knockout för databindning och rå AJAX för dataåtkomst. Mallen Breeze/Angular använder Angular för databindning och Breeze för dataåtkomst. Dessa bibliotek möjliggör ytterligare funktioner, inklusive sidnavigering och historik.

Programmets Om-sida visar en logg över händelser som körs under den aktuella användarsessionen, inklusive:

• Sökning. Observera skapandet av Todo-kontrollanten.
• Fjärrfrågor och lokala cachefrågor.
• Spara nya och ändrade entiteter.
• Ändringar som verifierats på klienten, så att användaren kan rätta till misstag innan de genomför ändringar i databasen.

Det finns mer att utforska i den här mallen, inklusive:

• Dynamisk inläsning av HTML-vymallar.
• Anpassad databindning genom Angular "direktiv".
• Modularitet och beroendeinmatning.
• Frågefilter, sortering, sidindelning, projektioner och inkludering av relaterade entiteter.
• Dela data över flera skärmar.
• Spara flera ändringar som en enskild transaktion.
• Verifieringsregler sprids automatiskt från servern till JavaScript-klienten.

Nu ska vi komma igång.

Skapa ett Breeze-/Angular-mallprojekt

Ladda ned och installera mallen genom att klicka på knappen Ladda ned ovan. Mallen paketeras som en VSIX-fil (Visual Studio Extension). Du kan behöva starta om Visual Studio.

I fönstret Mallar väljer du Installerade mallar och expanderar noden Visual C# . Under Visual C# väljer du Webb. I listan över projektmallar väljer du ASP.NET MVC 4-webbprogram. Namnge projektet och klicka på OK.

I guiden Nytt projekt väljer du Breeze Angular SPA.

Tryck på Ctrl-F5 för att skapa och köra programmet utan felsökning, eller tryck på F5 för att köra med felsökning.

När programmet körs första gången visas en inloggningsskärm. Klicka på länken "Registrera dig" så visas en ny sida, där du kan ange ett användarnamn och lösenord. (Inloggnings- och registreringssidorna skapas med ASP.NET MVC.) När du skickar registreringsformuläret genererar servern en TodoList med två objekt för ditt konto. Sedan visar den dem för dig på en gul lapp.

Nu är du i spa-landet. Allt du ser och upplever när du manipulerar Todos återges och hanteras på klienten med hjälp av Knockout och Breeze. Utforska appen som användare ... men med en utvecklares perspektiv. Använd utvecklarverktygen i webbläsaren för att samla in nätverkstrafiken. (I Internet Explorer: Tryck på F12, välj fliken Nätverk och klicka på Starta insamling.) Prova nu följande:

• Lägg till ett nytt Todo-objekt.
• Klicka på etiketten och redigera att-göra-uppgiftens titel
• Markera kryssrutan för att markera objektet som är klart. Observera att textrutan är inaktiverad, så rubriken kan inte längre redigeras.
• Klicka på x till höger om etiketten. Objektet försvinner och tas bort från databasen.
• Välj ett annat objekt och rensa dess titel. Du får ett verifieringsfel om att rubriken krävs. Efter en kort paus återställs den tidigare rubriken.
• Skriv in en löjligt lång titel. Du får ett annat verifieringsfel om att rubriken är för lång.
• Klicka på knappen Lägg till att göra-lista. En ny lista visas till vänster om föregående lista.
• Experimentera med TodoList-titeln, utlös dess nödvändighets- och längdvalideringar.
• Klicka i textrutan rubrik för att rensa felmeddelandet.
• Klicka på "x" i cirkeln i det övre högra hörnet för att ta bort TodoList och dess todos.
• Klicka på länken "Om" i det övre högra hörnet för att se en logg över dessa aktiviteter.

Valideringslogik utförs på klientsidan av Breeze. Valideringsattribut på servermodellklasserna sprids till klienten och körs automatiskt innan klienten kontaktar servern.

Granska nätverkstrafiken. Observera att det inte fanns några anrop till servern när Breeze upptäckte ett fel. Varje giltig ändring resulterade i en POST-begäran till "/api/Todo/SaveChanges". Breeze paketar ändringarna och skickar dem tillsammans som en enda begäran till webb-API-kontrollantens SaveChanges metod. Det skiljer sig från KnockoutJS SPA-mallen, som gör PUT-, POST- och DELETE-begäranden för varje objekt individuellt.

Observera också att det inte finns någon nätverkstrafik när du växlar mellan sidorna TodoList och Om. Det beror på att frågan har begränsats till den lokala Breeze-cachen.

Titta inuti

Det här programmet har en klientsida och en serversida. Stacken på klientsidan består av lite HTML och en kombination av JavaScript-moduler för program (i mappen "app" plus JavaScript-bibliotek från tredje part (i mappen Skript).

Gränssnittsarkitekturen separerar HTML-widgetarna för vyerna från den stödjande presentationskoden i kontrollanterna. Angular-databindningssystemet samordnar vyer och kontrollanter så att var och en kan göra sitt jobb utan intim kunskap om den andra.

Kontrollanten ber datakontexten att hämta och spara modellentiteterna. Datakontexten delegerar det mesta av arbetet till Breeze, som konstruerar modellobjekt med självspårning från JSON-frågeresultat.

Stacken på serversidan består av viss utvecklarkod och tre huvudbibliotek för .NET: Webb-API, Entity Framework och Breeze.NET.

Den grundläggande arkitekturen är densamma som Mallen KnockoutJS SPA. Implementeringen är dock mycket enklare: DTU:erna har tagits bort och merparten av Entity Framework-informationen har delegerats till Breeze.NET.

Nästa steg

Vi rekommenderar att du utforskar koden, som vägleds av den omfattande diskussionen om både klienten och serverstacken på Breeze-webbplatsen.

Du kan prova att experimentera med Breeze-frågan på klientsidan; lägg till några filter och sortering. Du kan lägga till fler modellegenskaper och fler entiteter för att få en bättre känsla för slut-till-slut SPA-utveckling. När du är säker på designen kan du riva ut Todo-funktionerna och ersätta dem med dina egna.

Glad kodning!