E-book details

Angular. Programowanie z użyciem języka TypeScript. Wydanie II

Angular. Programowanie z użyciem języka TypeScript. Wydanie II

Yakov Fain, Anton Moiseev

Ebook

Angular jest znakomitym frameworkiem wybieranym przez programistów, którym zależy na szybkiej, wydajnej i satysfakcjonującej pracy. Umożliwia sprawne tworzenie zarówno lekkich klientów internetowych, jak i w pełni funkcjonalnych aplikacji. Angular pozwala na wykorzystywanie TypeScriptu, który w porównaniu z JavaScriptem o wiele lepiej spisuje się jako język programowania profesjonalnych aplikacji internetowych. Ten framework zapewnia również możliwość korzystania z wielu nowoczesnych bibliotek, dzięki którym w łatwy sposób można tworzyć i rozwijać zaawansowane, atrakcyjne aplikacje.

Ta książka jest drugim, przejrzanym i uzupełnionym wydaniem praktycznego podręcznika, znakomicie ułatwiającego naukę tworzenia aplikacji. Wyjaśniono tu tak istotne zagadnienia jak zarządzanie stanem, kontrola wprowadzanych danych, budowa formularzy i komunikacja z serwerem. Prezentowane treści uzupełniono praktycznymi przykładami kodu, składającego się na w pełni funkcjonalną aplikację internetową. Pokazano, w jaki sposób wstrzykiwać zależności oraz projektować reaktywne interfejsy użytkownika i komunikację między komponentami aplikacji. Nie zabrakło opisu przydatnych bibliotek, jak RxJS, NgRx czy Flex Layout.

W tej książce między innymi:

  • wprowadzenie do architektury Angulara i sposób pracy z frameworkiem
  • praca z obserwowalnymi strumieniami danych
  • podstawowe i zaawansowane funkcje routera Angulara
  • formularze reaktywne i walidacja danych
  • testowanie aplikacji, w tym testy jednostkowe i testy przepływu pracy

Angular: szybki, wydajny, bezpieczny!

 

Przedmowa 11

 

Podziękowania 13

O książce 15

O autorach 19

Rozdział 1. Wprowadzenie do frameworku Angular 21

  • 1.1. Dlaczego do tworzenia aplikacji internetowych wybierać Angular? 22
  • 1.2. Dlaczego tworzyć aplikacje w TypeScripcie, a nie w JavaScripcie 23
  • 1.3. Przegląd frameworku Angular 24
  • 1.4. Wprowadzenie do CLI Angulara 28
    • 1.4.1. Generowanie nowego projektu Angulara 29
    • 1.4.2. Kompilacje programistyczne i produkcyjne 31
  • 1.5. Porównanie kompilacji JIT i AOT 33
    • 1.5.1. Tworzenie paczek za pomocą opcji -prod 34
    • 1.5.2. Generowanie paczek na dysku 35
  • 1.6. Wprowadzenie do przykładowej aplikacji ngAuction 35
  • Podsumowanie 38

Rozdział 2. Główne artefakty aplikacji napisanych w Angularze 39

  • 2.1. Komponenty 39
  • 2.2. Usługi 42
  • 2.3. Dyrektywy 43
  • 2.4. Potoki 45
  • 2.5. Moduły 46
    • 2.5.1. Moduły funkcyjne 46
  • 2.6. Wiązanie danych 50
    • 2.6.1. Wiązanie właściwości i zdarzeń 50
    • 2.6.2. Jedno- i dwukierunkowe wiązanie danych w działaniu 51
  • 2.7. Część praktyczna: rozpoczynamy tworzenie aplikacji ngAuction 55
    • 2.7.1. Wstępna konfiguracja projektu dla aplikacji ngAuction 55
    • 2.7.2. Generowanie komponentów dla aplikacji ngAuction 57
    • 2.7.3. Komponent aplikacji 57
    • 2.7.4. Komponent paska nawigacyjnego 59
    • 2.7.5. Komponent wyszukiwania 60
    • 2.7.6. Komponent stopki 61
    • 2.7.7. Komponent karuzeli 61
    • 2.7.8. Komponent strony głównej 64
  • Podsumowanie 65

