Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00057 007626 18991588 na godz. na dobę w sumie
Angular w akcji - książka
Angular w akcji - książka
Autor: Liczba stron: 336
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4798-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-35%), audiobook).

Framework Angular od wielu lat jest jednym z najważniejszych narzędzi do rozwijania średnich i dużych aplikacji internetowych. Co istotne, aplikacje te bez problemu działają w każdej nowoczesnej przeglądarce, a także na platformach mobilnych. Obecnie Angular jest dojrzałą, stabilną i wciąż ewoluującą technologią, a w kolejnych wydaniach frameworka pojawiają się nowe, ułatwiające pracę funkcje. Aplikacje napisane w Angularze opierają się na hierarchicznym systemie komunikujących się komponentów i na dobrze zbudowanych interfejsach API. Przejrzystość i zrozumiałe zasady rządzące tym systemem sprawiają, że nauka posługiwania się Angularem przychodzi szybko i jest bardzo satysfakcjonująca.

Ta książka jest przeznaczona dla programistów, którzy chcą możliwie szybko zacząć budować poprawne aplikacje w Angularze i bezproblemowo uruchamiać je w środowisku produkcyjnym. Podręcznik został napisany w sposób, który pozwala na natychmiastowe rozpoczęcie kodowania i zrozumienie - niemal mimochodem - tak zaawansowanych technik jak testowanie, wstrzykiwanie zależności czy regulowanie wydajności. W książce położono nacisk na korzystanie z TypeScriptu i ES2015 oraz na tworzenie poprawnego kodu zgodnie z najlepszymi praktykami. Nie zabrakło licznych wskazówek i opisu nieoczywistych, ale bardzo pomocnych technik pracy. Dzięki temu szybko wykorzystasz potencjał Angulara do pisania wydajnych, odpornych i bezpiecznych aplikacji!

Najważniejsze zagadnienia:

Oto Angular: ambitne narzędzie dla profesjonalistów!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Angular in Action Tłumaczenie: Lech Lachowski Projekt okładki: Studio Gravite / Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki ISBN: 978-83-283-4798-4 Original edition copyright © 2018 by Manning Publications Co. All rights reserved. Polish edition copyright © 2019 by HELION SA. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Helion SA ul. Kościuszki 1c, 44-100 Gliwice tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/angakc.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/angakc Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci Przedmowa Podzi(cid:218)kowania O ksi(cid:200)(cid:285)ce O autorze Rozdzia(cid:239) 1. Angular — nowoczesna platforma internetowa 1.1. Dlaczego warto wybra(cid:202) Angular? 1.2. Czego si(cid:218) nauczysz z tej ksi(cid:200)(cid:285)ki 1.3. Podró(cid:285) od AngularJS do Angulara 1.4. Angular — platforma, a nie framework CLI Angulara Renderowanie serwerowe i kompilator 1.4.1. 1.4.2. 1.4.3. Mo(cid:285)liwo(cid:258)ci mobilne i desktopowe 1.4.4. Biblioteki interfejsu u(cid:285)ytkownika 1.5. Architektura komponentowa 1.5.1. 1.5.2. 1.5.3. 1.5.4. Modu(cid:239)y JavaScriptu Najwa(cid:285)niejsze cechy komponentów Shadow DOM Szablony 1.6. Nowoczesny JavaScript i Angular Strumienie obserwowalne 1.6.1. 1.7. TypeScript i Angular Podsumowanie Rozdzia(cid:239) 2. Twoja pierwsza aplikacja Angular 2.1. Przegl(cid:200)d projektu z tego rozdzia(cid:239)u 2.2. Konfigurowanie projektu 2.3. Rusztowanie bazowej aplikacji 2.4. Komponent App Jak Angular renderuje aplikacj(cid:218) bazow(cid:200) 2.4.1. 2.4.2. Modu(cid:239) App 2.4.3. Pocz(cid:200)tkowe (cid:239)adowanie aplikacji 2.5. Budowanie us(cid:239)ug 2.6. Tworzenie pierwszego komponentu 2.7. Komponenty wykorzystuj(cid:200)ce komponenty i us(cid:239)ugi 11 13 15 19 21 22 23 24 26 26 27 29 30 32 34 36 37 39 40 43 44 46 47 48 50 51 53 53 54 55 57 60 66 Poleć książkęKup książkę 6 Spis tre(cid:258)ci 2.8. Komponenty z formularzami i ze zdarzeniami 2.9. Routing aplikacji Podsumowanie Rozdzia(cid:239) 3. Najwa(cid:285)niejsze elementy aplikacji 3.1. Encje w Angularze 3.1.1. Modu(cid:239)y 3.1.2. 3.1.3. 3.1.4. 3.1.5. Jak Angular zaczyna renderowa(cid:202) aplikacj(cid:218) Komponenty Dyrektywy Potoki Us(cid:239)ugi 3.2. 3.3. Rodzaje kompilatorów 3.4. Wstrzykiwanie zale(cid:285)no(cid:258)ci 3.5. Wykrywanie zmian 3.6. Wyra(cid:285)enia szablonów i wi(cid:200)zania Interpolacja 3.6.1. 3.6.2. Wi(cid:200)zania w(cid:239)a(cid:258)ciwo(cid:258)ci 3.6.3. 3.6.4. Wi(cid:200)zanie atrybutów 3.6.5. Wi(cid:200)zanie zdarze(cid:241) Specjalne wi(cid:200)zania w(cid:239)a(cid:258)ciwo(cid:258)ci Podsumowanie Rozdzia(cid:239) 4. Podstawy komponentów 4.1. Konfigurowanie przyk(cid:239)adu 4.1.1. Przygotowanie kodu 4.2. Kompozycja i cykl (cid:285)ycia komponentu 4.2.1. 4.2.2. 4.2.3. Cykl (cid:285)ycia komponentu Zaczepy cyklu (cid:285)ycia Zagnie(cid:285)d(cid:285)anie komponentów 4.3. Rodzaje komponentów 4.4. Tworzenie komponentu Data 4.5. U(cid:285)ywanie wej(cid:258)(cid:202) z komponentami 4.5.1. 4.5.2. Podstawy wej(cid:258)(cid:202) Przechwytywanie wej(cid:258)(cid:202) 4.6. Rzutowanie zawarto(cid:258)ci Podsumowanie Rozdzia(cid:239) 5. Zaawansowane aspekty komponentów 5.1. Wykrywanie zmian i optymalizacje 5.2. Komunikacja mi(cid:218)dzy komponentami 5.2.1. 5.2.2. Zdarzenia wyj(cid:258)ciowe i zmienne szablonów Odwo(cid:239)ywanie si(cid:218) do komponentów za pomoc(cid:200) ViewChild 5.3. Stylizacja komponentów i tryby hermetyzacji 5.3.1. 5.3.2. Dodawanie stylów do komponentu Tryby hermetyzacji 69 73 75 77 79 79 81 82 85 86 87 89 89 90 91 93 94 95 96 97 98 101 102 103 104 106 107 109 110 113 116 117 120 122 128 129 130 134 135 137 138 139 141 Poleć książkęKup książkę Spis tre(cid:258)ci 7 5.4. Dynamiczne renderowanie komponentów 5.4.1. 5.4.2. U(cid:285)ywanie okna modalnego ng-bootstrap dla komponentów dynamicznych Dynamiczne tworzenie komponentu i jego renderowanie Podsumowanie Rozdzia(cid:239) 6. Us(cid:239)ugi 6.1. Konfigurowanie przyk(cid:239)adu 6.1.1. 6.1.2. Pobieranie kodu Przyk(cid:239)adowe dane 6.2. Tworzenie us(cid:239)ug Angulara 6.3. Wstrzykiwanie zale(cid:285)no(cid:258)ci i drzewa wstrzykiwaczy 6.4. Us(cid:239)ugi bez wstrzykiwania zale(cid:285)no(cid:258)ci 6.5. Korzystanie z us(cid:239)ugi HttpClient 6.5.1. Interfejs HttpInterceptor 6.6. Us(cid:239)ugi pomocnicze 6.7. Us(cid:239)ugi udost(cid:218)pniania 6.8. Us(cid:239)ugi dodatkowe Podsumowanie Rozdzia(cid:239) 7. Routing 7.1. Konfigurowanie przyk(cid:239)adu 7.2. Definiowanie tras i konfiguracja routera 7.3. Modu(cid:239)y funkcyjne i routing 7.4. Parametry trasy 7.4.1. 7.4.2. Tworzenie linków w szablonach za pomoc(cid:200) dyrektywy routerLink Uzyskiwanie dost(cid:218)pu do parametrów trasy w komponencie 7.5. Trasy podrz(cid:218)dne 7.6. Trasy drugorz(cid:218)dne 7.6.1. 7.6.2. 7.6.3. Definiowanie trasy drugorz(cid:218)dnej Nawigacja mi(cid:218)dzy trasami drugorz(cid:218)dnymi Zamykanie trasy drugorz(cid:218)dnej i routing programowy 7.7. Zabezpieczanie tras w celu ograniczenia dost(cid:218)pu 7.8. Leniwe (cid:239)adowanie 7.9. Najlepsze praktyki dotycz(cid:200)ce routingu Podsumowanie Rozdzia(cid:239) 8. Budowanie niestandardowych dyrektyw i potoków 8.1. Konfigurowanie przyk(cid:239)adu 8.2. Tworzenie niestandardowych dyrektyw Tworzenie dyrektywy atrybutów 8.2.1. 8.2.2. Modyfikowanie komponentu za pomoc(cid:200) dyrektywy ze zdarzeniami 8.2.3. Tworzenie dyrektywy strukturalnej 145 145 149 153 155 156 158 158 159 164 168 169 173 176 180 184 186 187 188 190 193 194 195 196 198 201 202 204 205 205 211 214 215 217 219 219 221 223 226 Poleć książkęKup książkę 8 Spis tre(cid:258)ci 8.3. Tworzenie niestandardowych potoków 8.3.1. 8.3.2. Tworzenie czystego potoku Tworzenie nieczystego potoku Podsumowanie Rozdzia(cid:239) 9. Formularze 9.1. Konfigurowanie przyk(cid:239)adu 9.1.1. Wst(cid:218)pny przegl(cid:200)d aplikacji 9.2. Formularze oparte na szablonach 9.2.1. Wi(cid:200)zanie danych modelu z wej(cid:258)ciami za pomoc(cid:200) dyrektywy NgModel 9.2.2. Walidacja kontrolek formularza za pomoc(cid:200) dyrektywy NgModel 9.2.3. 9.2.4. Niestandardowa walidacja za pomoc(cid:200) dyrektyw Obs(cid:239)uga zdarze(cid:241) przesy(cid:239)ania lub zdarze(cid:241) anulowania 9.3. Formularze reaktywne 9.3.1. 9.3.2. 9.3.3. 9.3.4. 9.3.5. 9.3.6. Definiowanie formularza Implementowanie szablonu Obserwowanie zmian Niestandardowe walidatory z formularzami reaktywnymi Obs(cid:239)uga zdarze(cid:241) przesy(cid:239)ania lub zdarze(cid:241) anulowania Które podej(cid:258)cie do formularzy jest lepsze? 9.4. Niestandardowe kontrolki formularzy Podsumowanie Rozdzia(cid:239) 10. Testowanie aplikacji 10.1. Narz(cid:218)dzia testowe i konfiguracja przyk(cid:239)adu 10.1.1. Narz(cid:218)dzia do testowania 10.2. Testy jednostkowe 10.2.1. Anatomia testów jednostkowych 10.2.2. Testowanie potoków 10.2.3. Testowanie us(cid:239)ug, stuby i symulowanie (cid:285)(cid:200)da(cid:241) HTTP 10.2.4. Testowanie komponentów i korzystanie z modu(cid:239)ów testuj(cid:200)cych 10.2.5. Testowanie dyrektyw 10.3. Testy e2e 10.4. Dodatkowe strategie testowania Ile testów wystarczy? 10.4.1. 10.4.2. Kiedy mam pisa(cid:202) testy? 10.4.3. Co mam napisa(cid:202), e2e czy testy jednostkowe? 10.4.4. A co, je(cid:258)li nie mam czasu na pisanie testów? 10.4.5. A co z innymi rodzajami testów? Podsumowanie Rozdzia(cid:239) 11. Angular w (cid:258)rodowisku produkcyjnym 11.1. Kompilowanie Angulara dla (cid:258)rodowiska produkcyjnego 11.1.1. Kompilacja produkcyjna 11.1.2. Optymalizacja dla przegl(cid:200)darek docelowych 11.1.3. 11.1.4. Progresywne aplikacje internetowe Internacjonalizacja (i18n) 229 230 232 236 237 238 240 241 241 243 246 249 251 252 254 255 256 260 264 265 271 273 274 275 276 276 277 279 285 293 297 302 303 304 304 305 305 306 309 310 310 311 312 312 Poleć książkęKup książkę Spis tre(cid:258)ci 11.1.5. U(cid:285)ywanie alternatywnych narz(cid:218)dzi kompilacji 11.1.6. Renderowanie po stronie serwera lub renderowanie wst(cid:218)pne 11.1.7. Potoki kompilacji 11.2. Wybór architektury Angulara 11.2.1. Leniwe (cid:239)adowanie tras 11.2.2. Ograniczanie zewn(cid:218)trznych zale(cid:285)no(cid:258)ci 11.2.3. Bycie na bie(cid:285)(cid:200)co 11.3. Wdro(cid:285)enie Podsumowanie Dodatek A Aktualizacja z AngularJS do Angulara Dodatek B Komunikacja mi(cid:218)dzy komponentami Angular Skorowidz 9 313 314 314 315 315 316 319 319 321 323 329 331 Poleć książkęKup książkę 10 Spis tre(cid:258)ci Poleć książkęKup książkę Twoja pierwsza aplikacja Angular W tym rozdziale: (cid:81) komponenty frameworka Angular i sposób, w jaki tworz(cid:261) baz(cid:266) aplikacji; (cid:81) definiowanie ró(cid:298)nych typów komponentów przy u(cid:298)yciu dekoratorów; (cid:81) wykorzystywanie us(cid:225)ug do wspó(cid:225)dzielenia danych przez ca(cid:225)(cid:261) aplikacj(cid:266); (cid:81) konfigurowanie routingu do wy(cid:286)wietlania ró(cid:298)nych stron. W tym rozdziale zbudujesz ca(cid:239)(cid:200) aplikacj(cid:218) Angular, zaczynaj(cid:200)c od zera, a w trakcie pracy b(cid:218)dziesz poznawa(cid:239) podstawowe koncepcje tego frameworka. Zobaczysz w akcji kilka funkcjonalno(cid:258)ci TypeScriptu oraz poznasz nowe i nadchodz(cid:200)ce funkcjonalno(cid:258)ci Java- Scriptu. Ten projekt b(cid:218)dzie zwi(cid:218)z(cid:239)y i prosty, ale i tak b(cid:218)dzie reprezentatywny dla wielu funkcjonalno(cid:258)ci, których b(cid:218)dziesz u(cid:285)ywa(cid:202) w typowych aplikacjach. Aplikacja, któr(cid:200) utwo- rzysz, b(cid:218)dzie programem do (cid:258)ledzenia notowa(cid:241) akcji, z danymi pochodz(cid:200)cymi z Yahoo! Finance. B(cid:218)dzie w stanie pobiera(cid:202) aktualne ceny akcji, dodawa(cid:202) lub usuwa(cid:202) akcje z listy i dostosowywa(cid:202) ekran na podstawie zysków lub strat z bie(cid:285)(cid:200)cego dnia. W tym rozdziale zbudujemy t(cid:218) aplikacj(cid:218) kawa(cid:239)ek po kawa(cid:239)ku. Skoncentrujemy si(cid:218) na przej(cid:258)ciu krok po kroku przez przyk(cid:239)adow(cid:200) aplikacj(cid:218) z wystarczaj(cid:200)c(cid:200) liczb(cid:200) szcze- gó(cid:239)ów, (cid:285)eby(cid:258) móg(cid:239) zrozumie(cid:202) ró(cid:285)ne elementy i z(cid:239)o(cid:285)ono(cid:258)(cid:202) tego rozdzia(cid:239)u. Poleć książkęKup książkę 48 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular (cid:81) Pocz(cid:200)tkowe (cid:239)adowanie aplikacji. Aby uruchomi(cid:202) aplikacj(cid:218), u(cid:285)yjemy funkcji pocz(cid:200)tkowego (cid:239)adowania (ang. bootstrap) do zainicjowania elementów po ich za(cid:239)adowaniu. Dzieje si(cid:218) to raz podczas cyklu (cid:285)ycia aplikacji, a my za(cid:239)adujemy komponent App. (cid:81) Tworzenie komponentów. W Angularze wszystko kr(cid:218)ci si(cid:218) wokó(cid:239) komponen- tów, a my utworzymy kilka komponentów do ró(cid:285)nych celów. Dowiemy si(cid:218), jak s(cid:200) budowane i zagnie(cid:285)d(cid:285)ane, tworz(cid:200)c z(cid:239)o(cid:285)one aplikacje. (cid:81) Tworzenie us(cid:239)ug i korzystanie z HttpClient. Aby zapewni(cid:202) mo(cid:285)liwo(cid:258)(cid:202) ponow- nego u(cid:285)ywania kodu, zhermetyzujemy troch(cid:218) logiki, która pomo(cid:285)e nam utworzy(cid:202) list(cid:218) akcji. Logik(cid:218) umie(cid:258)cimy w odpowiedniej us(cid:239)udze. Dodatkowo korzysta(cid:202) b(cid:218)dziemy z us(cid:239)ugi HttpClient frameworka Angular w celu pobrania danych doty- cz(cid:200)cych notowa(cid:241) akcji. (cid:81) U(cid:285)ywanie potoków i dyrektyw w szablonach. Za pomoc(cid:200) potoków (ang. pipes) mo(cid:285)emy przekszta(cid:239)ca(cid:202) dane z jednego formatu na inny podczas wy(cid:258)wietlania, formatuj(cid:200)c na przyk(cid:239)ad znacznik czasu na lokalny format daty. Dyrektywy (ang. directives) s(cid:200) przydatnymi narz(cid:218)dziami do modyfikowania zachowania elementów DOM wewn(cid:200)trz szablonu, umo(cid:285)liwiaj(cid:200)cymi na przyk(cid:239)ad powtarzanie pewnych fragmentów lub warunkowe pokazywanie elementów. (cid:81) Konfigurowanie routingu. Wi(cid:218)kszo(cid:258)(cid:202) aplikacji wymaga umo(cid:285)liwienia u(cid:285)ytkow- nikom nawigacji po aplikacji, a wykorzystuj(cid:200)c router, mo(cid:285)emy zobaczy(cid:202), jak rou- towa(cid:202) mi(cid:218)dzy ró(cid:285)nymi komponentami. U(cid:285)ywaj(cid:200)c ograniczonej ilo(cid:258)ci kodu, b(cid:218)dziesz w stanie utworzy(cid:202) solidn(cid:200) aplikacj(cid:218), która wykonuje wiele skomplikowanych zada(cid:241). Kolejne rozdzia(cid:239)y koncentruj(cid:200) si(cid:218) szczegó- (cid:239)owo na poszczególnych funkcjach, aby(cid:258) móg(cid:239) uzyska(cid:202) pe(cid:239)niejszy obraz wszystkiego, co Angular ma do zaoferowania. Powiniene(cid:258) zapozna(cid:202) si(cid:218) z ES2015 i nowszymi mo(cid:285)liwo(cid:258)ciami j(cid:218)zyka JavaScript. Nie b(cid:218)d(cid:218) si(cid:218) zajmowa(cid:239) szczegó(cid:239)ami dotycz(cid:200)cymi nowszych konstrukcji tego j(cid:218)zyka, takich jak importy lub klasy. Najlepiej, (cid:285)eby(cid:258) po(cid:258)wi(cid:218)ci(cid:239) troch(cid:218) czasu na zapoznanie si(cid:218) ze szcze- gó(cid:239)ami zamieszczonymi na stronie Mozilla Developer Network (https://developer.mozilla. org/pl/docs/Web/JavaScript) lub poszuka(cid:239) jakiej(cid:258) ksi(cid:200)(cid:285)ki na ten temat. 2.1. Przegl(cid:261)d projektu z tego rozdzia(cid:225)u Kiedy sko(cid:241)czymy, aplikacja powinna wygl(cid:200)da(cid:202) tak, jak to pokazano na rysunkach 2.1 i 2.2. Omówi(cid:218) pokrótce ró(cid:285)ne cz(cid:218)(cid:258)ci, zanim je zbudujemy, wi(cid:218)c zobaczysz, jak si(cid:218) ze sob(cid:200) (cid:239)(cid:200)cz(cid:200). Przede wszystkim istnieje interfejs API, który (cid:239)aduje aktualne dane o notowaniach akcji z Yahoo! Finance. Jest wdro(cid:285)ony na platformie Heroku i nie zosta(cid:239) omówiony w tym rozdziale, ale mo(cid:285)esz przejrze(cid:202) kod tego API na stronie https://github.com/angular- in-action/api. Jest to standardowy interfejs REST API i nie wymaga uwierzytelnienia. Utworzymy us(cid:239)ug(cid:218), która pomo(cid:285)e nam uzyska(cid:202) dost(cid:218)p do danych z tego API i je (cid:239)adowa(cid:202). Po za(cid:239)adowaniu aplikacji wy(cid:258)wietlana jest strona pulpitu kontrolnego (zobacz rysunek 2.1) z list(cid:200) kart. Ka(cid:285)da karta zawiera nazw(cid:218) jednej spó(cid:239)ki, aktualn(cid:200) cen(cid:218) akcji Poleć książkęKup książkę 2.1. Przegl(cid:200)d projektu z tego rozdzia(cid:239)u 49 Rysunek 2.1. Strona pulpitu kontrolnego aplikacji (cid:286)ledzenia notowa(cid:276) gie(cid:225)dowych z linkami i kartami sumarycznymi Rysunek 2.2. Strona zarz(cid:261)dzania aplikacji do (cid:286)ledzenia notowa(cid:276) z formularzem do zmiany listy wy(cid:286)wietlanych symboli spó(cid:225)ek i dzienn(cid:200) zmian(cid:218) ceny (kwotow(cid:200) i procentow(cid:200)). T(cid:239)o kart b(cid:218)dzie czerwone dla spadku ceny, zielone dla wzrostu lub szare, gdy notowania si(cid:218) nie zmieni(cid:239)y. Ka(cid:285)da z tych kart jest instancj(cid:200) komponentu, który pobieraj(cid:200) dane o notowaniach i który okre(cid:258)la sposób renderowania karty. Górny pasek nawigacyjny ma dwa (cid:239)(cid:200)cza, do widoków pulpitu kontrolnego i zarz(cid:200)dza- nia, które umo(cid:285)liwiaj(cid:200) ogóln(cid:200) nawigacj(cid:218) mi(cid:218)dzy widokami. U(cid:285)yjemy routera Angulara, Poleć książkęKup książkę 50 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular aby skonfigurowa(cid:202) te trasy i zarz(cid:200)dza(cid:202) sposobem, w jaki przegl(cid:200)darka okre(cid:258)la, któr(cid:200) z nich wy(cid:258)wietli(cid:202). Po klikni(cid:218)ciu na pasku nawigacyjnym linku Zarz(cid:200)dzaj wy(cid:258)wietlona zostanie strona zarz(cid:200)dzania (zobacz rysunek 2.2) z list(cid:200) spó(cid:239)ek. Tutaj mo(cid:285)na usun(cid:200)(cid:202) dowoln(cid:200) spó(cid:239)k(cid:218), klikaj(cid:200)c przycisk Usu(cid:241). Mo(cid:285)na tak(cid:285)e dodawa(cid:202) nowe spó(cid:239)ki, wpisuj(cid:200)c symbol gie(cid:239)dowy w polu tekstowym i naciskaj(cid:200)c przycisk Enter. Ta strona jest pojedynczym komponentem, ale zawiera formularz, który jest aktu- alizowany natychmiast po wprowadzeniu zmian przez u(cid:285)ytkownika. List(cid:218) mo(cid:285)na roz- szerza(cid:202), wpisuj(cid:200)c nowy symbol gie(cid:239)dowy w polu tekstowym i naciskaj(cid:200)c Enter. Mo(cid:285)na te(cid:285) skraca(cid:202) list(cid:218), klikaj(cid:200)c przycisk Usu(cid:241) przy wybranej do usuni(cid:218)cia spó(cid:239)ce. W obu przy- padkach lista symboli zostanie natychmiast zmieniona, a je(cid:258)li wrócisz do pulpitu kon- trolnego, wy(cid:258)wietli si(cid:218) zaktualizowana lista. Ten projekt ma kilka ogranicze(cid:241), których powiniene(cid:258) by(cid:202) (cid:258)wiadomy. Aby przyk(cid:239)ad pozosta(cid:239) zwi(cid:218)z(cid:239)y i prosty, w aplikacji pomini(cid:218)to kilka szczegó(cid:239)ów: (cid:81) Brak persystencji. Za ka(cid:285)dym razem, gdy od(cid:258)wie(cid:285)ysz aplikacj(cid:218) w przegl(cid:200)darce, lista spó(cid:239)ek zostanie zresetowana do domy(cid:258)lnej listy. (cid:81) Brak sprawdzania b(cid:239)(cid:218)dów. Niektóre sytuacje mog(cid:200) rzuca(cid:202) b(cid:239)(cid:200)d lub powodowa(cid:202) dziwne zachowanie. Mo(cid:285)e si(cid:218) tak dzia(cid:202) na przyk(cid:239)ad przy próbie dodania spó(cid:239)ki, która nie istnieje. (cid:81) Brak testów jednostkowych. W tym przyk(cid:239)adzie skupi(cid:239)em si(cid:218) na kodzie i celowo pomin(cid:200)(cid:239)em testy jednostkowe, które zostan(cid:200) omówione pó(cid:283)niej. Ten przyk(cid:239)ad ma na celu zaprezentowanie przegl(cid:200)du sposobu, w jaki mo(cid:285)na budowa(cid:202) aplikacje Angular, a nie dostarczenie solidnej aplikacji. Pod koniec rozdzia(cid:239)u znajdziesz szereg interesuj(cid:200)cych wyzwa(cid:241), które mo(cid:285)esz podj(cid:200)(cid:202); istnieje wiele mo(cid:285)liwych funkcjo- nalno(cid:258)ci, które mo(cid:285)na sobie wyobrazi(cid:202). 2.2. Konfigurowanie projektu Zbudujemy ten przyk(cid:239)ad od zera, u(cid:285)ywaj(cid:200)c interfejsu CLI Angulara. Je(cid:258)li kiedykolwiek b(cid:218)dziesz chcia(cid:239) przejrze(cid:202) kod tego projektu, mo(cid:285)esz go znale(cid:283)(cid:202) na stronie https://github. com/angular-in-action/stocks; ka(cid:285)dy krok jest oznaczony, dzi(cid:218)ki czemu mo(cid:285)na (cid:258)ledzi(cid:202) ca(cid:239)y proces za pomoc(cid:200) Gita. Mo(cid:285)esz te(cid:285) skopiowa(cid:202) zawarto(cid:258)(cid:202) z rozdzia(cid:239)u w takiej postaci, w jakiej si(cid:218) pojawia. Je(cid:258)li nie skonfigurowa(cid:239)e(cid:258) CLI Angulara, wró(cid:202) do rozdzia(cid:239)u 1. i zrób to. W tej ksi(cid:200)(cid:285)ce u(cid:285)ywamy wersji 1.5 CLI, wi(cid:218)c je(cid:285)eli korzystasz ze starszej wersji, powiniene(cid:258) j(cid:200) zak- tualizowa(cid:202). W terminalu zacznij od katalogu, w którym chcesz wygenerowa(cid:202) folder nowego pro- jektu. Nast(cid:218)pnie mo(cid:285)esz wykona(cid:202) poni(cid:285)sze polecenia, aby wygenerowa(cid:202) nowy projekt i uruchomi(cid:202) serwer programistyczny: ng new stocks cd stocks ng serve Poleć książkęKup książkę 2.3. Rusztowanie bazowej aplikacji 51 Zajmie to kilka chwil, poniewa(cid:285) CLI instaluje wiele pakietów z npm, a zale(cid:285)y to w du(cid:285)ej mierze od szybko(cid:258)ci Twojej sieci i stopnia zaj(cid:218)to(cid:258)ci rejestru. Po zako(cid:241)czeniu instalacji mo(cid:285)esz u(cid:285)y(cid:202) przegl(cid:200)darki, aby wy(cid:258)wietli(cid:202) aplikacj(cid:218) pod adresem http://localhost:4200. Powiniene(cid:258) zobaczy(cid:202) prost(cid:200) stron(cid:218) z informacj(cid:200), (cid:285)e jest to nowa aplikacja Angular, tak jak to pokazano na rysunku 2.3. Domy(cid:258)lna zawarto(cid:258)(cid:202) nowego projektu zmienia si(cid:218) od czasu do czasu, wi(cid:218)c nie martw si(cid:218), je(cid:258)li u Ciebie wygl(cid:200)da to troch(cid:218) inaczej. Rysunek 2.3. Interfejs CLI generuje pust(cid:261) aplikacj(cid:266) z pewn(cid:261) domy(cid:286)ln(cid:261) zawarto(cid:286)ci(cid:261) Je(cid:258)li zobaczysz podobny ekran, wszystko powinno by(cid:202) skonfigurowane i gotowe do pracy. Nie jest to mo(cid:285)e najbardziej ekscytuj(cid:200)cy przyk(cid:239)ad, ale automatycznie konfiguruje za Ciebie kilka rzeczy. Teraz przyjrzymy si(cid:218) po kolei temu, co zosta(cid:239)o wygenerowane, i temu, w jaki sposób wy(cid:258)wietlana jest ta prosta wiadomo(cid:258)(cid:202). 2.3. Rusztowanie bazowej aplikacji CLI wygenerowa(cid:239) nowy projekt zawieraj(cid:200)cy wiele plików. Przyjrzymy si(cid:218) najwa(cid:285)niej- szym z nich, a o reszcie przeczytasz wi(cid:218)cej troch(cid:218) pó(cid:283)niej. Wa(cid:285)ne jest, aby(cid:258) zapa- mi(cid:218)ta(cid:239), (cid:285)e CLI generuje pliki w specyficzny sposób i zmienianie lokalizacji lub nazw plików mo(cid:285)e spowodowa(cid:202) awari(cid:218) CLI. Na razie polecam pozostawienie plików tam, gdzie s(cid:200), dopóki nie poczujesz si(cid:218) bardziej komfortowo lub nie zaplanujesz zbudowania pó(cid:283)niej w(cid:239)asnego narz(cid:218)dzia do kompilacji. Z czasem pliki i nazwy plików generowane przez CLI mog(cid:200) ulec zmianie, wi(cid:218)c je(cid:258)li masz problemy, przejrzyj dziennik zmian CLI i dokumentacj(cid:218). Ten projekt zawiera kilka katalogów i plików. G(cid:239)ówne pliki s(cid:200) wymienione w tabeli 2.1, wraz z ich ogólnymi rolami w aplikacji. Wi(cid:218)kszo(cid:258)(cid:202) z nich to konfiguracje dla ró(cid:285)nych aspektów programowania, takich jak regu(cid:239)y analizowania kodu, konfiguracja testów jed- nostkowych i konfiguracja CLI. Poleć książkęKup książkę 52 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular Tabela 2.1. Zawarto(cid:286)(cid:252) g(cid:225)ównego katalogu projektu wygenerowana przez interfejs CLI i role poszczególnych folderów i plików Zasób Rola e2e node_modules src .editorconfg .angular-cli.json karma.conf.js package.json protractor.conf.js README.md tsconfg.json tslint.json Folder testów end-to-end, zawiera podstawowy stub testu Standardowy katalog modu(cid:225)ów NPM, nie nale(cid:298)y tu umieszcza(cid:252) (cid:298)adnego kodu Katalog (cid:296)ród(cid:225)owy dla aplikacji Ustawienia domy(cid:286)lne edytora Plik konfiguracyjny dla CLI dotycz(cid:261)cy tego projektu Plik konfiguracyjny narz(cid:266)dzia Karma do uruchamiania testów jednostkowych Standardowy plik manifestu pakietu NPM Plik konfiguracyjny narz(cid:266)dzia Protractor do uruchamiania testów e2e Standardowy plik readme, zawiera informacje startowe Domy(cid:286)lny plik konfiguracyjny dla kompilatora TypeScriptu Plik konfiguracyjny dla regu(cid:225) analizy kodu TypeScriptu W tym rozdziale b(cid:218)dziesz modyfikowa(cid:202) tylko te pliki, które znajduj(cid:200) si(cid:218) w katalogu src, zawieraj(cid:200)cym ca(cid:239)y kod aplikacji. Tabela 2.2 przedstawia list(cid:218) wszystkich zasobów wyge- nerowanych wewn(cid:200)trz src. Mo(cid:285)e si(cid:218) wydawa(cid:202), (cid:285)e to du(cid:285)o plików, ale ka(cid:285)dy z nich odgrywa pewn(cid:200) rol(cid:218), a je(cid:258)li nie jeste(cid:258) pewien, co robi dany plik, na razie si(cid:218) nad tym nie zastanawiaj. Tabela 2.2. Zawarto(cid:286)(cid:252) katalogu src i role poszczególnych folderów i plików Zasób Rola app assets environments favicon.ico index.html main.ts polyfills.ts styles.css test.ts tsconfg.app.json tsconfg.spec.json typings.d.ts Zawiera g(cid:225)ówny komponent i modu(cid:225) aplikacji Pusty folder do przechowywania statycznych zasobów, takich jak obrazy Konfiguracja (cid:286)rodowisk, umo(cid:298)liwiaj(cid:261)ca kompilowanie dla ró(cid:298)nych celów, takich jak programowanie lub produkcja Obraz wy(cid:286)wietlany jako ikona ulubionej przegl(cid:261)darki G(cid:225)ówny kod HTML dla aplikacji Punkt wej(cid:286)cia dla kodu aplikacji internetowej Importuje niektóre typowe wype(cid:225)nienia wymagane do prawid(cid:225)owego dzia(cid:225)ania Angulara w pewnych przegl(cid:261)darkach Globalny arkusz stylów Punkt wej(cid:286)ciowy testu jednostkowego, nie jest cz(cid:266)(cid:286)ci(cid:261) aplikacji Konfiguracja kompilatora TypeScriptu dla aplikacji Konfiguracja kompilatora TypeScriptu dla testów jednostkowych Konfiguracja typowania Teraz, gdy masz ju(cid:285) ogólne poj(cid:218)cie o tym, co zosta(cid:239)o wygenerowane, zbadamy kilka klu- czowych plików sk(cid:239)adaj(cid:200)cych si(cid:218) na logik(cid:218) aplikacji. W nast(cid:218)pnym podrozdziale przyj- rzymy si(cid:218) bli(cid:285)ej sposobowi, w jaki Angular renderuje zawarto(cid:258)(cid:202) katalogu app do postaci danych wyj(cid:258)ciowych, które s(cid:200) wy(cid:258)wietlane na ekranie. Poleć książkęKup książkę 2.4. Jak Angular renderuje aplikacj(cid:218) bazow(cid:200) 53 2.4. Jak Angular renderuje aplikacj(cid:266) bazow(cid:261) Zanim zaczniemy budowa(cid:202) nasz(cid:200) aplikacj(cid:218), musisz zrozumie(cid:202), jak dzia(cid:239)a to podsta- wowe rusztowanie i co b(cid:218)dziemy musieli doda(cid:202). B(cid:218)dzie to b(cid:239)yskawiczna wycieczka, aby(cid:258) móg(cid:239) jak najszybciej zacz(cid:200)(cid:202) dzia(cid:239)a(cid:202), wi(cid:218)c wi(cid:218)kszej liczby szczegó(cid:239)ów i niuansów spodziewaj si(cid:218) w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki. W rozdziale 3. po(cid:258)wi(cid:218)cimy tym tematom wi(cid:218)cej czasu, aby(cid:258) móg(cid:239) lepiej zrozumie(cid:202), w jaki sposób to wszystko jest skonstruowane. Angular wymaga co najmniej jednego komponentu i jednego modu(cid:239)u. Komponent jest podstawowym budulcem aplikacji Angular i dzia(cid:239)a podobnie jak ka(cid:285)dy inny element HTML. Modu(cid:239) to sposób, w jaki Angular organizuje ró(cid:285)ne cz(cid:218)(cid:258)ci aplikacji w pojedyn- cz(cid:200) jednostk(cid:218) zrozumia(cid:239)(cid:200) dla tego frameworka. Mo(cid:285)esz potraktowa(cid:202) komponenty jak klocki Lego, które mog(cid:200) mie(cid:202) wiele ró(cid:285)nych kszta(cid:239)tów, rozmiarów i kolorów, a modu(cid:239)y b(cid:218)d(cid:200) opakowaniem, w którym dostarczane s(cid:200) klocki. Komponenty dotycz(cid:200) funkcjo- nalno(cid:258)ci i struktury, modu(cid:239)y przeznaczone s(cid:200) natomiast do pakowania i dystrybucji. 2.4.1. Komponent App Zaczniemy od przyjrzenia si(cid:218) plikowi src/app/app.component.ts. Zawiera on tak zwany komponent App, który jest korzeniem aplikacji. W kategoriach Lego mo(cid:285)esz wyobrazi(cid:202) sobie ten komponent jako wielk(cid:200) zielon(cid:200) platform(cid:218), na której zaczynasz budowanie. Listing 2.1 przedstawia kod tego komponentu. I tym razem dok(cid:239)adny kod mo(cid:285)e si(cid:218) zmienia(cid:202) z biegiem czasu, wi(cid:218)c nie martw si(cid:218), je(cid:258)li b(cid:218)dzie si(cid:218) nieco ró(cid:285)ni(cid:239) — b(cid:218)dzie mia(cid:239) takie same podstawowe wymagania. Listing 2.1. Wygenerowany komponent App (src/app/app.component.ts) import { Component } from @angular/core ; Importuje adnotacj(cid:266) component. @Component({ selector: app-root , templateUrl: ./app.component.html , styleUrls: [ ./app.component.css ] }) export class AppComponent { title = app works! ; } Definiuje komponent i jego w(cid:225)a(cid:286)ciwo(cid:286)ci. Tworzy kontroler komponentu z pojedyncz(cid:261) w(cid:225)a(cid:286)ciwo(cid:286)ci(cid:261). Je(cid:258)li jeste(cid:258) nowicjuszem w zakresie TypeScriptu, ten listing mo(cid:285)e zawiera(cid:202) troch(cid:218) nieznanej Ci sk(cid:239)adni, wi(cid:218)c przyjrzyjmy si(cid:218) bli(cid:285)ej ka(cid:285)dej sekcji kodu. Najpierw impor- tujemy adnotacj(cid:218) Component. S(cid:239)u(cid:285)y ona do dekorowania komponentu App poprzez doda- wanie szczegó(cid:239)ów, które s(cid:200) zwi(cid:200)zane z komponentem, ale nie s(cid:200) cz(cid:218)(cid:258)ci(cid:200) logiki jego kontrolera, czyli klasy AppComponent. Angular sprawdza te adnotacje i u(cid:285)ywa ich z klas(cid:200) kontrolera AppComponent do utworzenia komponentu w czasie wykonywania. Adnotacja @Component deklaruje, (cid:285)e ta klasa jest komponentem, akceptuj(cid:200)c obiekt. Ma w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) selektora, która deklaruje selektor HTML komponentu. Oznacza to, (cid:285)e kom- ponent jest u(cid:285)ywany w szablonie przez dodanie znacznika HTML app-root /app-root . W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) templateUrl deklaruje link do szablonu zawieraj(cid:200)cego szablon HTML. Podobnie w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) styleUrls zawiera tablic(cid:218) odno(cid:258)ników do wszelkich plików CSS, Poleć książkęKup książkę 54 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular które powinny zosta(cid:202) za(cid:239)adowane dla tego komponentu. Adnotacja @Component mo(cid:285)e mie(cid:202) wi(cid:218)cej w(cid:239)a(cid:258)ciwo(cid:258)ci i w tym rozdziale zobaczysz jeszcze kilka kolejnych w akcji. Na koniec wida(cid:202), (cid:285)e klasa AppComponent ma jedn(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie title. Ta warto(cid:258)(cid:202) jest tym, co powiniene(cid:258) zobaczy(cid:202) wyrenderowane w przegl(cid:200)darce, wi(cid:218)c jest to (cid:283)ród(cid:239)o warto(cid:258)ci, która ostatecznie si(cid:218) pojawia. Angular opiera si(cid:218) w du(cid:285)ej mierze na klasach ES2015 w celu tworzenia obiektów, a prawie wszystkie encje w Angularze s(cid:200) tworzone za pomoc(cid:200) klas i adnotacji. Teraz spójrzmy na znaczniki zwi(cid:200)zane z komponentem App, otwieraj(cid:200)c plik src/app/ app.component.html, pokazany tutaj: h1 Welcome to {{ title }}! /h1 Jak wida(cid:202), jest to po prostu zwyk(cid:239)y znacznik nag(cid:239)ówka, ale istnieje w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) title zde- finiowania pomi(cid:218)dzy podwójnymi nawiasami klamrowymi. Jest to powszechna kon- wencja dotycz(cid:200)ca wi(cid:200)zania warto(cid:258)ci do szablonu (by(cid:202) mo(cid:285)e znasz szablony Moustache) i oznacza, (cid:285)e Angular zast(cid:200)pi {{title}} warto(cid:258)ci(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci title z komponentu. Jest to nazywane interpolacj(cid:200) i jest cz(cid:218)sto u(cid:285)ywane do wy(cid:258)wietlania danych w szablonie. Przyjrzeli(cid:258)my si(cid:218) komponentowi App, ale teraz musimy przyjrze(cid:202) si(cid:218) modu(cid:239)owi App, aby zobaczy(cid:202), jak rzeczy s(cid:200) (cid:239)(cid:200)czone i renderowane za pomoc(cid:200) Angulara. 2.4.2. Modu(cid:225) App Modu(cid:239) App to opakowanie, które pomaga informowa(cid:202) Angular o tym, co jest dost(cid:218)pne do renderowania. Podobnie jak wi(cid:218)kszo(cid:258)(cid:202) artyku(cid:239)ów spo(cid:285)ywczych ma opakowanie, które opisuje ró(cid:285)ne sk(cid:239)adniki znajduj(cid:200)ce si(cid:218) w (cid:258)rodku i inne wa(cid:285)ne warto(cid:258)ci, modu(cid:239) opisuje ró(cid:285)ne zale(cid:285)no(cid:258)ci potrzebne do jego renderowania. W aplikacji jest co najmniej jeden modu(cid:239), ale mo(cid:285)na utworzy(cid:202) wiele modu(cid:239)ów z ró(cid:285)nych powodów (które zostan(cid:200) omówione pó(cid:283)niej). W tym przypadku s(cid:200) to wcze- (cid:258)niejszy komponent App oraz dodatkowe mo(cid:285)liwo(cid:258)ci, które s(cid:200) potrzebne w wi(cid:218)kszo(cid:258)ci aplikacji (takie jak routing, formularze i HttpClient). CLI wygenerowa(cid:239) dla nas modu(cid:239), który mo(cid:285)emy obejrze(cid:202) w lokalizacji src/app/ app.module.ts, jak to pokazano w listingu 2.2. Po raz kolejny mo(cid:285)e si(cid:218) to zmieni(cid:202) z up(cid:239)y- wem czasu, ale struktura i cel pozostaj(cid:200) te same. Listing 2.2. Modu(cid:225) App (src/app/app.module.ts) import { BrowserModule } from @angular/platform-browser ; import { NgModule } from @angular/core ; Importuje wymagane zale(cid:298)no(cid:286)ci Angulara. import { AppComponent } from ./app.component ; Importuje komponent App. @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ], providers: [], U(cid:298)ywa adnotacji NgModule do zdefiniowania modu(cid:225)u przez przekazanie obiektu. Deklaracje s(cid:225)u(cid:298)(cid:261) do wymienienia wszystkich komponentów i dyrektyw u(cid:298)ytych w aplikacji. Importy to pozosta(cid:225)e modu(cid:225)y, które s(cid:261) u(cid:298)yte w aplikacji. Dostawcy to wszystkie us(cid:225)ugi u(cid:298)ywane w aplikacji. Poleć książkęKup książkę 2.4. Jak Angular renderuje aplikacj(cid:218) bazow(cid:200) 55 bootstrap: [AppComponent] }) export class AppModule { } Bootstrap deklaruje, którego komponentu u(cid:298)y(cid:252) jako pierwszego do pocz(cid:261)tkowego za(cid:225)adowania aplikacji. Eksportuje pust(cid:261) klas(cid:266), która jest adnotowana konfiguracj(cid:261) z NgModule. Podobnie jak komponent, modu(cid:239) jest obiektem z dekoratorem. Obiekt nazywa si(cid:218) tutaj AppModule, a NgModule jest dekoratorem. Pierwszy blok polega na zaimportowaniu wszelkich zale(cid:285)no(cid:258)ci Angulara, które s(cid:200) wspólne dla wi(cid:218)kszo(cid:258)ci aplikacji, oraz kom- ponentu App. Dekorator NgModule przyjmuje obiekt z kilkoma ró(cid:285)nymi w(cid:239)a(cid:258)ciwo(cid:258)ciami. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) declarations ma dostarczy(cid:202) list(cid:218) wszystkich komponentów i dyrektyw, które maj(cid:200) by(cid:202) udost(cid:218)pnione ca(cid:239)ej aplikacji. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) import jest tablic(cid:200) innych modu(cid:239)ów, od których ten modu(cid:239) zale(cid:285)y — w tym przypadku od modu(cid:239)u przegl(cid:200)darki (zbioru wymaganych funkcji). Gdyby(cid:258) kiedy- kolwiek do(cid:239)(cid:200)cza(cid:239) inne modu(cid:239)y, takie jak modu(cid:239)y zewn(cid:218)trzne lub te, które utworzy(cid:239)e(cid:258), równie(cid:285) musz(cid:200) by(cid:202) one tutaj wymienione. Nast(cid:218)pn(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) jest providers, która jest domy(cid:258)lnie pusta. Wszelkie two- rzone us(cid:239)ugi maj(cid:200) by(cid:202) tu wymienione, a wkrótce zobaczysz, jak to zrobi(cid:202). Na koniec w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) bootstrap okre(cid:258)la, które komponenty maj(cid:200) zosta(cid:202) wst(cid:218)pnie za(cid:239)adowane podczas uruchamiania. Zazwyczaj b(cid:218)dzie to ten sam komponent, a interfejs CLI ju(cid:285) go skonfigurowa(cid:239). W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) bootstrap powinna pasowa(cid:202) do komponentu, który inicjujesz w nast(cid:218)pnej sekcji. Napisali(cid:258)my kod, który tworzy konfiguracj(cid:218) dla Angulara, aby na jej podstawie wie- dzia(cid:239), jak renderowa(cid:202). Ostatnim krokiem jest przyjrzenie si(cid:218) kodowi, który zostanie wykonany podczas uruchamiania, co nazywa si(cid:218) (cid:239)adowaniem pocz(cid:200)tkowym (ang. bootstrapping). 2.4.3. Pocz(cid:261)tkowe (cid:225)adowanie aplikacji Aby rozpocz(cid:200)(cid:202) proces renderowania, aplikacja musi zosta(cid:202) zainicjowana w (cid:258)rodowisku wykonawczym. Do tej pory deklarowali(cid:258)my tylko kod, ale teraz zobaczymy, jak jest wykonywany. CLI zajmuje si(cid:218) pod(cid:239)(cid:200)czaniem narz(cid:218)dzi do kompilacji, które dzia(cid:239)a na podstawie webpacka. Zacznijmy od przyjrzenia si(cid:218) plikowi .angular-cli.json. Zobaczymy tablic(cid:218) aplikacji, a jedn(cid:200) z w(cid:239)a(cid:258)ciwo(cid:258)ci jest main. Domy(cid:258)lnie wskazuje ona na plik src/ main.ts. Oznacza to, (cid:285)e podczas kompilacji aplikacja automatycznie wywo(cid:239)a zawarto(cid:258)(cid:202) pliku main.ts jako pierwszy zestaw instrukcji. Rol(cid:200) pliku main.ts jest pocz(cid:200)tkowe za(cid:239)adowanie aplikacji Angular. Zawarto(cid:258)(cid:202) main.ts zosta(cid:239)a przedstawiona w listingu 2.3 i jest tam tylko kilka podstawowych instrukcji. Listing 2.3. Plik main, który jest wywo(cid:225)ywany podczas uruchamiania (src/main.ts) import { platformBrowserDynamic } from @angular/platform-browser-dynamic ; import { enableProdMode } from @angular/core ; import { environment } from ./environments/environment ; import { AppModule } from ./app/ ; Importuje zale(cid:298)no(cid:286)ci. Poleć książkęKup książkę 56 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular if (environment.production) { enableProdMode(); } Je(cid:286)li w(cid:225)(cid:261)czony jest tryb produkcyjny, wy(cid:225)(cid:261)cza tryb programistyczny Angulara. platformBrowserDynamic().bootstrapModule(AppModule); Pocz(cid:261)tkowe (cid:225)adowanie modu(cid:225)u App. Pierwsza sekcja importuje niektóre zale(cid:285)no(cid:258)ci, w szczególno(cid:258)ci platformBrowserDynamic i AppModule. Nazwa jest troch(cid:218) d(cid:239)uga, ale obiekt platformBrowserDynamic jest u(cid:285)ywany do wskazania Angularowi, który modu(cid:239) jest (cid:239)adowany, a w tym przypadku jest to AppModule z wcze(cid:258)niejszego listingu. Renderowanie modu(cid:239)ów zostanie omówione w dalszej cz(cid:218)- (cid:258)ci ksi(cid:200)(cid:285)ki; na razie wa(cid:285)ne jest zrozumienie, (cid:285)e w(cid:239)a(cid:258)nie w tym momencie zaczyna si(cid:218) wykonywanie kodu. Ostatnim fragmentem, któremu nale(cid:285)y si(cid:218) przyjrze(cid:202), jest index.html. Jak by(cid:202) mo(cid:285)e pami(cid:218)tasz z kodu komponentu App, istnia(cid:239) selektor app-root, który s(cid:239)u(cid:285)y do identyfi- kacji komponentu w znacznikach. W pliku src/index.html powiniene(cid:258) zobaczy(cid:202) nast(cid:218)- puj(cid:200)cy fragment kodu: body app-root /app-root /body Po pocz(cid:200)tkowym za(cid:239)adowaniu aplikacji (przez kod z listingu 2.3) Angular b(cid:218)dzie szuka(cid:202) elementu app-root i zast(cid:200)pi go uprzednio wyrenderowanym komponentem. W(cid:239)a(cid:258)nie to zobaczysz na ekranie pokazanym na rysunku 2.1, ale podczas (cid:239)adowania wy(cid:258)wietli si(cid:218) komunikat (cid:146)adowanie… Zanim komponent zostanie wyrenderowany, mo(cid:285)e up(cid:239)yn(cid:200)(cid:202) troch(cid:218) czasu, bo wszystkie zasoby musz(cid:200) zosta(cid:202) za(cid:239)adowane i zainicjowane. Nazywa si(cid:218) to kompilacj(cid:200) JiT (ang. Just in Time), co oznacza, (cid:285)e wszystko jest (cid:239)adowane i ren- derowane w przegl(cid:200)darce na (cid:285)(cid:200)danie. Kompilacja JiT jest przeznaczona tylko dla fazy rozwoju aplikacji i mo(cid:285)e zosta(cid:202) usuni(cid:218)ta w przysz(cid:239)ych wersjach. Chcia(cid:239)bym doda(cid:202) kilka drobnych elementów, które pomog(cid:200) nam nada(cid:202) styl reszcie aplikacji, dopisuj(cid:200)c troch(cid:218) podstawowego CSS i znaczniki. Najpierw do naszego pliku src/index.html musimy doda(cid:202) dwa znaczniki linków: link rel= stylesheet href= //storage.googleapis.com/code.getmdl.io/1.0.1/ material.indigo-orange.min.css link rel= stylesheet href= //fonts.googleapis.com/ icon?family=Material+Icons Spowoduje to za(cid:239)adowanie kilku ikon, czcionek i stylów globalnych dla aplikacji, które s(cid:200) oparte na projekcie Material Design Lite. Jest to jeden sposób (cid:239)adowania zewn(cid:218)trz- nych referencji do biblioteki stylów lub innych zasobów . Chcieliby(cid:258)my nada(cid:202) naszej aplikacji pewne globalne style. Dodaj poni(cid:285)szy fragment do pliku src/styles.css — nada to aplikacji jasnoszare t(cid:239)o: body { background: #f3f3f3; } Na koniec chcemy ustawi(cid:202) kilka podstawowych znaczników, aby nada(cid:202) struktur(cid:218) naszej aplikacji. Zamie(cid:241)my zawarto(cid:258)(cid:202) pliku src/app/app.component.html znacznikami z listingu 2.4. Poleć książkęKup książkę 2.5. Budowanie us(cid:239)ug 57 Listing 2.4. Podstawowe rusztowanie znaczników (src/app/app.component.html) div class= mdl-layout mdl-js-layout mdl-layout--fixed-header header class= mdl-layout__header div class= mdl-layout__header-row span class= mdl-layout-title Notowania gie(cid:273)dowe /span div class= mdl-layout-spacer /div nav class= mdl-navigation mdl-layout--large-screen-only a class= mdl-navigation__link Panel kontrolny /a a class= mdl-navigation__link Zarz(cid:230)dzaj /a /nav /div /header main class= mdl-layout__content style= padding: 20px; /main /div Ten znaczniki s(cid:200) oparte na stylu projektowania Material Design Lite dla sposobu two- rzenia podstawowego paska narz(cid:218)dzi i g(cid:239)ównego cia(cid:239)a aplikacji. Pasek narz(cid:218)dzi ma tytu(cid:239) i dwa (cid:239)(cid:200)cza (które s(cid:200) obecnie nieaktywne) i powinien wygl(cid:200)da(cid:202) tak, jak wida(cid:202) na rysunku 2.4. Rysunek 2.4. Zmodyfikowane podstawowe rusztowanie zawieraj(cid:261)ce znaczniki Material Design Lite W porz(cid:200)dku, utworzyli(cid:258)my podstawowe rusztowanie aplikacji za pomoc(cid:200) interfejsu CLI, zobaczyli(cid:258)my komponent App, modu(cid:239) App i logik(cid:218) pocz(cid:200)tkowego (cid:239)adowania oraz zna- le(cid:283)li(cid:258)my znaczniki renderuj(cid:200)ce komponent. Gratulacje, napisa(cid:239)e(cid:258) swoj(cid:200) pierwsz(cid:200) aplika- cj(cid:218) Angular! OK, wiem, (cid:285)e nie jest to zbyt imponuj(cid:200)ce (jeszcze), ale to jest fundamen- talna cz(cid:218)(cid:258)(cid:202) ka(cid:285)dej aplikacji Angular. W pozosta(cid:239)ej cz(cid:218)(cid:258)ci rozdzia(cid:239)u na podstawie tej bazowej aplikacji utworzymy pe(cid:239)ny przyk(cid:239)ad (cid:258)ledzenia notowa(cid:241) gie(cid:239)dowych. Na pocz(cid:200)- tek nauczysz si(cid:218) tworzy(cid:202) us(cid:239)ug(cid:218) Angular, która (cid:239)aduje dane z API. 2.5. Budowanie us(cid:225)ug Us(cid:239)ugi s(cid:200) obiektami stanowi(cid:200)cymi abstrakcj(cid:218) jakiej(cid:258) wspólnej logiki, która ma by(cid:202) wielokrotnie u(cid:285)ywana w wielu miejscach. Mog(cid:200) zrobi(cid:202) wszystko, czego potrzebujesz, poniewa(cid:285) s(cid:200) obiektami. Gdy korzystamy z modu(cid:239)ów ES2015, klasy te s(cid:200) eksportowane, a wi(cid:218)c w razie potrzeby ka(cid:285)dy komponent mo(cid:285)e je zaimportowa(cid:202). Mog(cid:200) równie(cid:285) posia- da(cid:202) funkcje lub nawet warto(cid:258)ci statyczne, takie jak (cid:239)a(cid:241)cuch znaków lub liczba, jako spo- sób udost(cid:218)pniania danych ró(cid:285)nym cz(cid:218)(cid:258)ciom aplikacji. Us(cid:239)ugi mo(cid:285)na te(cid:285) potraktowa(cid:202) jako wspó(cid:239)dzielone obiekty, które w razie potrzeby mo(cid:285)e zaimportowa(cid:202) dowolna cz(cid:218)(cid:258)(cid:202) aplikacji. S(cid:200) w stanie wyodr(cid:218)bnia(cid:202) jak(cid:200)(cid:258) logik(cid:218) lub Poleć książkęKup książkę 58 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular dane (na przyk(cid:239)ad logik(cid:218) niezb(cid:218)dn(cid:200) do za(cid:239)adowania pewnych danych ze (cid:283)ród(cid:239)a), dzi(cid:218)ki czemu mo(cid:285)na ich (cid:239)atwo u(cid:285)y(cid:202) w dowolnym komponencie. Chocia(cid:285) us(cid:239)ugi cz(cid:218)sto pomagaj(cid:200) w zarz(cid:200)dzaniu danymi, nie s(cid:200) ograniczone do (cid:285)ad- nych konkretnych zada(cid:241). Intencj(cid:200) us(cid:239)ugi jest umo(cid:285)liwienie ponownego u(cid:285)ycia kodu. Us(cid:239)uga mo(cid:285)e by(cid:202) zestawem wspólnych metod, które nale(cid:285)y udost(cid:218)pni(cid:202). Mo(cid:285)esz mie(cid:202) ró(cid:285)ne „metody pomocnicze”, których nie chcesz pisa(cid:202) za ka(cid:285)dym razem od nowa; mog(cid:200) to by(cid:202) narz(cid:218)dzia do parsownia formatów danych lub logika uwierzytelniania, która musi by(cid:202) uruchamiana w wielu miejscach. W tej aplikacji b(cid:218)dziesz potrzebowa(cid:239) listy spó(cid:239)ek, która b(cid:218)dzie u(cid:285)ywana przez strony pulpitu kontrolnego i zarz(cid:200)dzania. Jest to idealny scenariusz, w którym nale(cid:285)y skorzy- sta(cid:202) z us(cid:239)ugi, aby u(cid:239)atwi(cid:202) zarz(cid:200)dzanie danymi i udost(cid:218)pnia(cid:202) je ró(cid:285)nym komponentom. CLI daje nam dobry sposób tworzenia us(cid:239)ugi, która ma potrzebne na pocz(cid:200)tek rusz- towanie. Wygeneruje równie(cid:285) prost(cid:200) us(cid:239)ug(cid:218) i stub testowy dla tej us(cid:239)ugi. Aby wygene- rowa(cid:202) us(cid:239)ug(cid:218), wykonaj nast(cid:218)puj(cid:200)ce polecenie: ng generate service services/stocks CLI wygeneruje te pliki w katalogu src/app/services. Zawiera on najbardziej podsta- wow(cid:200) us(cid:239)ug(cid:218), która nie robi nic. Pójd(cid:283)my dalej i wpiszmy kod dla ca(cid:239)ej us(cid:239)ugi, a potem sprawd(cid:283)my, jak to dzia(cid:239)a. Ostatecznie uzupe(cid:239)nisz to, co zosta(cid:239)o wygenerowane, kodem z listingu 2.5. Us(cid:239)uga Stocks b(cid:218)dzie mia(cid:239)a tablic(cid:218) zawieraj(cid:200)c(cid:200) list(cid:218) symboli spó(cid:239)ek gie(cid:239)- dowych i b(cid:218)dzie udost(cid:218)pnia(cid:202) zestaw metod do pobierania lub modyfikowania tej listy. Listing 2.5. Us(cid:225)uga Stocks (src/app/services/stocks.service.ts) import { Injectable } from @angular/core ; import { HttpClient } from @angular/common/http ; Importuje zale(cid:298)no(cid:286)ci. let stocks: Array string = [ AAPL , GOOG , FB , AMZN , TWTR ]; let service: string = https://angular2-in-action-api.herokuapp.com ; Deklaruje tablic(cid:266) spó(cid:225)ek i zmienne API. export interface StockInterface { symbol: string; lastTradePriceOnly: number; change: number; changeInPercent: number; } Definiuje i eksportuje interfejs TypeScriptu dla obiektu stock. @Injectable() export class StocksService { Adnotuje za pomoc(cid:261) Injectable, aby pod(cid:225)(cid:261)czy(cid:252) wstrzykiwanie zale(cid:298)no(cid:286)ci. Definiuje klas(cid:266) i eksportuje j(cid:261). constructor(private http: HttpClient) {} Metoda constructor do wstrzykiwania us(cid:225)ugi HttpClient do w(cid:225)a(cid:286)ciwo(cid:286)ci http klasy. get() { return stocks.slice(); } Metoda do pobierania spó(cid:225)ek. add(stock) { stocks.push(stock); return this.get(); } Metoda do dodawania do listy nowej spó(cid:225)ki. Poleć książkęKup książkę 2.5. Budowanie us(cid:239)ug 59 remove(stock) { stocks.splice(stocks.indexOf(stock), 1); return this.get(); } Metoda do usuwania spó(cid:225)ki z listy. load(symbols) { if (symbols) { return this.http.get Array StockInterface (service + /stocks/ snapshot?symbols= + symbols.join()); } } } Metoda do wywo(cid:225)ywania us(cid:225)ugi HttpClient do (cid:225)adowania warto(cid:286)ci spó(cid:225)ek z API. Us(cid:239)uga musi najpierw zaimportowa(cid:202) swoje zale(cid:285)no(cid:258)ci: jedn(cid:200) jest dekorator dla us(cid:239)ugi, a drug(cid:200) jest us(cid:239)uga HttpClient. Nast(cid:218)pnie deklaruje dwie zmienne. Jedna s(cid:239)u(cid:285)y do (cid:258)le- dzenia listy symboli spó(cid:239)ek gie(cid:239)dowych, a druga to adres URL punktu ko(cid:241)cowego inter- fejsu API. Nast(cid:218)pnie interfejs StockInterface jest definiowany i eksportowany, aby mog(cid:239)y go u(cid:285)ywa(cid:202) inne komponenty. Zapewnia to typeScriptow(cid:200) definicj(cid:218) tego, co powinien zawiera(cid:202) obiekt stock, który jest u(cid:285)ywany przez TypeScript, aby upewni(cid:202) si(cid:218), (cid:285)e korzy- stanie z danych pozostaje spójne. U(cid:285)yjemy tego pó(cid:283)niej, aby mie(cid:202) pewno(cid:258)(cid:202), (cid:285)e prawi- d(cid:239)owo typujemy nasze obiekty stock, gdy s(cid:200) stosowane. Klasa StocksService jest eksportowana i dekorowana przez dekorator Injectable. Deko- rator s(cid:239)u(cid:285)y do ustawienia odpowiedniego pod(cid:239)(cid:200)czenia, aby Angular wiedzia(cid:239), jak u(cid:285)y- wa(cid:202) jej w innym miejscu, wi(cid:218)c je(cid:258)li zapomnisz do(cid:239)(cid:200)czy(cid:202) dekorator, klasa mo(cid:285)e nie zosta(cid:202) wstrzykni(cid:218)ta do reszty Twojej aplikacji. W metodzie konstruktora us(cid:239)uga HttpClient jest wstrzykiwana za pomoc(cid:200) pocho- dz(cid:200)cej z TypeScriptu techniki deklarowania zmiennej prywatnej zwanej http, a nast(cid:218)pnie nadawany jest jej typ HttpClient. Angular mo(cid:285)e sprawdzi(cid:202) definicj(cid:218) typu i okre(cid:258)li(cid:202), w jaki sposób wstrzykn(cid:200)(cid:202) (cid:285)(cid:200)dany obiekt do klasy. Je(cid:258)li jeste(cid:258) nowicjuszem w zakresie TypeScriptu, pami(cid:218)taj, (cid:285)e zawsze, gdy po deklaracji zmiennej pojawia si(cid:218) dwukropek, definiujesz typ obiektu, który powinien by(cid:202) przypisany do tej zmiennej. Ta us(cid:239)uga zawiera cztery metody. get() jest prost(cid:200) metod(cid:200), która zwraca bie(cid:285)(cid:200)c(cid:200) warto(cid:258)(cid:202) tablicy stocks, ale zawsze zwraca kopi(cid:218), a nie bezpo(cid:258)redni(cid:200) warto(cid:258)(cid:202). Ma to na celu hermetyzowanie warto(cid:258)ci spó(cid:239)ek i zapobieganie ich bezpo(cid:258)redniej modyfikacji. Metoda add() dodaje nowy element do tablicy stocks i zwraca nowo zmodyfikowan(cid:200) war- to(cid:258)(cid:202). Metoda remove() usuwa element z tablicy stocks. Na koniec metoda load() wywo(cid:239)uje us(cid:239)ug(cid:218) HttpClient, aby za(cid:239)adowa(cid:202) dane dla bie- (cid:285)(cid:200)cych warto(cid:258)ci cen akcji. Us(cid:239)uga HttpClient jest wywo(cid:239)ywana i zwraca strumie(cid:241) obser- wowalny, który jest konstrukcj(cid:200) do obs(cid:239)ugi zdarze(cid:241) asynchronicznych, takich jak dane z wywo(cid:239)ania API. Strumienie obserwowalne zosta(cid:239)y pokrótce omówione w rozdziale 1. i b(cid:218)dziemy je widywa(cid:202) cz(cid:218)(cid:258)ciej w innych rozdzia(cid:239)ach, ale jest to pierwszy raz, kiedy mo(cid:285)esz zobaczy(cid:202) je w akcji. Istnieje te(cid:285) niewielka funkcjonalno(cid:258)(cid:202) HttpClient, która pojawia si(cid:218) jako cz(cid:218)(cid:258)(cid:202) metody get() i jest umieszczona mi(cid:218)dzy dwoma nawiasami trójk(cid:200)tnymi: this.http.get Array StockInterface (... Poleć książkęKup książkę 60 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular Jest to znane jako zmienna typowa i jest funkcjonalno(cid:258)ci(cid:200) TypeScriptu, która pozwala wskaza(cid:202) metodzie http.get(), jakiego typu obiektu powinna si(cid:218) spodziewa(cid:202); w tym przypadku b(cid:218)dzie oczekiwa(cid:202) tablicy obiektów zgodnych z StockInterface (naszych obiektów stock). Jest to opcjonalne, ale powiadamianie kompilatora, je(cid:258)li spróbujesz uzyska(cid:202) dost(cid:218)p do w(cid:239)a(cid:258)ciwo(cid:258)ci, która nie istnieje, jest bardzo przydatne. Jest jeszcze jeden krok, który musimy wykona(cid:202), poniewa(cid:285) interfejs CLI nie rejestruje automatycznie tej us(cid:239)ugi w module App i musimy równie(cid:285) zarejestrowa(cid:202) HttpClient w aplikacji. Otwórz plik src/app/app.module.ts i w górnej cz(cid:218)(cid:258)ci dodaj te dwa importy: import { HttpClientModule } from @angular/common/http ; import { StocksService } from ./services/stocks.service ; Spowoduje to zaimportowanie do pliku us(cid:239)ugi Stocks i modu(cid:239)u HttpClientModule, ale musimy zarejestrowa(cid:202) HttpClientModule w aplikacji. Znajd(cid:283) sekcj(cid:218) importu zdefinio- wan(cid:200) w @NgModule i zaktualizuj j(cid:200) tak, jak pokazano poni(cid:285)ej, aby uwzgl(cid:218)dnia(cid:239)a Http (cid:180)ClientModule: imports: [ BrowserModule, HttpClientModule ], Teraz musimy zarejestrowa(cid:202) now(cid:200) us(cid:239)ug(cid:218) StocksService z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) providers, aby poinformowa(cid:202) Angular, (cid:285)e powinna zosta(cid:202) udost(cid:218)pniona do u(cid:285)ywania przez modu(cid:239): providers: [StocksService], Twoja us(cid:239)uga jest pod(cid:239)(cid:200)czona i gotowa do wykorzystywania, ale nie u(cid:285)yli(cid:258)my jej jesz- cze w (cid:285)adnym miejscu naszej aplikacji. W nast(cid:218)pnym podrozdziale zostanie omówiony sposób jej konsumowania. Ta us(cid:239)uga nie jest zbyt skomplikowana. Jest g(cid:239)ównie przeznaczona do abstrahowania modyfikacji tablicy, aby nie by(cid:239)a modyfikowana bezpo(cid:258)rednio, i (cid:239)adowania danych z interfejsu API. Gdy aplikacja dzia(cid:239)a, tablica stocks mo(cid:285)e by(cid:202) modyfikowana, a zmiany s(cid:200) uwzgl(cid:218)dniane zarówno w komponencie panelu kontrolnego, jak i komponencie zarz(cid:200)- dzania, o czym wkrótce si(cid:218) przekonasz. Poniewa(cid:285) jest wyeksportowana, mo(cid:285)na j(cid:200) (cid:239)atwo zaimportowa(cid:202), gdy b(cid:218)dzie potrzebna. Teraz utworzymy komponent wykorzystuj(cid:200)cy pewne domy(cid:258)lne dyrektywy i pozwo- limy, aby konfigurowalne w(cid:239)a(cid:258)ciwo(cid:258)ci modyfikowa(cid:239)y wy(cid:258)wietlanie komponentu. 2.6. Tworzenie pierwszego komponentu Widzia(cid:239)e(cid:258) ju(cid:285) podstawowy komponent (App). Teraz zbudujemy bardziej z(cid:239)o(cid:285)ony kom- ponent, który u(cid:285)ywa niektórych dyrektyw i potoków i ma w(cid:239)a(cid:258)ciwo(cid:258)(cid:202). Zamierzamy utworzy(cid:202) komponent, który wy(cid:258)wietla podstawow(cid:200) kart(cid:218) podsumowuj(cid:200)c(cid:200) informacje o cenie akcji spó(cid:239)ki. Ten komponent b(cid:218)dzie tylko otrzymywa(cid:202) dane do wy(cid:258)wietlenia ze swojego kom- ponentu nadrz(cid:218)dnego i modyfikowa(cid:202) w(cid:239)asne wy(cid:258)wietlanie na podstawie tej warto(cid:258)ci wej(cid:258)ciowej. Komponent nadrz(cid:218)dny przeka(cid:285)e na przyk(cid:239)ad bie(cid:285)(cid:200)ce dane dla konkretnej Poleć książkęKup książkę 2.6. Tworzenie pierwszego komponentu 61 spó(cid:239)ki, a komponent Summary u(cid:285)yje dziennej zmiany notowa(cid:241) do ustalenia, czy t(cid:239)o powinno by(cid:202) w kolorze zielonym, czy czerwonym, na podstawie tego, czy cena akcji posz(cid:239)a w gór(cid:218), czy w dó(cid:239). Kluczowymi celami tego komponentu s(cid:200): (cid:81) przyjmowanie danych gie(cid:239)dowych i wy(cid:258)wietlanie ich; (cid:81) zmiana koloru t(cid:239)a w zale(cid:285)no(cid:258)ci od dziennej aktywno(cid:258)ci (zielony dla wzrostu, czerwony dla spadku); formatowanie warto(cid:258)ci w celu prawid(cid:239)owego wy(cid:258)wietlania (na przyk(cid:239)ad odpo- wiednia waluta lub odpowiednie warto(cid:258)ci procentowe). (cid:81) Rysunek 2.5 pokazuje ten komponent i nawet go pod(cid:239)(cid:200)czymy, aby (cid:239)adowa(cid:239) dane z API. Ostatecznie utworzymy wiele kopii tego komponentu do wy(cid:258)wietlenia karty dla ka(cid:285)dej ze spó(cid:239)ek. Rysunek 2.5. Pojedynczy komponent Summary wy(cid:286)wietlaj(cid:261)cy dane gie(cid:225)dowe Oczywi(cid:258)cie po uruchomieniu tego komponentu warto(cid:258)ci akcji b(cid:218)d(cid:200) si(cid:218) zmienia(cid:202) na pod- stawie najnowszych danych, ale mo(cid:285)esz zobaczy(cid:202) kart(cid:218) wy(cid:258)wietlaj(cid:200)c(cid:200) aktualne dane. Zbadamy szczegó(cid:239)y budowania tej karty, a nast(cid:218)pnie przejdziemy przez poszczególne cz(cid:218)(cid:258)ci i zobaczymy, w jaki sposób powstaje ten wynik. Wró(cid:202) do terminala i uruchom nast(cid:218)puj(cid:200)ce polecenie: ng generate component components/summary CLI wygeneruje nowy komponent wewn(cid:200)trz katalogu src/app/components/summary. Musieli(cid:258)my utworzy(cid:202) najpierw katalog src/app/components, poniewa(cid:285) CLI nie tworzy automatycznie nowych folderów, je(cid:258)li ich brakuje. Pomaga to zorganizowa(cid:202) kompo- nenty w jednym katalogu, ale mo(cid:285)esz je wygenerowa(cid:202) gdzie indziej. Teraz zawarto(cid:258)(cid:202) komponentu jest podobna do pierwotnej zawarto(cid:258)ci komponentu App. Zawiera pusty plik CSS, podstawowy szablon HTML, stub testowy i pust(cid:200) klas(cid:218), ju(cid:285) zainicjalizowan(cid:200) za pomoc(cid:200) adnotacji Component. Zaczniemy od skonfigurowania szablonu dla naszego komponentu, a nast(cid:218)pnie utworzymy kontroler do zarz(cid:200)dzania nim. Otwórz plik src/app/components/summary/ summary.component.html i zamie(cid:241) zawarto(cid:258)(cid:202) na to, co widzisz w listingu 2.6. Poleć książkęKup książkę 62 ROZDZIA(cid:224) 2. Twoja pierwsza aplikacja Angular Listing 2.6. Szablon komponentu Summary div class= mdl-card stock-card mdl-shadow--2dp [ngClass]= {increase: isPositive(), decrease: isNegative()} style= width: 100 ; span div class= mdl-card__title h4 style= color: #fff; margin: 0 {{stock?.symbol?.toUpperCase()}} br / {{stock?.lastTradePriceOnly | currency: USD : symbol : .2 }} br / Wy(cid:286)wietla warto(cid:286)(cid:252) symbolu i konwertuje na wielkie litery. U(cid:298)ywa dyrektywy NgClass, aby pomóc prze(cid:225)(cid:261)cza(cid:252) kolor t(cid:225)a. {{stock?.change | currency: USD : symbol : .2 }} ({{stock?. changeInPercent | percent: .2 }}) /h4 /div /span /div Wy(cid:286)wietla dzienn(cid:261) zmian(cid:266) w walucie i procentowo. Wy(cid:286)wietla ostatni(cid:261) cen(cid:266) i formatuje j(cid:261) zgodnie z walut(cid:261). Szablon zawiera kilka znaczników, aby nada(cid:202) karcie struktur(cid:218), tak(cid:200) jak struktura karty Material Design. Je(cid:258)li spojrzymy na pierwsz(cid:200) lini(cid:218), zobaczymy ten fragment jako atry- but w elemencie div: [ngClass]= {increase: isPositive(), decrease: isNegative()} Jest to szczególny rodzaj atrybutu, zwany dyrektyw(cid:200). Dyrektywy umo(cid:285)liwiaj(cid:200) mody- fikowanie zachowania i wy(cid:258)wietlania elementów DOM w szablonie. Potraktuj je jako atrybuty w elementach HTML, które powoduj(cid:200), (cid:285)e element zmienia swoje zachowa- nie, na przyk(cid:239)ad atrybut disabled wy(cid:239)(cid:200)czaj(cid:200)cy element wej(cid:258)ciowy HTML. Dyrektywy umo(cid:285)liwiaj(cid:200) dodawanie logiki warunkowej lub w inny sposób modyfikuj(cid:200) sposób zacho- wania b(cid:200)d(cid:283) renderowania szablonu. Dyrektywa NgClass mo(cid:285)e dodawa(cid:202) klasy CSS do elementu lub usuwa(cid:202) je z niego. Ma przypisan(cid:200) warto(cid:258)(cid:202) b(cid:218)d(cid:200)c(cid:200) obiektem zawieraj(cid:200)cym w(cid:239)a(cid:258)ciwo(cid:258)ci, które s(cid:200) nazwami klas CSS, a te w(cid:239)a(cid:258)ciwo(cid:258)ci s(cid:200) mapowane na metod(cid:218) na kontrolerze (zostanie on jeszcze przez nas napisany). Je(cid:258)li metoda zwraca true, doda klas(cid:218). Je(cid:285)eli zwraca false, klasa zostanie usuni(cid:218)ta. W tym fragmencie karta otrzyma klas(cid:218) CSS increase, gdy dzienna zmiana ceny jest dodatnia, lub klas(cid:218) CSS decrease, kiedy zmiana jest ujemna. Angular ma wbudowane pewne dyrektywy, a w tym rozdziale zobaczysz jeszcze kilka innych. Dyrektywy zazwyczaj przyjmuj(cid:200) wyra(cid:285)enie (jak nasz obiekt w tym przy- k(cid:239)adzie), które jest ewaluowane przez Angular i przekazywane do dyrektywy. Wyra- (cid:285)enie mo(cid:285)e by(cid:202) ewaluowane do warto(cid:258)ci logicznej lub innej warto(cid:258)ci prostej, albo rozwi(cid:200)zywa(cid:202) si(cid:218) na wywo(cid:239)anie funkcji, która zostanie uruchomiona w celu zwrócenia warto(cid:258)ci przed uruchomieniem dyrektywy. Na podstawie warto(cid:258)ci wyra(cid:285)enia dyrek- tywa mo(cid:285)e robi(cid:202) ró(cid:285)ne rzeczy, na przyk(cid:239)ad pokazywa(cid:202) lub ukrywa(cid:202) jaki(cid:258) element, gdy wyra(cid:285)enie jest prawdziwe lub fa(cid:239)szywe. Przyk(cid:239)ad interpolacji widzieli(cid:258)my ju(cid:285) wcze(cid:258)niej, ale teraz mamy przyk(cid:239)ad bardziej z(cid:239)o(cid:285)ony, który wy(cid:258)wietla symbol spó(cid:239)ki. Kontroler powinien mie(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie stock, która jest obiektem o ró(cid:285)nych warto(cid:258)ciach: {{stock?.symbol?.toUpperCase()}} Poleć książkęKup książkę 2.6. Tworzenie pierwszego komponentu 63 Sk(cid:239)adnia podwójnych nawiasów klamrowych jest sposobem wy(cid:258)wietlania warto(cid:258)ci na stronie. Jak pewnie pami(cid:218)tasz, nazywa si(cid:218) to interpolacj(cid:200), cho(cid:202) ta jest do(cid:258)(cid:202) skompli- kowana. Zawarto(cid:258)(cid:202) mi(cid:218)dzy nawiasami nazywana jest wyra(cid:285)eniem Angulara i jest porów- nywana z kontrolerem (podobnie jak dyrektywa), co oznacza, (cid:285)e spróbuje znale(cid:283)(cid:202) w kontrolerze w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) do wy(cid:258)wietlenia. Je(cid:258)li si(cid:218) to nie uda, zwykle rzucany jest b(cid:239)(cid:200)d, ale operator bezpiecznej nawigacji (?.) wyciszy b(cid:239)(cid:200)d i nie wy(cid:258)wietli niczego, je(cid:258)li w(cid:239)a(cid:258)ciwo(cid:258)ci nie b(cid:218)dzie. Ten blok wy(cid:258)wietli symbol gie(cid:239)dowy, ale pisany wielkimi literami. Wi(cid:218)kszo(cid:258)(cid:202) wyra- (cid:285)e(cid:241) JavaScriptu jest poprawnymi wyra(cid:285)eniami Angulara, chocia(cid:285) niektóre rzeczy si(cid:218) ró(cid:285)ni(cid:200), na przyk(cid:239)ad operator bezpiecznej nawigacji. Mo(cid:285)liwo(cid:258)(cid:202) wywo(cid:239)ania metod pro- totypowych, takich jak toUpperCase(), pozostaje bez zmian i dlatego mo(cid:285)na renderowa(cid:202) tekst wielkimi literami. Nast(cid:218)pna interpolacja pokazuje ostatni(cid:200) cen(cid:218) transakcyjn(cid:200) i dodaje kolejn(cid:200) funk- cjonalno(cid:258)(cid:202), zwan(cid:200) potokami, które s(cid:200) dodawane bezpo(cid:258)rednio do wyra(cid:285)enia w celu sformatowania danych wyj(cid:258)ciowych. Wyra(cid:285)enie interpolacji jest rozszerzone o symbol potoku (|), a nast(cid:218)pnie potok jest nazywany i opcjonalnie konfigurowany z warto- (cid:258)ciami oddzielonymi dwukropkiem (:). Warto(cid:258)(cid:202) ceny wraca jak normalny typ zmien- noprzecinkowy (na przyk(cid:239)ad 111.8), w odró(cid:285)nieniu od formatu waluty, który powinien wygl(cid:200)da(cid:202) jak $111.80: {{stock?.lastTradePriceOnly | currency: USD : symbol : .2 }} Potoki jedynie modyfikuj(cid:200) dane przed ich wy(cid:258)wietleniem i nie zmieniaj(cid:200) warto(cid:258)ci w kontrolerze. W tym kodzie podwójne nawiasy klamrowe wskazuj(cid:200) na to, (cid:285)e chcesz powi(cid:200)za(cid:202) dane przechowywane we w(cid:239)a(cid:258)ciwo(cid:258)ci stock.lastTradePriceOnly, aby je wy(cid:258)wie- tli(cid:202). Te dane s(cid:200) przesy(cid:239)ane strumieniowo za po(cid:258)rednictwem potoku currency (waluta), który konwertuje warto(cid:258)(cid:202) na cen(cid:218) w okre(cid:258)lonej walucie na podstawie konfiguracji USD i zaokr(cid:200)gla do dwóch miejsc po przecinku. Teraz spójrzmy na nast(cid:218)pn(cid:200) lini(cid:218) kodu: {{stock?.change | currency: USD : symbol : .2 }} ({{stock?.changeInPercent | percent: .2 }}) Ten kod ma dwa ró(cid:285)ne wi(cid:200)zania interpolacji z potokami currency i percent (procenty). Pierwsze z nich zostanie przeliczone na ten sam format waluty, ale drugie przyjmie dziesi(cid:218)tn(cid:200) warto(cid:258)(cid:202) procentowa, tak(cid:200) jak 0.06, i zamieni j(cid:200) na 6 . Dokumentacja Angulara szczegó(cid:239)owo opisuje wszystkie dost(cid:218)pne opcje i sposób ich u(cid:285)ycia dla ka(cid:285)dego potoku. Ten szablon nie dzia(cid:239)a w izolacji; wymaga kontrolera do pod(cid:239)(cid:200)czenia danych i metod. Ot
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Angular w akcji
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: