Angular 2. Programowanie z użyciem języka TypeScript

Tworzenie aplikacji w języku TypeScript z wykorzystaniem frameworka Angular 2 jest dziś jednym z najwydajniejszych sposobów rozwijania średnich i dużych aplikacji internetowych. Takie aplikacje można bez problemu uruchamiać w każdej nowoczesnej przeglądarce, również na platformach mobilnych. Separacja kodu interfejsu od logiki aplikacji, prosta modularyzacja aplikacji, bezproblemowe przetwarzanie danych asynchronicznych, świetne narzędzia i nowoczesne komponenty interfejsu użytkownika — to tylko kilka z wielu zalet tandemu Angular 2 – TypeScript.

Ta książka jest przeznaczona dla programistów, którzy korzystają z Angular JS lub pracują z innym frameworkiem i potrafią kodować w JavaScripcie. Przedstawiono tu zagadnienia związane z danymi i widokami, interakcjami użytkowników z formularzami i komunikacją z serwerami, a także sposoby testowania i wdrażania aplikacji napisanej w Angular 2. Wyjaśniono działanie routera Angular, techniki wstrzykiwania zależności, wiązania i potoki. Nie zabrakło szczegółowego opisu korzystania z formularzy oraz komunikacji z serwerami. Co istotne, autorzy położyli duży nacisk na stosowanie dobrych praktyk w programowaniu.

Najważniejsze zagadnienia:

• Przegląd architektury Angular 2 i metodyka budowy aplikacji
• Składnia języka TypeScript i kompilacja kodu TypeScript na JavaScript (ECMAScript 5)
• Programowanie reaktywne z obserwowalnymi strumieniami
• Wzorzec projektowy Mediator i cykl życia komponentu
• Automatyzacja procesów kompilacji i wdrażania
• Narzędzia i biblioteki przydatne w pracy z Angular 2

Angular 2: nowoczesne narzędzie dla najlepszych projektantów!

Spis treści

Przedmowa (9)

Podziękowania (13)

O książce (15)

O autorach (19)

Rozdział 1. Wprowadzenie do frameworku Angular 2 (21)

• 1.1. Przegląd frameworków i bibliotek JavaScript (22)
  • 1.1.1. Frameworki w pełni funkcjonalne (22)
  • 1.1.2. Lekkie frameworki (22)
  • 1.1.3. Biblioteki (23)
  • 1.1.4. Czym jest node.js? (24)
• 1.2. Ogólny przegląd frameworku AngularJS (25)
• 1.3. Ogólny przegląd frameworku Angular (28)
  • 1.3.1. Uproszczenie kodu (28)
  • 1.3.2. Poprawa wydajności (34)
• 1.4. Zestaw narzędzi programisty Angular (35)
• 1.5. Jak działa Angular? (39)
• 1.6. Wprowadzenie do przykładu aplikacji aukcji internetowych (40)
• 1.7. Podsumowanie (41)

Rozdział 2. Zaczynamy pracę z frameworkiem Angular (43)

• 2.1. Pierwsza aplikacja Angular (44)
  • 2.1.1. Witaj, świecie w języku TypeScript (44)
  • 2.1.2. Witaj, świecie w ES5 (47)
  • 2.1.3. Witaj, świecie w ES6 (49)
  • 2.1.4. Uruchamianie aplikacji (50)
• 2.2. Elementy konstrukcyjne aplikacji Angular (51)
  • 2.2.1. Moduły (51)
  • 2.2.2. Komponenty (52)
  • 2.2.3. Dyrektywy (54)
  • 2.2.4. Krótkie wprowadzenie do wiązania danych (55)
• 2.3. Uniwersalna ładowarka modułów SystemJS (55)
  • 2.3.1. Przegląd ładowarek modułów (56)
  • 2.3.2. Porównanie ładowarek modułów i znaczników <script> (56)
  • 2.3.3. Pierwsze kroki z SystemJS (57)
• 2.4. Wybór menedżera pakietów (62)
  • 2.4.1. Porównanie npm i jspm (64)
  • 2.4.2. Rozpoczynanie projektu Angular za pomocą npm (65)
• 2.5. Część praktyczna: rozpoczynamy tworzenie aplikacji aukcji internetowych (70)
  • 2.5.1. Wstępna konfiguracja projektu (71)
  • 2.5.2. Tworzenie strony głównej (74)
  • 2.5.3. Uruchomienie aplikacji aukcji internetowych (82)
• 2.6. Podsumowanie (82)

Rozdział 3. Nawigacja za pomocą routera Angular (85)