Rozdział 3. Podstawy routera Angulara 67

  • 3.1. Podstawy routingu 68
  • 3.2. Strategie lokalizacji 69
    • 3.2.1. Nawigacja oparta na znaku kratki 70
    • 3.2.2. Nawigacja oparta na interfejsie History API 70
  • 3.3. Bloki konstrukcyjne nawigacji po stronie klienta 71
  • 3.4. Nawigacja do tras za pomocą metody navigate() 76
  • 3.5. Przekazywanie danych do tras 77
    • 3.5.1. Wyodrębnianie parametrów z ActivatedRoute 78
    • 3.5.2. Przekazywanie do trasy parametrów zapytania 80
  • 3.6. Trasy podrzędne 81
  • 3.7. Część praktyczna: dodanie nawigacji do aplikacji aukcji internetowych 86
    • 3.7.1. Usługa ProductService 87
    • 3.7.2. Komponent ProductItemComponent 88
    • 3.7.3. Komponent HomeComponent 89
    • 3.7.4. Komponent StarsComponent 91
    • 3.7.5. Komponent ProductDetailComponent 94
  • Podsumowanie 96

Rozdział 4. Zaawansowana konfiguracja routera 97

  • 4.1. Strzeżenie tras 98
    • 4.1.1. Implementowanie strażnika CanActivate 99
    • 4.1.2. Implementowanie strażnika CanDeactivate 101
    • 4.1.3. Implementowanie strażnika Resolve 103
  • 4.2. Tworzenie aplikacji SPA z wieloma gniazdami routera 107
    • 4.2.1. Moduły leniwie ładowane 109
    • 4.2.2. Ładowarki wstępne 113
  • Podsumowanie 114

Rozdział 5. Wstrzykiwanie zależności we frameworku Angular 115

  • 5.1. Wzorzec Wstrzykiwanie Zależności 116
  • 5.2. Korzyści płynące ze wstrzykiwania zależności w aplikacjach napisanych w Angularze 117
    • 5.2.1. Luźne powiązania i wielokrotne wykorzystywanie 117
    • 5.2.2. Testowalność 119
  • 5.3. Wstrzykiwacze i dostawcy 119
  • 5.4. Prosta aplikacja ze wstrzykiwaniem zależności frameworku Angular 122
    • 5.4.1. Wstrzyknięcie usługi produktowej 122
    • 5.4.2. Wstrzyknięcie usługi HttpClient 125
  • 5.5. Ułatwione przełączanie wstrzykiwaczy 127
  • 5.6. Deklarowanie dostawców za pomocą właściwości useFactory i useValue 131
    • 5.6.1. Korzystanie z klasy InjectionToken 133
    • 5.6.2. Wstrzykiwanie zależności w aplikacji zmodularyzowanej 134
  • 5.7. Dostawcy w modułach ładowanych leniwie 134
  • 5.8. Dostawcy w modułach ładowanych gorliwie 136
  • 5.9. Część praktyczna: użycie komponentów biblioteki Angular Material w aplikacji ngAuction 138
    • 5.9.1. Krótki przegląd biblioteki Angular Material 139
    • 5.9.2. Dodanie biblioteki AM do projektu 141
    • 5.9.3. Dodanie modułu funkcyjnego z komponentami AM 142
    • 5.9.4. Modyfikacja wyglądu komponentu NavbarComponent 143
    • 5.9.5. Modyfikacja interfejsu użytkownika komponentu SearchComponent 146
    • 5.9.6. Zastąpienie karuzeli obrazem 148
    • 5.9.7. Kolejne poprawki odstępów 148
    • 5.9.8. Użycie mat-card w komponencie ProductItemComponent 148
    • 5.9.9. Dodanie stylów do komponentu HomeComponent 149
  • Podsumowanie 149

