Sdílet prostřednictvím

Šablona Breeze/Angular

  • Článek

Mads Kristensen

Šablonu Breeze/Angular MVC napsal Ward Bell.

Stažení šablony Breeze/Angular MVC

AngularJS je open source knihovna od Googlu pro vytváření jednostránkových aplikací (SPA). Nabízí datové vazby, vkládání závislostí a správu obrazovky. Zkombinujte ho s BreezeJS, další open source knihovnou pro modelování dat a správu dat, a máte základní složky pro skvělou klientskou aplikaci HTML/JavaScript.

Šablona Breeze/Angular SPA je variantou šablony KnockoutJS SPA, která je součástí aktualizace ASP.NET and Web Tools 2012.2. Pokud máte Sadu Visual Studio, budete mít příklad spa spuštěný za méně než 60 sekund.

Navenek vypadá aplikace velmi podobně jako šablona KnockoutJS SPA. Ale pod kapotou je to úplně jiné. Šablona KnockoutJS používá knockout pro datovou vazbu a nezpracovaný AJAX pro přístup k datům. Šablona Breeze/Angular používá Angular pro datové vazby a Breeze pro přístup k datům. Tyto knihovny umožňují další možnosti, včetně navigace na stránce a historie.

Na stránce O aplikaci se zobrazí spuštěný protokol událostí během aktuální uživatelské relace, včetně těchto:

  • Stránkování. Všimněte si vytvoření kontroleru todo.
  • Vzdálené dotazy a dotazy místní mezipaměti.
  • Ukládají se nové a upravené entity.
  • Změny ověřené v klientovi, aby uživatel mohl opravit chyby před potvrzením změn v databázi.

V této šabloně je k dispozici další možnosti, mezi které patří:

  • Dynamické načítání šablon zobrazení HTML
  • Vlastní datová vazba prostřednictvím Angular "direktiv".
  • Modularita a injektáž závislostí.
  • Filtry dotazů, řazení, stránkování, projekce a zahrnutí souvisejících entit
  • Sdílení dat na více obrazovkách
  • Ukládá se několik změn jako jedna transakce.
  • Ověřovací pravidla se automaticky šíří ze serveru do javascriptového klienta.

Tak se do toho pusťme.

Vytvoření projektu šablony Breeze/Angular

Stáhněte a nainstalujte šablonu kliknutím na tlačítko Stáhnout výše. Šablona je zabalená jako soubor rozšíření sady Visual Studio (VSIX). Možná budete muset restartovat sadu Visual Studio.

V podokně Šablony vyberte Nainstalované šablony a rozbalte uzel Visual C# . V části Visual C# vyberte Web. V seznamu šablon projektů vyberte ASP.NET webová aplikace MVC 4. Pojmenujte projekt a klikněte na OK.

V průvodci Novým projektem vyberte Breeze Angular SPA.

Stisknutím kláves Ctrl-F5 sestavte a spusťte aplikaci bez ladění nebo stisknutím klávesy F5 spusťte ladění.

Při prvním spuštění aplikace se zobrazí přihlašovací obrazovka. Klikněte na odkaz Zaregistrovat se a zobrazí se nová stránka, kde můžete zadat uživatelské jméno a heslo. (Přihlašovací a registrační stránky jsou vytvořené pomocí ASP.NET MVC.) Když odešlete registrační formulář, server vygeneruje Seznam úkolů se dvěma položkami pro váš účet. Pak vám je představí na žluté poznámce.

Teď jste v zemi SPA. Všechno, co uvidíte a prožite při manipulaci s Todosem, se vykresluje a spravuje na klientovi pomocí funkcí Knockout a Breeze. Prozkoumejte aplikaci jako uživatel ... ale s okem vývojáře. Pomocí vývojářských nástrojů v prohlížeči zachyťte síťový provoz. (V Internet Exploreru: Stiskněte klávesu F12, vyberte kartu Síť a klikněte na Spustit zachytávání.) Teď zkuste následující:

  • Přidejte novou položku Úkol.
  • Klikněte na popisek a upravte název položky úkol.
  • Zaškrtněte políčko a označte položku jako hotovou. Všimněte si, že textové pole je zakázané, takže název už není možné upravovat.
  • Klikněte na x napravo od popisku. Položka zmizí a odstraní se z databáze.
  • Vyberte jinou položku a vymažte její název. Zobrazí se chyba ověření, že se název vyžaduje. Po krátké odmlce se obnoví předchozí název.
  • Zadejte směšně dlouhý název. Zobrazí se jiná chyba ověření, protože název je příliš dlouhý.
  • Klikněte na tlačítko Přidat seznam úkolů. Nalevo od předchozího seznamu se zobrazí nový seznam.
  • Pohrajte si s názvem TodoList a aktivujte jeho požadované ověření a ověření délky.
  • Kliknutím do textového pole nadpisu chybovou zprávu vymažete.
  • Kliknutím na symbol x v kruhu v pravém horním rohu odstraňte Seznam úkolů a jeho todos.
  • Kliknutím na odkaz O aplikaci v pravém horním rohu zobrazíte protokol těchto aktivit.

Logiku ověřování provádí Breeze na straně klienta. Ověřovací atributy v serverových modelových třídách se šíří do klienta a automaticky se spustí před tím, než klient kontaktuje server.

Zkontrolujte síťový provoz. Všimněte si, že v okamžiku, kdy Breeze zjistila chybu, nedošlo k žádným voláním na server. Každá platná změna způsobila požadavek POST na /api/Todo/SaveChanges. Breeze sbalí změny a odešle je dohromady jako jeden požadavek na metodu kontroleru webového SaveChanges rozhraní API. To se liší od šablony KnockoutJS SPA, která vytváří požadavky PUT, POST a DELETE pro každou položku jednotlivě.

Všimněte si také, že při přepínání mezi stránkami TodoList a About nedochází k žádnému síťovému provozu. Důvodem je, že dotaz je omezený na místní mezipaměť Breeze.

Náhled uvnitř

Tato aplikace má na straně klienta a na straně serveru. Zásobník na straně klienta se skládá z malého kódu HTML a kombinace modulů JavaScriptu aplikace (ve složce "app") a knihoven JavaScriptu třetích stran (ve složce "Skripty").

Architektura uživatelského rozhraní odděluje widgety HTML zobrazení od podpůrného prezentačního kódu v řadičích. Systém Angular datových vazeb koordinuje zobrazení a kontrolery tak, aby každý z nich mohl dělat svou práci bez důvěrné znalosti druhého.

Kontroler požádá kontext dat o získání a uložení entit modelu. Kontext dat deleguje většinu práce na Breeze, který vytváří objekty modelu s vlastním sledováním z výsledků dotazu JSON.

Zásobník na straně serveru se skládá z vývojářského kódu a tří hlavních knihoven .NET: Webové rozhraní API, Entity Framework a Breeze.NET.

Základní architektura je stejná jako šablona KnockoutJS SPA. Implementace je však mnohem jednodušší: DTO byly odstraněny a většina podrobností Entity Framework byla delegována na Breeze.NET.

Další kroky

Doporučujeme, abyste kód prozkoumali v rámci rozsáhlé diskuze o zásobníku klienta i serveru na webu Breeze.

Můžete zkusit hrát s dotazem na straně klienta Breeze. přidejte filtry a řazení. Můžete přidat další vlastnosti modelu a více entit, abyste získali lepší pocit pro kompletní vývoj spa. Když jste si jistí návrhem, můžete funkce Todo vytrhnout a nahradit je vlastními.

Šťastné kódování!