• 3.1. Podstawy routingu (86)
  • 3.1.1. Strategie lokalizacji (87)
  • 3.1.2. Bloki konstrukcyjne nawigacji po stronie klienta (89)
  • 3.1.3. Nawigacja do tras za pomocą metody navigate() (94)
• 3.2. Przekazywanie danych do tras (97)
  • 3.2.1. Wyodrębnianie parametrów z ActivatedRoute (97)
  • 3.2.2. Przekazywanie do trasy statycznych danych (100)
• 3.3. Trasy podrzędne (101)
• 3.4. Strzeżenie tras (107)
• 3.5. Tworzenie aplikacji SPA z wieloma outletami routera (112)
• 3.6. Dzielenie aplikacji na moduły (115)
• 3.7. Moduły leniwie ładowane (117)
• 3.8. Część praktyczna: dodanie nawigacji do aplikacji aukcji internetowych (119)
  • 3.8.1. Tworzenie komponentu ProductDetailComponent (120)
  • 3.8.2. Tworzenie komponentu HomeComponent i refaktoryzacja kodu (121)
  • 3.8.3. Uproszczenie komponentu ApplicationComponent (122)
  • 3.8.4. Dodawanie dyrektywy RouterLink do ProductItemComponent (123)
  • 3.8.5. Modyfikacja modułu głównego w celu dodania routingu (125)
  • 3.8.6. Uruchomienie aplikacji aukcji internetowych (126)
• 3.9. Podsumowanie (126)

Rozdział 4. Wstrzykiwanie zależności (129)

• 4.1. Wzorce Wstrzykiwanie Zależności i Odwrócenie Sterowania (130)
  • 4.1.1. Wzorzec Wstrzykiwanie Zależności (130)
  • 4.1.2. Wzorzec Odwrócenie Sterowania (131)
  • 4.1.3. Korzyści płynące ze wstrzykiwania zależności (131)
• 4.2. Wstrzykiwacze i dostawcy (133)
  • 4.2.1. Jak zadeklarować dostawcę? (135)
• 4.3. Przykładowa aplikacja ze wstrzykiwaniem zależności frameworku Angular (137)
  • 4.3.1. Wstrzyknięcie usługi produktowej (137)
  • 4.3.2. Wstrzyknięcie usługi Http (140)
• 4.4. Ułatwione przełączanie wstrzykiwaczy (141)
  • 4.4.1. Deklarowanie dostawców za pomocą właściwości useFactory i useValue (144)
  • 4.4.2. Korzystanie z klasy OpaqueToken (147)
• 4.5. Hierarchia wstrzykiwaczy (148)
  • 4.5.1. Właściwość viewProviders (150)
• 4.6. Część praktyczna: użycie mechanizmu DI w aplikacji aukcji internetowych (151)
  • 4.6.1. Zmiana kodu w celu przekazania identyfikatora produktu jako parametru (154)
  • 4.6.2. Modyfikacja komponentu ProductDetailComponent (154)
• 4.7. Podsumowanie (159)

Rozdział 5. Wiązania, strumienie obserwowalne i potoki (161)

• 5.1. Wiązanie danych (162)
  • 5.1.1. Wiązanie ze zdarzeniami (163)
  • 5.1.2. Wiązanie z właściwościami i atrybutami (164)
  • 5.1.3. Wiązanie w szablonach (168)
  • 5.1.4. Dwukierunkowe wiązanie danych (171)
• 5.2. Programowanie reaktywne i strumienie obserwowalne (174)
  • 5.2.1. Czym są strumienie obserwowalne i obserwatory? (174)
  • 5.2.2. Obserwowalne strumienie zdarzeń (176)
  • 5.2.3. Anulowanie strumieni obserwowalnych (181)
• 5.3. Potoki (184)
  • 5.3.1. Potoki niestandardowe (185)
• 5.4. Część praktyczna: filtrowanie produktów w aplikacji aukcji internetowych (187)
• 5.5. Podsumowanie (191)

Rozdział 6. Implementowanie komunikacji komponentów (193)

• 6.1. Komunikacja między komponentami (194)
  • 6.1.1. Właściwości wejściowe i wyjściowe (194)
  • 6.1.2. Wzorzec Mediator (201)
  • 6.1.3. Zmiana szablonów podczas pracy za pomocą dyrektywy ngContent (205)
• 6.2. Cykl życia komponentów (210)
  • 6.2.1. Korzystanie z metody ngOnChanges (212)
• 6.3. Ogólny przegląd działania mechanizmu wykrywania zmian (217)
• 6.4. Udostępnianie interfejsu API komponentu potomnego (219)
• 6.5. Część praktyczna: dodanie funkcjonalności oceniania do aplikacji aukcji internetowych (221)
• 6.6. Podsumowanie (228)

Rozdział 7. Praca z formularzami (231)

