Szablon Breeze/Angular

Autor: Mads Kristensen

Szablon MVC Breeze/Angular został napisany przez Ward Bell

Pobierz szablon Breeze/Angular MVC

AngularJS to biblioteka open source firmy Google do tworzenia aplikacji jednostronicowych (SPA). Oferuje powiązanie danych, wstrzyknięcie zależności i zarządzanie ekranem. Połącz ją z usługą BreezeJS, inną biblioteką open source do modelowania danych i zarządzania danymi oraz masz podstawowe składniki dla doskonałej aplikacji klienckiej HTML/JavaScript.

Szablon Spa Breeze/Angular jest odmianą szablonu Spa KnockoutJS zawartego w aktualizacji ASP.NET and Web Tools 2012.2. Jeśli masz program Visual Studio, będziesz mieć przykładowy SPA uruchomiony w mniej niż 60 sekund.

Na zewnątrz aplikacja wygląda bardzo podobnie do szablonu KnockoutJS SPA. Ale to zupełnie inaczej pod kapturem. Szablon KnockoutJS używa elementu Knockout na potrzeby powiązania danych i nieprzetworzonego AJAX na potrzeby dostępu do danych. Szablon Breeze/Angular używa Angular do powiązania danych i aplikacji Breeze w celu uzyskania dostępu do danych. Te biblioteki umożliwiają dodatkowe możliwości, w tym nawigację po stronie i historię.

Strona Informacje aplikacji wyświetla uruchomiony dziennik zdarzeń podczas bieżącej sesji użytkownika, w tym:

• Stronicowania. Zwróć uwagę na tworzenie kontrolera zadań do wykonania.
• Zapytania zdalne i zapytania lokalnej pamięci podręcznej.
• Zapisywanie nowych i zmodyfikowanych jednostek.
• Zmiany zweryfikowane na kliencie, aby użytkownik mógł poprawić błędy przed zatwierdzeniem zmian w bazie danych.

Więcej informacji na ten temat można zapoznać w tym szablonie, w tym:

• Dynamiczne ładowanie szablonów widoków HTML.
• Niestandardowe powiązanie danych za pomocą Angular "dyrektyw".
• Modułowość i wstrzykiwanie zależności.
• Filtry zapytań, sortowanie, stronicowanie, projekcje i dołączanie powiązanych jednostek.
• Udostępnianie danych na wielu ekranach.
• Zapisywanie wielu zmian jako pojedynczej transakcji.
• Reguły walidacji propagowane automatycznie z serwera do klienta JavaScript.

Zaczynajmy.

Tworzenie projektu szablonu Breeze/Angular

Pobierz i zainstaluj szablon, klikając przycisk Pobierz powyżej. Szablon jest spakowany jako plik rozszerzenia programu Visual Studio (VSIX). Może być konieczne ponowne uruchomienie programu Visual Studio.

W okienku Szablony wybierz pozycję Zainstalowane szablony i rozwiń węzeł Visual C# . W obszarze Visual C# wybierz pozycję Sieć Web. Na liście szablonów projektów wybierz pozycję ASP.NET aplikacja internetowa MVC 4. Nadaj projektowi nazwę i kliknij przycisk OK.

W kreatorze Nowy projekt wybierz pozycję Breeze Angular SPA.

Naciśnij klawisze Ctrl-F5, aby skompilować i uruchomić aplikację bez debugowania, lub naciśnij klawisz F5, aby uruchomić polecenie z debugowaniem.

Po pierwszym uruchomieniu aplikacji zostanie wyświetlony ekran logowania. Kliknij link "Zarejestruj się", a nowa strona zostanie wyświetlona w widoku, w którym możesz wprowadzić nazwę użytkownika i hasło. (Strony logowania i rejestracji są tworzone przy użyciu ASP.NET MVC). Po przesłaniu formularza rejestracji serwer generuje listę zadań do wykonania z dwoma elementami dla twojego konta. Następnie przedstawia je na żółtej notce.

Teraz jesteś w kraju SPA. Wszystko, co widzisz i doświadczenie podczas manipulowania todos, jest renderowane i zarządzane na kliencie z pomocą Knockout i Breeze. Eksploruj aplikację jako użytkownik ... ale z okiem dewelopera. Użyj narzędzi deweloperskich w przeglądarce, aby przechwycić ruch sieciowy. (W programie Internet Explorer: naciśnij klawisz F12, wybierz kartę Sieć , a następnie kliknij przycisk Rozpocznij przechwytywanie). Teraz spróbuj wykonać następujące czynności:

• Dodaj nowy element zadań do wykonania.
• Kliknij etykietę i edytuj tytuł elementu zadań do wykonania
• Zaznacz pole wyboru, aby oznaczyć element jako ukończony. Zwróć uwagę, że pole tekstowe jest wyłączone, więc tytuł nie jest już edytowalny.
• Kliknij znak "x" po prawej stronie etykiety. Element zniknie i zostanie usunięty z bazy danych.
• Wybierz inny element i wyczyść jego tytuł. Zostanie wyświetlony błąd weryfikacji, że tytuł jest wymagany. Po krótkiej przerwie poprzedni tytuł zostanie przywrócony.
• Wpisz śmiesznie długi tytuł. Zostanie wyświetlony inny błąd weryfikacji, że tytuł jest za długi.
• Kliknij przycisk "Dodaj listę zadań do wykonania". Po lewej stronie poprzedniej listy zostanie wyświetlona nowa lista.
• Graj z tytułem TodoList, wyzwalając wymagane i długie walidacje.
• Kliknij pole tekstowe tytułu, aby wyczyścić komunikat o błędzie.
• Kliknij znak "x" w okręgu w prawym górnym rogu, aby usunąć listę zadań TodoList i jej todos.
• Kliknij link "Informacje" w prawym górnym rogu, aby wyświetlić dziennik tych działań.

Logika walidacji jest wykonywana po stronie klienta przez aplikację Breeze. Atrybuty weryfikacji klas modelu serwera są propagowane do klienta i wykonywane automatycznie przed kontaktem klienta z serwerem.

Przejrzyj ruch sieciowy. Zwróć uwagę, że nie było żadnych wywołań serwera po wykryciu błędu przez aplikację Breeze. Każda prawidłowa zmiana spowodowała żądanie POST "/api/Todo/SaveChanges". Bryza łączy zmiany i wysyła je razem jako jedno żądanie do metody kontrolera internetowego SaveChanges interfejsu API. Różni się to od szablonu KnockoutJS SPA, który sprawia, że żądania PUT, POST i DELETE dla każdego elementu są indywidualnie.

Zwróć również uwagę, że podczas przełączania się między stronami TodoList i About nie ma ruchu sieciowego. Dzieje się tak, ponieważ zapytanie zostało ograniczone do lokalnej pamięci podręcznej Breeze.

Zaglądaj do środka

Ta aplikacja ma po stronie klienta i po stronie serwera. Stos po stronie klienta składa się z małego kodu HTML i kombinacji modułów JavaScript aplikacji (w folderze "app") oraz bibliotek języka JavaScript innych firm (w folderze "Scripts").

Architektura interfejsu użytkownika oddziela widżety HTML widoków od kodu prezentacji pomocniczej w kontrolerach. System Angular powiązania danych koordynuje widoki i kontrolery, dzięki czemu każdy może wykonać swoją pracę bez intymnej wiedzy o drugiej.

Kontroler prosi kontekst danych o uzyskanie i zapisanie jednostek modelu. Kontekst danych deleguje większość pracy do aplikacji Breeze, która tworzy obiekty modelu śledzenia samodzielnego z wyników zapytań JSON.

Stos po stronie serwera składa się z kodu dewelopera i trzech głównych bibliotek platformy .NET: internetowego interfejsu API, platformy Entity Framework i Breeze.NET.

Podstawowa architektura jest taka sama jak szablon KnockoutJS SPA. Jednak implementacja jest znacznie prostsza: obiekty DTO zostały usunięte, a większość szczegółów platformy Entity Framework została delegowana do Breeze.NET.

Następne kroki

Zalecamy zapoznanie się z kodem, prowadzone przez obszerną dyskusję zarówno na temat klienta, jak i stosów serwerów w witrynie internetowej Breeze.

Możesz spróbować grać z zapytaniem po stronie klienta aplikacji Breeze; dodaj filtry i sortowanie. Możesz dodać więcej właściwości modelu i więcej jednostek, aby lepiej poczuć się do kompleksowego opracowywania SPA. Gdy jesteś przekonany o projekcie, możesz rozerwać funkcje zadań do wykonania i zastąpić je własnymi.

Szczęśliwe kodowanie!