Rozdział 6. Programowanie reaktywne we frameworku Angular 151

  • 6.1. Obsługa zdarzeń bez strumieni obserwowalnych 152
  • 6.2. Przekształcanie zdarzeń DOM w strumienie obserwowalne 154
  • 6.3. Obsługa zdarzeń obserwowalnych za pomocą Forms API 156
  • 6.4. Odrzucanie wyników niechcianych żądań HTTP za pomocą operatora switchMap 158
  • 6.5. Korzystanie z potoku AsyncPipe 161
  • 6.6. Strumienie obserwowalne i router 165
  • Podsumowanie 168

Rozdział 7. Tworzenie układu stron za pomocą biblioteki Flex Layout 169

  • 7.1. Biblioteka Flex Layout i usługa ObservableMedia 170
    • 7.1.1. Korzystanie z dyrektyw biblioteki Flex Layout 171
    • 7.1.2. Usługa ObservableMedia 175
  • 7.2. Część praktyczna: przepisanie kodu aplikacji ngAuction 177
    • 7.2.1. Po co przepisywać aplikację ngAuction od zera? 177
    • 7.2.2. Generowanie nowej aplikacji ngAuction 180
    • 7.2.3. Tworzenie niestandardowego motywu Angular Material za pomocą Sass 180
    • 7.2.4. Dodawanie paska narzędzi do komponentu najwyższego poziomu 183
    • 7.2.5. Tworzenie usługi produktowej 186
    • 7.2.6. Tworzenie modułu strony głównej 188
    • 7.2.7. Konfigurowanie tras 193
    • 7.2.8. Uruchomienie aplikacji ngAuction 193
  • Podsumowanie 194

Rozdział 8. Implementowanie komunikacji komponentów 195

  • 8.1. Komunikacja między komponentami 196
  • 8.2. Właściwości wejściowe i wyjściowe 196
    • 8.2.1. Właściwości wejściowe 197
    • 8.2.2. Właściwości wyjściowe i zdarzenia niestandardowe 199
  • 8.3. Implementowanie wzorca projektowego Mediator 203
    • 8.3.1. Użycie jako mediatora wspólnego komponentu nadrzędnego 203
    • 8.3.2. Użycie jako mediatora wstrzykiwalnej usługi 208
  • 8.4. Udostępnianie interfejsu API komponentu potomnego 213
  • 8.5. Rzutowanie szablonów w czasie działania aplikacji za pomocą dyrektywy ngContent 216
    • 8.5.1. Tryby hermetyzacji widoków 218
    • 8.5.2. Rzutowanie na wiele obszarów 220
  • Podsumowanie 222

Rozdział 9. Mechanizm wykrywania zmian i cykl życia komponentu 223

  • 9.1. Ogólny przegląd działania mechanizmu wykrywania zmian 224
    • 9.1.1. Strategie wykrywania zmian 225
    • 9.1.2. Profilowanie wykrywania zmian 227
  • 9.2. Cykl życia komponentów 227
    • 9.2.1. Przechwytywanie zmian w zaczepie ngOnChanges 230
    • 9.2.2. Przechwytywanie zmian w zaczepie ngDoCheck 233
  • 9.3. Część praktyczna: dodanie widoku produktu do aplikacji ngAuction 236
    • 9.3.1. Tworzenie komponentów i modułu produktu 236
    • 9.3.2. Implementowanie komponentu produktu 238
    • 9.3.3. Implementowanie komponentu szczegółów produktu 241
    • 9.3.4. Implementowanie komponentu sugerowanych produktów 242
  • Podsumowanie 244

