Szablon Breeze/Angular

Autor : Mads Kristensen

Szablon Breeze/Angular MVC został napisany przez Ward Bell

Pobieranie szablonu Breeze/Angular MVC

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

Szablon Breeze/Angular SPA jest odmianą szablonu KnockoutJS SPA zawartego w ASP.NET i Web Tools 2012.2 Update. Jeśli masz program Visual Studio, będziesz mieć przykład 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 do tworzenia powiązań danych i nieprzetworzonego interfejsu AJAX na potrzeby dostępu do danych. Szablon Breeze/Angular używa usługi Angular do tworzenia powiązań 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 O aplikacji wyświetla aktywny dziennik zdarzeń podczas bieżącej sesji użytkownika, w tym:

• Stronicowanie. Zanotuj tworzenie kontrolera Todo.
• Zapytania zdalne i zapytania lokalnej pamięci podręcznej.
• Zapisywanie nowych i zmodyfikowanych jednostek.
• Zmiany zweryfikowane na kliencie, dzięki czemu użytkownik może poprawić błędy przed zatwierdzeniem zmian w bazie danych.

W tym szablonie warto zapoznać się z następującymi tematami:

• Dynamiczne ładowanie szablonów widoków HTML.
• Niestandardowe powiązanie danych za pomocą "dyrektyw Angulara".
• 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 są propagowane automatycznie z serwera do klienta JavaScript.

Zacznijmy.

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 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żna 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 notatce.

Teraz jesteś w krainie SPA. Wszystko, co widzisz i doświadczasz podczas manipulowania elementami Todo, jest renderowane i zarządzane na kliencie za 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 na liście zadań.
• Kliknij etykietę i edytuj tytuł elementu Todo
• 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ł zostaje 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.
• Pobaw się tytułem TodoList, wyzwalając walidacje dotyczące wymagalności i długości.
• 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ń i jej zadania.
• 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 w klasach modelu serwera są propagowane do klienta i wykonywane automatycznie przed kontaktem klienta z serwerem.

Przejrzyj ruch sieciowy. Zauważ, że gdy Breeze wykrył błąd, nie nastąpiły żadne wywołania do serwera. Każda prawidłowa zmiana spowodowała żądanie typu POST do "/api/Todo/SaveChanges". Breeze łączy zmiany i wysyła je razem jako pojedyncze żądanie do metody kontrolera Web API SaveChanges. Różni się to od szablonu KnockoutJS SPA, który wysyła żądania PUT, POST i DELETE dla każdego elementu indywidualnie.

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

Zaglądaj do środka

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

Architektura interfejsu użytkownika oddziela widżety HTML widoków od pomocniczego kodu prezentacji na kontrolerach. System powiązania danych Angular koordynuje widoki i kontrolery, dzięki czemu każda z nich może wykonywać 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 konstruuje obiekty modelu samodzielnego śledzenia z wyników zapytania JSON.

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

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

Dalsze kroki

Zalecamy zapoznanie się z kodem, kierując się obszerną dyskusją na temat zarówno stosu klienta, jak i serwera na stronie internetowej Breeze.

Możesz spróbować eksperymentować z zapytaniem Breeze po stronie klienta; dodaj filtry i sortowanie. Możesz dodać więcej właściwości modelu i więcej encji, aby lepiej zrozumieć kompleksowe od początku do końca tworzenie SPA. Gdy masz pewność co do projektu, możesz usunąć funkcje Todo i zastąpić je własnymi.

Udanego kodowania!