• 7.1. Przegląd formularzy HTML (232)
  • 7.1.1. Standardowe funkcje przeglądarki (232)
  • 7.1.2. Interfejs Forms API frameworku Angular (234)
• 7.2. Formularze oparte na szablonach (235)
  • 7.2.1. Przegląd dyrektyw (236)
  • 7.2.2. Wzbogacanie formularza HTML (238)
• 7.3. Formularze reaktywne (240)
  • 7.3.1. Model formularza (240)
  • 7.3.2. Dyrektywy formularzy (241)
  • 7.3.3. Refaktoryzacja przykładowego formularza (245)
  • 7.3.4. Korzystanie z klasy FormBuilder (246)
• 7.4. Walidacja formularza (247)
  • 7.4.1. Walidacja formularzy reaktywnych (247)
• 7.5. Część praktyczna: dodanie walidacji do formularza wyszukiwania (256)
  • 7.5.1. Modyfikacja modułu głównego w celu dodania obsługi interfejsu Forms API (257)
  • 7.5.2. Dodawanie listy kategorii do SearchComponent (257)
  • 7.5.3. Tworzenie modelu formularza (258)
  • 7.5.4. Refaktoryzacja szablonu (259)
  • 7.5.5. Implementacja metody onSearch() (260)
  • 7.5.6. Uruchomienie aplikacji aukcji internetowych (260)
• 7.6. Podsumowanie (261)

Rozdział 8. Interakcja z serwerami przy użyciu protokołów HTTP i WebSocket (263)

• 8.1. Krótkie omówienie interfejsu API obiektu Http (264)
• 8.2. Tworzenie serwera WWW za pomocą frameworku Node i języka TypeScript (266)
  • 8.2.1. Tworzenie prostego serwera WWW (267)
  • 8.2.2. Serwowanie danych w formacie JSON (269)
  • 8.2.3. Rekompilacja TypeScriptu na żywo i ponowne załadowanie kodu (271)
  • 8.2.4. Dodawanie interfejsu RESTful API dla serwowania produktów (272)
• 8.3. Łączenie frameworku Angular i serwera Node (273)
  • 8.3.1. Zasoby statyczne na serwerze (274)
  • 8.3.2. Wykonywanie żądań GET za pomocą obiektu Http (276)
  • 8.3.3. Odpakowywanie obiektów obserwowalnych w szablonach za pomocą AsyncPipe (278)
  • 8.3.4. Wstrzyknięcie HTTP do usługi (280)
• 8.4. Komunikacja klient-serwer poprzez protokół WebSocket (283)
  • 8.4.1. Wysyłanie danych z serwera Node (284)
  • 8.4.2. Zamiana obiektu WebSocket w strumień obserwowalny (287)
• 8.5. Część praktyczna: implementacja wyszukiwania produktów i powiadomień o ofertach (294)
  • 8.5.1. Implementowanie wyszukiwania produktów przy użyciu protokołu HTTP (295)
  • 8.5.2. Rozgłaszanie ofert aukcji za pomocą WebSocket (299)
• 8.6. Podsumowanie (302)

Rozdział 9. Testy jednostkowe aplikacji Angular (305)

• 9.1. Wprowadzenie do Jasmine (306)
  • 9.1.1. Co należy testować? (309)
  • 9.1.2. Jak zainstalować Jasmine? (309)
• 9.2. Co zawiera biblioteka testowa Angular? (310)
  • 9.2.1. Testowanie usług (312)
  • 9.2.2. Testowanie nawigacji routera (312)
  • 9.2.3. Testowanie komponentów (313)
• 9.3. Testowanie przykładowej aplikacji pogodowej (314)
  • 9.3.1. Konfigurowanie ładowarki SystemJS (316)
  • 9.3.2. Testowanie routera pogody (316)
  • 9.3.3. Testowanie usługi pogodowej (319)
  • 9.3.4. Testowanie komponentu pogodowego (321)
• 9.4. Uruchamianie testów za pomocą narzędzia Karma (325)
• 9.5. Część praktyczna: testy jednostkowe aplikacji aukcji internetowych (328)
  • 9.5.1. Testowanie komponentu ApplicationComponent (329)
  • 9.5.2. Testowanie usługi ProductService (330)
  • 9.5.3. Testowanie komponentu StarsComponent (331)
  • 9.5.4. Uruchomienie testów (333)
• 9.6. Podsumowanie (334)

Rozdział 10. Tworzenie paczek i wdrażanie aplikacji za pomocą narzędzia Webpack (335)

• 10.1. Poznajemy Webpack (338)
  • 10.1.1. Witaj, świecie z zastosowaniem bundlera Webpack (339)
  • 10.1.2. Jak używać ładowarek? (343)
  • 10.1.3. Jak używać wtyczek? (347)
• 10.2. Tworzenie podstawowej konfiguracji Webpack dla frameworku Angular (348)
  • 10.2.1. Uruchomienie npm run build (351)
  • 10.2.2. Uruchomienie npm start (352)
• 10.3. Tworzenie konfiguracji programistycznych i produkcyjnych (353)
  • 10.3.1. Konfiguracja programistyczna (353)
  • 10.3.2. Konfiguracja produkcyjna (354)
  • 10.3.3. Niestandardowy plik definicji typów (357)
• 10.4. Co to jest Angular CLI? (358)
  • 10.4.1. Rozpoczęcie nowego projektu za pomocą Angular CLI (359)
  • 10.4.2. Polecenia CLI (361)
• 10.5. Część praktyczna: wdrożenie aplikacji aukcji internetowych za pomocą bundlera Webpack (362)
  • 10.5.1. Uruchamianie serwera Node (362)
  • 10.5.2. Uruchomienie klienta aplikacji aukcji internetowych (364)
  • 10.5.3. Uruchomienie testów za pomocą narzędzia Karma (367)
• 10.6. Podsumowanie (370)

Dodatek A. Przegląd specyfikacji ECMAScript 6 (371)

• A.1. Jak uruchamiać przykłady kodu? (372)
• A.2. Literały szablonów (372)
  • A.2.1. Wieloliniowe łańcuchy znaków (373)
  • A.2.2. Oznaczone łańcuchy znaków szablonów (374)
• A.3. Parametry opcjonalne i wartości domyślne (375)
• A.4. Zakres zmiennych (376)
  • A.4.1. Wynoszenie zmiennych (376)
  • A.4.2. Tworzenie zakresu bloku za pomocą słów kluczowych let i const (378)
  • A.4.3. Zakres bloku dla funkcji (380)
• A.5. Wyrażenia funkcji strzałkowych, this i that (380)
  • A.5.1. Operatory reszty i rozwijania (383)
  • A.5.2. Generatory (385)
  • A.5.3. Destrukturyzacja (387)
• A.6. Iterowanie za pomocą forEach(), for-in i for-of (391)
  • A.6.1. Korzystanie z metody forEach() (391)
  • A.6.2. Korzystanie z pętli for-in (391)
  • A.6.3. Korzystanie z pętli for-of (392)
• A.7. Klasy i dziedziczenie (393)
  • A.7.1. Konstruktory (394)
  • A.7.2. Zmienne statyczne (395)
  • A.7.3. Metody pobierające, ustawiające i definicje metod (396)
  • A.7.4. Słowo kluczowe super i funkcja super (397)
• A.8. Przetwarzanie asynchroniczne z wykorzystaniem obietnic (398)
  • A.8.1. Koszmar wywołań zwrotnych (399)
  • A.8.2. Obietnice ES6 (399)
  • A.8.3. Rozwiązanie kilku obietnic naraz (402)
• A.9. Moduły (403)
  • A.9.1. Słowa kluczowe import i export (404)
  • A.9.2. Ładowanie modułów dynamicznie za pomocą ładowarki modułów ES6 (406)

Dodatek B. TypeScript jako język dla aplikacji Angular (411)

• B.1. Dlaczego pisać aplikacje Angular w języku TypeScript? (412)
• B.2. Rola transkompilatorów (413)
• B.3. Pierwsze kroki z językiem TypeScript (413)
  • B.3.1. Instalacja i używanie kompilatora TypeScriptu (414)
• B.4. TypeScript jako nadzbiór JavaScriptu (417)
• B.5. Typy opcjonalne (417)
  • B.5.1. Funkcje (419)
  • B.5.2. Parametry domyślne (420)
  • B.5.3. Parametry opcjonalne (420)
  • B.5.4. Wyrażenia funkcji strzałkowych (421)
• B.6. Klasy (423)
  • B.6.1. Modyfikatory dostępu (425)
  • B.6.2. Metody (427)
  • B.6.3. Dziedziczenie (428)
• B.7. Typy sparametryzowane (430)
• B.8. Interfejsy (433)
  • B.8.1. Deklarowanie typów niestandardowych z interfejsami (433)
  • B.8.2. Używanie słowa kluczowego implements (434)
  • B.8.3. Korzystanie z interfejsów wywoływalnych (436)
• B.9. Dodawanie metadanych klas za pomocą adnotacji (438)
• B.10. Pliki definicji typów (439)
  • B.10.1. Instalowanie plików definicji typów (440)
• B.11. Przegląd procesu tworzenia aplikacji TypeScript-Angular (441)

Skorowidz (443)