E-book details

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

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

Yakov Fain, Anton Moiseev

Ebook

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!

Yakov Fain — jest mistrzem Javy i autorem wielu książek o rozwijaniu oprogramowania. Jest również współzałożycielem dwóch firm: Farata Systems i SuranceBay. Fain chętnie prowadzi warsztaty, podczas których zdradza sekrety frameworku Angular i platformy Java.

Anton Moiseev — jest głównym programistą w firmie SuranceBay. Od 10 lat tworzy aplikacje w technologiach Java i .NET. Koncentruje się na najlepszych praktykach technologii internetowych. Prowadził wiele sesji szkoleniowych dotyczących frameworków Angular JS i Angular 2.

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)

  • Title: Angular 2. Programowanie z użyciem języka TypeScript
  • Author: Yakov Fain, Anton Moiseev
  • Original title: Angular 2 Development with TypeScript
  • Translation: Lech Lachowski
  • ISBN: 978-83-283-3639-1, 9788328336391
  • Date of issue: 2017-11-24
  • Format: Ebook
  • Item ID: ang2ty
  • Publisher: Helion