Rozdział 10. Wprowadzenie do interfejsu API formularzy 245

  • 10.1. Dwa interfejsy API formularzy 246
  • 10.2. Formularze oparte na szablonach 246
    • 10.2.1. Dyrektywy formularzy 246
    • 10.2.2. Zastosowanie opartego na szablonach API do formularzy HTML 248
  • 10.3. Formularze reaktywne 251
    • 10.3.1. Model formularza 252
    • 10.3.2. Dyrektywy formularzy reaktywnych 254
    • 10.3.3. Zastosowanie reaktywnego API do formularzy HTML 256
    • 10.3.4. Dynamiczne dodawanie kontrolek do formularza 258
  • 10.4. Podsumowanie dyrektyw Forms API 259
  • 10.5. Aktualizacja na podstawie danych 261
  • 10.6. Korzystanie z klasy FormBuilder 263
  • Podsumowanie 263

Rozdział 11. Walidacja formularzy 265

  • 11.1. Korzystanie z wbudowanych walidatorów 266
  • 11.2. Kontrolowanie momentu rozpoczęcia walidacji 269
  • 11.3. Walidatory niestandardowe w formularzach reaktywnych 270
  • 11.4. Walidacja grupy kontrolek 273
  • 11.5. Sprawdzanie statusu i prawidłowości kontrolki formularza 276
    • 11.5.1. Dotknięte i niedotknięte kontrolki formularza 276
    • 11.5.2. Pola czyste i brudne 277
    • 11.5.3. Pola oczekujące 277
  • 11.6. Dynamiczne zmienianie walidatorów w formularzach reaktywnych 277
  • 11.7. Walidatory asynchroniczne 279
  • 11.8. Niestandardowe walidatory w formularzach opartych na szablonach 281
  • 11.9. Część praktyczna: dodanie formularza wyszukiwania do aplikacji ngAuction 282
    • 11.9.1. Komponent formularza wyszukiwania 283
    • 11.9.2. Komponent wyników wyszukiwania 287
    • 11.9.3. Refaktoryzacja pozostałego kodu 288
  • Podsumowanie 291

Rozdział 12. Interakcja z serwerami przy użyciu protokołu HTTP 293

  • 12.1. Przegląd usługi HttpClient 294
  • 12.2. Odczytywanie pliku JSON za pomocą usługi HttpClient 295
  • 12.3. Tworzenie serwera WWW za pomocą frameworków Node i Express oraz języka TypeScript 298
    • 12.3.1. Tworzenie prostego serwera WWW 299
    • 12.3.2. Serwowanie danych w formacie JSON 301
  • 12.4. Łączenie frameworku Angular i serwera Node 303
    • 12.4.1. Zasoby statyczne na serwerze 303
    • 12.4.2. Konsumowanie danych JSON w aplikacjach Angulara 305
    • 12.4.3. Konfigurowanie serwera proxy klienta 308
    • 12.4.4. Subskrybowanie strumieni obserwowalnych za pomocą potoku async 309
    • 12.4.5. Wstrzykiwanie HttpClient do usługi 310
    • 12.4.6. Wdrażanie aplikacji Angulara na serwerze za pomocą skryptów npm 312
  • 12.5. Przesyłanie danych na serwer 315
    • 12.5.1. Tworzenie serwera do obsługi żądań post 315
    • 12.5.2. Tworzenie klienta do wysyłania żądań post 316
  • 12.6. Przechwytywacze HTTP 319
  • 12.7. Zdarzenia postępu 323
  • Podsumowanie 325

Rozdział 13. Interakcja z serwerami przy użyciu protokołu WebSocket 327

  • 13.1. Porównanie protokołów HTTP i WebSocket 328
  • 13.2. Wysyłanie danych z serwera Node do zwykłego klienta 330
  • 13.3. Użycie gniazd WebSocket w klientach Angulara 333
    • 13.3.1. Opakowywanie strumienia obserwowalnego w usługę 334
    • 13.3.2. Komunikacja usługi Angulara z serwerem WebSocket 336
  • 13.4. Część praktyczna: serwer Node z obsługą protokołu WebSocket 341
    • 13.4.1. Uruchamianie aplikacji ngAuction w trybie programistycznym 344
    • 13.4.2. Przegląd kodu serwera aplikacji ngAuction 344
    • 13.4.3. Zmiany w kodzie klienta aplikacji ngAuction 351
  • Podsumowanie 357

Rozdział 14. Testowanie aplikacji Angulara 359

  • 14.1. Testy jednostkowe 360
    • 14.1.1. Wprowadzenie do frameworku Jasmine 361
    • 14.1.2. Pisanie skryptu testowego dla klasy 363
  • 14.2. Uruchamianie skryptów Jasmine za pomocą testera Karma 365
    • 14.2.1. Plik konfiguracyjny Karmy 369
    • 14.2.2. Testowanie w wielu przeglądarkach 370
  • 14.3. Korzystanie z biblioteki testowej frameworku Angular 371
    • 14.3.1. Testowanie komponentów 372
    • 14.3.2. Testowanie usług 376
    • 14.3.3. Testowanie komponentów wykorzystujących routing 379
  • 14.4. Przeprowadzanie testów end-to-end przy użyciu biblioteki Protractor 382
    • 14.4.1. Podstawy Protractora 383
    • 14.4.2. Testy generowane przez CLI Angulara 386
    • 14.4.3. Testowanie strony logowania 387
  • 14.5. Część praktyczna: dodawanie testów e2e do aplikacji ngAuction 392
    • 14.5.1. Przeprowadzanie testów e2e przepływu pracy dla wyszukiwania produktów 392
  • Podsumowanie 398

Rozdział 15. Utrzymywanie stanu aplikacji za pomocą biblioteki ngrx 399

  • 15.1. Od sklepu ogólnospożywczego do architektury Redux 400
    • 15.1.1. Co to jest Redux? 400
    • 15.1.2. Dlaczego ważne jest przechowywanie stanu aplikacji w jednym miejscu? 402
  • 15.2. Wprowadzenie do biblioteki ngrx 403
    • 15.2.1. Poznajemy magazyn, akcje i reduktory 404
    • 15.2.2. Poznajemy efekty i selektory 410
    • 15.2.3. Refaktoryzacja aplikacji mediatora za pomocą ngrx 412
    • 15.2.4. Monitorowanie stanu za pomocą rozszerzenia DevTools magazynu ngrx 420
    • 15.2.5. Monitorowanie stanu routera 424
  • 15.3. Używać ngrx albo nie używać 427
    • 15.3.1. Porównanie ngrx z usługami Angulara 428
    • 15.3.2. Problemy z mutacją stanu 429
    • 15.3.3. Kod ngrx jest trudniejszy do odczytania 429
    • 15.3.4. Krzywa uczenia się 430
    • 15.3.5. Wnioski 430
  • 15.4. Część praktyczna: stosowanie ngrx w aplikacji ngAuction 431
    • 15.4.1. Dodawanie obsługi stanu routera do modułu aplikacji 433
    • 15.4.2. Zarządzanie stanem w module głównym 434
    • 15.4.3. Testy jednostkowe reduktorów ngrx 442
  • Podsumowanie 443
  • Angular 6, 7 i nie tylko 444

Dodatek A. Przegląd specyfikacji ECMAScript 447

Dodatek B. Podstawy TypeScriptu 481

Dodatek C. Korzystanie z menedżera pakietów npm 509

Dodatek D. Podstawy biblioteki RxJS 517

Skorowidz 539

  • Title: Angular. Programowanie z użyciem języka TypeScript. Wydanie II
  • Author: Yakov Fain, Anton Moiseev
  • Original title: Angular Development with Typescript, Second Edition
  • Translation: Lech Lachowski
  • ISBN: 978-83-283-5667-2, 9788328356672
  • Date of issue: 2019-12-16
  • Format: Ebook
  • Item ID: anpro2
  • Publisher: Helion