Tytuł oryginału: Mastering Angular 2 Componentspdf.helion.pl/angtia/angtia.pdf · Wprowadzenie do...

Tytuł oryginału: Mastering Angular 2 Components

Tłumaczenie: Rafał Jońca

ISBN: 978-83-283-3196-9

Copyright © 2016 Packt Publishing

First published in the English language under the title ‘Mastering Angular 2 Components– (978178588-4641)’.

Polish edition copyright © 2017 by Helion SAAll 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 Wydawnictwo HELION 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 Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/angtiaMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/angtia.zip

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/angtia

http://helion.pl/rf/angtia

http://helion.pl/ro/angtia

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze 9

O redaktorze merytorycznym 10

Przedmowa 11

Rozdzia 1. Interfejsy u ytkownika bazuj ce na komponentach 17

My lenie w kategoriach organizmów 18Komponenty, czyli organy interfejsu u ytkownika 19

Enkapsulacja 19atwo kompozycji 22

Komponenty, czyli rozwi zanie wymy lone przez natur 23Czas na nowe standardy 27

Architektura komponentowa w Angularze 29Wszystko jest komponentem 30

Pierwszy komponent 31JavaScript przysz o ci 33

Narz dzia 40Node.js i NPM 40SystemJS i JSPM 41

Podsumowanie 43

Rozdzia 2. Trzy, dwa, jeden, start! 45

Zarz dzanie zadaniami 45Wizja 46

Zaczynamy od zera 47Modu aplikacji 51Kod startowy aplikacji 52

Poleć książkęKup książkę



Spis tre ci

4

Uruchomienie aplikacji 52Powtórka 53

Tworzenie listy zada 53Powtórka 56

W a ciwy poziom enkapsulacji 56Powtórka 58

Wej cie generuje wyj cie 59Powtórka 62

W asne elementy interfejsu u ytkownika 62Powtórka 70

Filtrowanie zada 70Podsumowanie 74

Rozdzia 3. Tworzenie kompozycji przy u yciu komponentów 75

Dane — od tymczasowej listy do prawdziwej bazy danych 76Programowanie reaktywne z u yciem obserwowalnych struktur danych 76Niezmienno 84Czyste komponenty 86

Oczyszczanie listy zada 89Powtórka 95

Kompozycja z u yciem rzutowania tre ci 95Tworzenie komponentu zak adek 97

Powtórka 100Mieszanie rzutowanej i generowanej zawarto ci 101Podsumowanie 107

Rozdzia 4. Tylko bez komentarzy, prosz ! 109

Jeden edytor, by wszystkimi rz dzi 110Tworzenie komponentu edytora 110Powtórka 118

Budowanie systemu komentarzy 118Budowanie systemu komentarzy 119Budowanie komponentu komentarzy 122Powtórka 129

Podsumowanie 130

Rozdzia 5. Routing a komponenty 133

Wprowadzenie do routera Angulara 134Kompozycja poprzez routing 134

Kompozycja za pomoc szablonu czy routera 136Jak dzia a drzewo routingu? 137

Powrót do korzeni 139Zak adki wykorzystuj ce router 147

Refaktoryzacja nawigacji 149Podsumowanie 151




Spis tre ci

5

Rozdzia 6. Strumie aktywno ci, czyli co si dzia o 153

Wykonanie us ugi do tworzenia dziennika aktywno ci 154Tworzenie dziennika aktywno ci 156

Wykorzystanie elastyczno ci SVG 158Nadawanie SVG stylów 160Budowanie komponentów SVG 162

Tworzenie komponentu interaktywnego suwaka aktywno ci 164Rzutowanie czasu 167Renderowanie znaczników aktywno ci 169Tchni cie ycia w suwak 172Powtórka 175

Tworzenie strumienia aktywno ci 175Dodanie aktywno ci do modu u projektu 179Podsumowanie 180

Rozdzia 7. Komponenty poprawiaj ce dzia anie aplikacji 183

Zarz dzanie etykietami 184Encja danych etykiety 184Generowanie etykiet 185Tworzenie us ugi etykiet 186Renderowanie etykiet 188Integracja us ugi etykiet 190W czenie renderowania etykiet 192

Obs uga wpisywania etykiety 193Tworzenie mened era wpisywania etykiet 194Tworzenie komponentu wyboru etykiet 196Integracja listy etykiet z komponentem edytora 199Koniec prac nad systemem etykiet 201

Przeci gnij i upu 201Implementacja dyrektywy przeci gania 202Implementacja dyrektywy dla strefy upuszczania 205Integracja funkcjonalno ci „przeci gnij i upu ” w komponencie listy zada 208Powtórka 210

Do niesko czono ci, a nawet dalej! 211Sk adnia z gwiazdk i szablony 211Tworzenie dyrektywy przewijania w niesko czono 213Wykrywanie zmian w dyrektywie szablonu 216Dodawanie i usuwanie osadzonych widoków 218Zako czenie tworzenia dyrektywy 223

Podsumowanie 223

Rozdzia 8. Czas poka e 225

Szczegó y zadania 226W czenie etykiet dla zada 230




Spis tre ci

6

Zarz dzanie czasoch onno ci 232Pole wprowadzania czasu 233Komponenty zwi zane z obs ug czasu 235Wizualne przedstawienie post pów prac 240Powtórka z obs ugi czasu 243

Konfiguracja kamieni milowych 244Tworzenie komponentu automatycznego uzupe niania 244

Podsumowanie 251

Rozdzia 9. Konsoleta statku kosmicznego 253

Wprowadzenie do Chartist 254Panel projektów 257

Tworzenie komponentu panelu projektów 258Komponent podsumowania projektu 259

Tworzymy pierwszy komponent wykresu 264Wizualizacja otwartych zada 269

Tworzenie wykresu otwartych zada 272Tworzenie legendy wykresu 275Nadawanie interaktywno ci wykresowi 277

Podsumowanie 280

Rozdzia 10. Zapewnienie rozszerzalno ci systemu 281

Architektura modu owa 282Komponenty interfejsu u ytkownika jako modu y dodatkowe 284Implementacja API modu ów dodatkowych 285

Wstawianie komponentów z pluginu 290Uko czenie architektury pluginów 295

Budowanie pluginu dla projektów w stylu zwinnym 296Komponent informacji o zwinnym zadaniu 299Komponent szczegó ów zadania 301Powtórka z tworzenia pluginu 305

Zarz dzanie pluginami 305Wczytywanie pluginów w trakcie dzia ania aplikacji 308

Podsumowanie 311

Rozdzia 11. Testowanie komponentów 313

Wprowadzenie do Jasmine 314Tworzenie pierwszego testu 317Szpiegowanie wyników dzia ania komponentu 319Narz dzia do testowania komponentów 322

Wstrzykiwanie w testach 323Narz dzie do testowania komponentów 325

Zaawansowane testowanie komponentów 330Testowanie interakcji komponentu 333Testowanie systemu pluginów 335Podsumowanie 340




Spis tre ci

7

Dodatek A. Kod ród owy aplikacji do zarz dzania zadaniami 341

Wymagania wst pne 341U ycie 342Rozwi zywanie problemów 342

Czyszczenie danych w bazie IndexedDB 342W czenie komponentów webowych w przegl darce Firefox 343

Skorowidz 345




Spis tre ci

8




2

Trzy, dwa, jeden, start!

W tym rozdziale rozpoczniemy tworzenie aplikacji do zarz dzania zadaniami. Od razu przej-dziemy do rzeczy i zaczniemy tworzy komponenty niezb dne do obs ugi prostej listy zada .W tym rozdziale poznasz nast puj ce zagadnienia:

uruchamianie aplikacji napisanej w Angularze za pomoc g ównego komponentu; wej cia i wyj cia komponentu; dowi zywanie w a ciwo ci do elementu hostuj cego; enkapsulacja stylów i widoku; import szablonów HTML za pomoc mechanizmu wczytywania tekstu narz dzia

SystemJS; wykorzystanie EventEmitter do emitowania w asnych zdarze ; dwukierunkowe dowi zania danych; cykl ycia komponentu.

Zarz dzanie zadaniamiPo poprzednim rozdziale, w którym opisa em podstawowe koncepcje, od razu przyst pimydo wykonania komponentów przyk adowej aplikacji do zarz dzania zadaniami. Najpierw zapre-zentuj pewne podstawowe poj cia, a nast pnie sprawdzimy je w praktycznym przyk adzie.W trakcie ca ego rozdzia u b dziesz zdobywa wiedz , w jaki sposób zapewni odpowiednistruktur aplikacji dzi ki wykorzystaniu komponentów. Dotyczy ona zarówno struktury folderów,jak i interakcji pomi dzy poszczególnymi komponentami.




Angular 2. Tworzenie interaktywnych aplikacji internetowych

46

WizjaAplikacja do zarz dzania zadaniami powinna umo liwia u ytkownikom atwe zarz dzanieniewielkimi projektami i ich organizowanie. U yteczno to jeden z najwa niejszych elementówka dej aplikacji — warto zaprojektowa aplikacj w sposób nowoczesny i przyjazny dla u ytkownika.

Wygl d aplikacji do zarz dzania zadaniami, któr b dziemy tworzyli w tej ksi ce

Aplikacja powstanie z wielu ró nych komponentów umo liwiaj cych utworzenie platformy, którazapewni elastyczne zarz dzanie zadaniami. Zdefiniujmy podstawowe funkcjonalno ci aplikacji:

zarz dzanie zadaniami w wielu projektach i prezentowanie podsumowania projektu; proste harmonogramowanie i mechanizm ledzenia czasu pracy; widok podsumowania z wykresami graficznymi; ledzenie aktywno ci i wizualny log wszystkich zmian; prosty system komentarzy, który dzia a by mi dzy ró nymi komponentami.

Aplikacja do zarz dzania zadaniami pos u y jako g ówny przyk ad do zobrazowania wspó pracykomponentów. Oznacza to jednak, e klocki, z których b dziemy budowa , b d poddaneg ównemu tematowi ksi ki. Oczywi cie poza komponentami aplikacja potrzebuje innych funk-cjonalno ci, na przyk ad projektu wizualnego, zarz dzania sesj i innych istotnych elementów.Cho kod dotycz cy mi dzy innymi warstwy wizualnej mo na pobra ze strony WWW, w ksi ceskupimy si na kodzie samych komponentów.




Rozdzia 2. • Trzy, dwa, jeden, start!

47

Zaczynamy od zeraZacznijmy od utworzenia nowego folderu o nazwie angular-2-komponenty, w którym znajdziesi budowana aplikacja:

1. Otwórz okno konsoli wewn trz nowo utworzonego folderu i wykonaj poni szepolecenie, aby zainicjalizowa nowy projekt Node.js:

npm init

2. Zako cz kreator, odpowiadaj c na wszystkie pytania przy u yciu warto cidomy lnych (klawisz Enter).

3. Poniewa u ywamy JSPM do zarz dzania zale no ciami, musimy zainstalowato narz dzie jako zale no projektu Node.js:

npm install jspm --save-dev

4. Zainicjalizuj projekt JSPM wewn trz folderu aplikacji. Zastosuj domy lneustawienia dla wszystkich warto ci (klawisz Enter) poza ustawieniami dotycz cymtranspilatora — wybierz warto TypeScript. Rozpocznij kreator poleceniem:

jspm init

5. U yj JSPM do instalacji istotnych pakietów Angulara 2 jako zale no ci projektu.Dodatkowo zainstalujemy inne zale no ci, mi dzy innymi plugin, który wczytujepliki tekstowe jako modu y. Wi cej informacji na ten temat pojawi si w dalszejcz ci rozdzia u.

jspm install npm:@angular/core npm:@angular/common npm:@angular/compilernpm:@angular/platform-browser-dynamic npm:@angular/platform-browser npm:rxjstext reflect-metadata zone.js

Sprawd my, co uda o nam si wykona za pomoc narz dzi wiersza polece NPM i JSPM.

Plik package.json to g ówny plik konfiguracyjny Node.js, który pos u y równie jako baza dla JSPM(mened er pakietów) i SystemJS (wczytywanie modu ów i transpilacja). Je li zajrzysz dopliku package.json, zobaczysz fragment dotycz cy zale no ci JSPM:

"jspm": { "dependencies": { "@angular/common": "npm:@angular/common@^2.0.1", "@angular/compiler": "npm:@angular/compiler@^2.0.1", "@angular/core": "npm:@angular/core@^2.0.1", "@angular/platform-browser": "npm:@angular/platform-browser@^2.0.1", "@angular/platform-browser-dynamic": "npm:@angular/ platform-browser-dynamic@^2.0.1", "reflect-metadata": "npm:reflect-metadata@^0.1.8", "rxjs": "npm:rxjs@^5.0.0-beta.12", "text": "github:systemjs/plugin-text@^0.0.9", "zone.js": "npm:zone.js@^0.6.25" },





48

"devDependencies": { "typescript": "npm:[email protected]" } }

Przyjrzyjmy si najwa niejszym zale no ciom zainstalowanym przy u yciu JSPM i ich zastosowaniu.

Pakiet Opis

@angular/core To g ówny pakiet dotycz cy Angulara 2, pobieranym z repozytorium NPM. Je li pami taszz rozdzia u 1., JSPM to tylko mened er, który korzysta z innych repozytoriów. Pakiet corezawiera wszystkie najistotniejsze modu y, na przyk ad dekorator @Component,wykrywanie zmian, wstrzykiwanie zale no ci itp.

@angular/common Zawiera najbardziej podstawowe dyrektywy, takie jak NgIf i NgFor. Dodatkowo zawierawszystkie podstawowe przekszta cenia i dyrektywy zwi zane z obs ug formularzy.

@angular/compiler Zawiera wszystkie elementy niezb dne do kompilacji szablonów widoków. Angular nietylko umo liwia wcze niejsz kompilacj szablonów w celu uzyskania lepszego czasuwczytywania, ale dodatkowo pozwala na dynamiczn kompilacj szablonu tekstowegona wersj skompilowan . Ten pakiet jest niezb dny do kompilacji szablonów „w locie”.

@angular/platform--browser-dynamic

Zawiera funkcjonalno pozwalaj c uruchomi aplikacj z poziomu przegl darki. Tenrodzaj inicjalizacji wykorzystuje rozwi zanie dynamiczne, czyli dokonuje kompilacjiszablonów „w locie”.

typescript Ta zale no deweloperska dotyczy transpilacji kodu w TypeScripcie przez SystemJS.W ten sposób uzyskujemy automatyczn zamian kodu w ECMAScripcie 6 i TypeScripciena kod w ECMAScripcie 5 bezpo rednio w przegl darce.

text Domy lnie SystemJS obs uguje wczytywanie tylko plików JavaScriptu, ale ten dodatekdodaje obs ug plików tekstowych. To szczególnie przydatne rozwi zanie, je li chce siwczyta szablony HTML i unikn asynchronicznych da .

Pozosta e zale no ci s niezb dne do poprawnego dzia ania Angulara 2 i stanowi biblioteki uzu-pe niaj ce lub wdro enie funkcjonalno ci, które pojawi dopiero w projektowanych wersjach j -zyka ECMAScript.

G ównym punktem wej cia do aplikacji z poziomu przegl darki internetowej b dzie strona indeksu.Plik index.html zapewni realizacj nast puj cych zada .

Wczyta z serwerów CDN uzupe nienie przegl darki o elementy ECMAScriptu 6,je li jeszcze ich nie posiada. W ten sposób upewnimy si , e przegl darka rozumienajnowsze API ECMAScript 6.

Wczytanie SystemJS i pliku config.js, który zawiera informacje o odwzorowaniubibliotek wygenerowane przez JSPM.

U ycie funkcji System.import() do wczytania i wykonania g ównego punktuwej cia do aplikacji, czyli pliku bootstrap.js.





49

Utwórz plik index.html wewn trz g ównego folderu projektu:

<!doctype html><html><head lang="pl"> <meta charset="UTF-8"> <title>Angular 2. Komponenty</title></head><body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.min.js"></script>

<script src="jspm_packages/system.js"></script><script src="config.js"></script><script> System.import('lib/bootstrap.js');</script></body></html>

Przejd my do komponentu aplikacji. Potraktuj go jako najbardziej zewn trzny komponent za-pewniaj cy dzia anie ca ej aplikacji. To w a nie on reprezentuje ca aplikacj . Ka da aplikacjawymaga jednego i tylko jednego takiego komponentu. Komponent ten staje si korzeniem ca e-go drzewa komponentów.

Nadamy g ównemu komponentowi nazw App, poniewa reprezentuje ca aplikacj . Utwórzkomponent wewn trz folderu lib, który pos u y jako g ówny folder elementów projektu. Utwórzplik app.js o nast puj cej zawarto ci:

// Potrzebujemy dekoratora Component oraz wyliczenia ViewEncapsulation.import {Component, ViewEncapsulation} from '@angular/core';

// Za pomoc wczytywania tekstowego mo emy zaimportowa szablon.import template from './app.html!text';

// W ten sposób tworzymy g ówn tre aplikacji.@Component({ // Informuje Angular, aby szuka elementu <ngc-app> w celu utworzenia tego komponentu. selector: 'ngc-app', // Wykorzystajmy tre wczytanego szablonu HTML. template, // Poinformuj Angular, aby ignorowa enkapsulacj widoku. encapsulation: ViewEncapsulation.None})export class App {}

Nie ma tu w zasadzie nic, czego o strukturze komponentu nie dowiedzieliby my si ju w po-przednim rozdziale. Pojawi y si jednak dwa nowe elementy w porównaniu z wcze niejszym





50

komponentem. W a ciwo template nie zawiera ju przypisanego bezpo rednio kodu HTMLszablonu zapisanego jako szablon ECMAScriptu 6. Szablon zostaje wczytany z zewn trznegopliku jako cz mechanizmu SystemJS. Aby wczyta z systemu dowolny plik, wystarczy doda!text na ko cu standardowej cie ki importu ECMAScriptu 6:

import template from './app.html!text';

Powy szy kod wczytuje plik app.html z aktualnego folderu i umieszcza w zmiennej templatejego zawarto jako zwyk y tekst.

Druga ró nica polega na zastosowaniu ViewEncapsulation do okre lenia, jak Angular 2 obs u yenkapsulacj widoku. Angular obs uguje trzy ró ne sposoby enkapsulacji, które zapewniaj ró nepoziomy szczegó owo ci. Ka dy z tych sposobów ma swoje wady i zalety. Oto krótki opis sposo-bów enkapsulacji:

Sposób enkapsulacji Opis

ViewEncapsulation.Emulated Je li komponent dzia a w tym trybie, Angular b dzie emulowa enkapsulacjstylów poprzez generowanie atrybutów w komponencie, które pozwol nazastosowanie stylów CSS tylko do tego elementu. W ten sposób uzyskujesi cz ciow hermetyzacj , cho style zewn trzne nadal mog przenikado komponentu, je li s stylami globalnymi.

Je li komponent nie zmieni sposobu enkapsulacji, tryb ten b dziestosowany domy lnie.

ViewEncapsulation.Native Ten sposób enkapsulacji powinien by celem hermetyzacji widokóww Angularze 2. Wykorzystuje shadow DOM (zobacz poprzedni rozdzia ),aby utworzy odizolowany DOM dla ca ego komponentu. Ten tryb wymagaobs ugi shadow DOM przez przegl dark internetow , wi c nie zawszemo e by zastosowany. Pami taj, e w tym trybie nie s respektowaneglobalne style, a style lokalne trzeba umieszcza lokalnie w znacznikachstyle lub u ywa w a ciwo ci styles adnotacji komponentu.

ViewEncapsulation.None Ten tryb informuje Angular, aby nie zapewnia adnej enkapsulacjiszablonów i stylów. Oznacza to, e aplikacja b dzie korzysta g ównieze stylów pochodz cych z globalnego pliku CSS. Z tego trybu skorzystamyw wi kszo ci komponentów prezentowanych w niniejszej ksi ce. Poniewaani shadow DOM, ani style lokalne nie b d u ywane, u yjemy klas CSSokre lonych w globalnym pliku CSS.

Poniewa komponent chce wczyta szablon z systemu plików, utwórz w folderze lib plik app.htmlo pocz tkowej tre ci:

<div>Witaj, wiecie!</div>

Na t chwil to wszystko, co umie cimy w szablonie. Struktura folderów po tej operacji powinnamie nast puj c posta :





51

angular-2-komponenty node_modules/ jspm_packages/ config.js index.html lib

� app.html� app.js

package.json

Po utworzeniu komponentu mo emy doda go do g ównego pliku index.html w miejscu, w którymma si pojawi na stronie WWW:

<!doctype html><html><head lang="pl"> <meta charset="UTF-8"> <title>Angular 2. Komponenty</title></head><body><ngc-app></ngc-app>...

Modu aplikacjiAngular 2 wprowadzi poj cie modu ów jako elementów, które informuj framework Angulara,w jaki sposób kompilowa i uruchamia kod znajduj cy si wewn trz wybranej grupy kompo-nentów. Dodatkowo modu to pewna bardzo wygodna jednostka modularyzacji aplikacji i cze-nia grup komponentów w jedn , spójn ca o . W odró nieniu od wcze niejszej wersji Angularaobecnie wszystkie dyrektywy, komponenty i potoki musz znajdowa si w modu ach. Modumo e niektóre z nich udost pni do u ycia w innych komponentach aplikacji lub innych modu-ów. Ponadto w module mog pojawi si dostawcy us ug wykorzystywani pó niej do wstrzykiwa-

nia zale no ci (przyk ad pojawi si w dalszej cz ci rozdzia u).

Poniewa wszystkie komponenty musz znajdowa si w modu ach, dotyczy to równie utworzo-nego wcze niej komponentu aplikacji. Utwórzmy g ówny modu aplikacji, w którym pocz tkowoumie cimy tylko komponent aplikacji.

W folderze lib utwórz plik o nazwie app.module.js i umie w nim nast puj c tre :

// Zaimportuj dekorator modu u i pozosta e zale no ci.import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { App } from './app';

// Utwórz modu g ówny wykorzystuj cy komponent g ówny aplikacji i modu przegl darki.@NgModule({





52

declarations: [App], imports: [BrowserModule], bootstrap: [App],})export class AppModule {}

Zauwa , e modu deklaruje, e korzysta z komponentu App i e jest to g ówny komponent aplika-cji (w a ciwo bootstrap). Do prawid owego dzia ania modu u w rodowisku aplikacji niezb d-ne jest jednak zaimportowanie do modu u aplikacji modu u zawieraj cego elementy wspó pracyz przegl dark .

Kod startowy aplikacjiPlik index.html wczytuje plik bootstrap.js, który pojawia si w znaczniku script wykorzystu-j cym import SystemJS. Plik bootstrap.js s u y do wczytania wszystkich niezb dnych zale -no ci pocz tkowych i rozpocz cia uruchamiania frameworku Angular 2.

Uruchamiaj c aplikacj Angulara 2, musimy wskaza g ówny modu , który odpowiada za rdzeca ej aplikacji. W tej sytuacji b dzie to AppModule. Poniewa dzia amy w przegl darce, musimyzaimportowa funkcj platformBrowserDynamic z jednej z bibliotek Angulara. Nast pnie przeka-zujemy modu aplikacji jako parametr funkcji bootstrapModule():

// Najpierw zaimportuj wymagane zale no ci zapewniaj ce zgodno wsteczn .import 'zone.js';import 'reflect-metadata';

// Zaimportuj funkcj uruchamiania frameworku Angular.import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

// Zaimportuj g ówny modu .import {AppModule} from './app.module';

// Uruchamiamy Angular, u ywaj c g ównego modu u aplikacyjnego.platformBrowserDynamic().bootstrapModule(AppModule);

Pierwsze dwa importy, które pojawi y si w pliku, umo liwiaj wczytanie uzupe nie API, którezapewniaj zgodno wsteczn wymagan przez framework. Bez tych poprawek aplikacjaAngulara 2 nie zadzia a prawid owo. Pami taj, aby wczyta te biblioteki przed rozpocz ciemwczytywania jakiegokolwiek kodu zwi zanego z aplikacj Angulara.

Uruchomienie aplikacjiKod, który wykonali my, znajduje si w stanie pozwalaj cym na pierwsze uruchomienie aplikacji.Zanim jednak uruchomimy live-server, upewnijmy si , e s gotowe wszystkie niezb dne pliki.Struktura folderów powinna wygl da nast puj co:





53

angular-2-komponenty jspm_packages/ node_modules/ config.js index.html lib

� app.html� app.js� app.module.js� bootstrap.js

package.json

Uruchommy serwer, który zapewnia automatyczn aktualizacj kodu w przegl darce. Do startuserwera i wy wietlenia strony w przegl darce wystarczy jedno proste polecenie:

live-server

Je li wszystko zadzia a prawid owo, w przegl darce internetowej pojawi si strona WWW z tek-stem Witaj, wiecie!.

PowtórkaPowtórzmy to, czego dowiedzieli my si do tej pory.

1. Zainicjalizowali my nowy projekt za pomoc NPM i JSPM, a nast pnie u yli myJSPM do pobrania zale no ci Angulara 2.

2. Utworzyli my g ówny komponent aplikacji w app.js oraz towarzysz cy mu g ównymodu app.module.js.

3. Ponadto utworzyli my skrypt bootstrap.js, który odpowiada za rozpocz cieuruchamiania frameworku Angular 2.

4. Dodali my komponent do pliku index.html, umieszczaj c znacznik odpowiadaj cyw a ciwo ci selector komponentu.

5. Uruchomili my serwer i zobaczyli my pierwszy efekt swoich prac w przegl darceinternetowej.

Tworzenie listy zadaGdy uda o si przeprowadzi konfiguracj aplikacji i napisa g ówny komponent, mo emy przy-st pi do prac nad komponentami listy zada . Drugi komponent, który utworzymy, b dzie sku-pia si na wy wietleniu listy zada . Zgodnie z zasadami kompozycji komponent task-list wyko-namy jako subkomponent g ównego komponentu.

Utwórz wewn trz folderu lib nowy folder o nazwie task-list, a w nim nowy plik task-list.js. Umiew pliku nast puj cy kod:





54

import {Component, ViewEncapsulation} from '@angular/core';import template from './task-list.html!text';

@Component({ selector: 'ngc-task-list', // W a ciwo host umo liwia ustawienie niektórych w a ciwo ci // na elemencie HTML, który powoduje u ycie komponentu. host: { class: 'task-list' }, template, encapsulation: ViewEncapsulation.None})export class TaskList { constructor() { this.tasks = [ {title: 'Zadanie 1', done: false}, {title: 'Zadanie 2', done: true} ]; }}

Ten bardzo prosty komponent listy przechowuje w sobie list zada . Komponent zostanie do -czony do elementów HTML pasuj cych do selektora ngc-task-list.

Utwórzmy widok dla tego komponentu, aby wy wietli zadania. Jak atwo zauwa y , musimyutworzy plik task-list.html, bo taka nazwa pojawi a si w imporcie komponentu:

<div *ngFor="let task of tasks" class="task"> <input type="checkbox" [checked]="task.done"> <div class="task__title">{{task.title}}</div></div>

Wykorzystujemy dyrektyw NgFor do powtórzenia elementu <div> o klasie task tyle razy, ile jestzada na li cie znajduj cej si w komponencie. Dyrektywa NgFor powoduje utworzenie przezAngular dodatkowego szablonu, który powtórzy swoj zawarto dla tylu elementów, ile jest wpi-sów w pobranej tablicy. Poniewa obecnie tablica zawiera dwa elementy, komponent task-listwy wietli dwa egzemplarze szablonu.

Jak wcze niej wspomnia em, komponenty Angulara musz znajdowa si w modu ach. Chomogliby my umie ci nowy komponent w g ównym module aplikacji, warto od samego pocz tkuzastosowa w a ciw modularyzacj i potraktowa list zada jako osobny modu .

Utwórz w folderze task-list plik task-list.module.js o nast puj cej tre ci:

import { NgModule } from '@angular/core';

// Wczytaj modu zawieraj cy podstawowe dyrektywy.import {CommonModule} from '@angular/common';





55

// Wczytaj list zada jako zale no ci modu u.import {TaskList} from './task-list';

// Utwórz modu listy zada .@NgModule({ declarations: [TaskList], imports: [CommonModule], exports: [TaskList]})export class TaskListModule {}

Zauwa , e modu listy zada importuje modu o nazwie CommonModule. Jest to niezb dne, abykomponenty zawarte w module mog y korzysta z dyrektyw NgFor i NgIf. Dodatkowo modueksportuje komponent TaskList. Jest to niezb dne, aby z listy zada móg skorzysta g ównykomponent aplikacji, poniewa tylko komponenty eksportowane przez modu s widoczne dlapozosta ej cz ci kodu aplikacji (enkapsulacja na poziomie modu ów).Struktura folderu lib po dodaniu nowych elementów powinna by nast puj ca:

angular-2-komponenty lib

app.html app.js app.module.js bootstrap.js task-list task-list.html task-list.module.js task-list.js

Pozostaje jeszcze dodanie nowego modu u listy zada do g ównego modu u aplikacji. Zmodyfikujplik app.module.js i dodaj na jego pocz tku nast puj cy wpis:

import {TaskListModule} from './task-list/task-list.module';

W tym samym pliku uzupe nij wiersz importuj cy modu u o nast puj cy wpis:

imports: [BrowserModule, TaskListModule],

W ten sposób komponenty eksportowane przez modu TaskListModule staj si dost pne dlakomponentów obejmowanych swym zasi giem przez g ówny modu aplikacji. Oznacza to, e b -dzie móg z komponentu TaskList skorzysta komponent App.

Pozosta do wykonania jeszcze jeden krok, czyli wstawienie w odpowiednim miejscu w plikuapp.html elementu hostuj cego komponent task-list. Zamie wcze niejsz tre szablonu naponi sz :

<ngc-task-list></ngc-task-list>

To ju wszystkie zmiany niezb dne do uruchomienia komponentu task-list. Aby sprawdzi ,czy wszystko dzia a prawid owo, uruchom serwer poleceniem live-server i sprawd , czyprzegl darka wy wietli a list zada .





56

PowtórkaPowtórzmy, co uda o nam si zrealizowa w poprzednim bloku zmian. Wykonali my prostykomponent wy wietlaj cy list zada i przygotowali my modu hermetyzuj cy elementy listy.

1. Utworzyli my plik JavaScriptu komponentu, który zawiera g ówn logikkomponentu.

2. Utworzyli my szablon komponentu jako osobny plik HTML. 3. Utworzyli my modu , który b dzie zawiera wszystkie komponenty dotycz ce listyzada .

4. Dodali my nowy modu do elementów importowanych przez g ówny moduaplikacji.

5. Dodali my element HTML komponentu do g ównego szablonu aplikacji.

W a ciwy poziom enkapsulacjiLista zada wy wietla si poprawnie, a kod, który pozwoli zrealizowa to zadanie, wygl dadobrze. Je li jednak powa nie traktujemy kompozycj , powinni my przemy le projekt kompo-nentu task-list. Je eli wypiszemy na kartce obowi zki komponentu listy zada , to b d onenast puj ce: wy wietlenie listy, dodanie nowego zadania do listy oraz sortowanie i filtrowanielisty. Nie ma tu jednak mowy o zagadnieniach realizowanych przez pojedyncze zadanie. Oznaczato, e rendering pojedynczego zadania wykracza poza obowi zki komponentu listy zada . Kom-ponent powinien stanowi dla zada jedynie kontener.

Je li przyjrzymy si kodowi ponownie, oka e si , e amie zasad pojedynczej odpowiedzialno cii renderuje ca e zadania jako cz komponentu task-list. Zastanówmy si , jak mo emy to na-prawi poprzez zwi kszenie szczegó owo ci enkapsulacji.

Przeprowadzimy w tym podrozdziale proste wiczenie z refaktoryzacji kodu nazywane ekstrakcj .Wyniesiemy szablon odpowiedzialny za pojedyncze zadanie z listy zada do ca kowicie nowegokomponentu.

Utwórz w folderze task-list nowy podfolder o nazwie task, a w nim plik szablonu o nazwietask.html:

<input type="checkbox" [checked]="task.done"><div class="task__title">{{task.title}}</div>

Zawarto pliku task.html w du ej mierze odpowiada zawarto ci szablonu task-list.html. Odnosimysi jednak w nowym kodzie do nowego modelu o nazwie task.

W folderze task utwórz nowy plik JavaScriptu o nazwie task.js, który b dzie zawiera klas steru-j c komponentem:





57

import {Component, Input, ViewEncapsulation} from '@angular/core';import template from './task.html!text';

@Component({ selector: 'ngc-task', host: { class: 'task' }, template, encapsulation: ViewEncapsulation.None})export class Task { // Model task mo e zosta do czony w elemencie nadrz dnym w widoku. @Input() task;}

W poprzednim rozdziale mówili my o enkapsulacji i warunkach tworzenia czystej hermetyzacjikomponentów interfejsu u ytkownika. Jednym z tych warunków by o okre lenie w a ciwychinterfejsów wej cia i wyj cia z komponentu. Takie punkty s niezb dne, aby komponent dzia apoprawnie jako cz kompozycji. To w a nie w ten sposób komponent otrzyma dane lub jeopublikuje.

Przedstawiona implementacja komponentu zadania wykorzystuje adnotacj @Input, aby wskazapole klasy jako w a ciwo wej ciow . Aby móc zastosowa adnotacj , musimy j wcze niejzaimportowa z g ównego modu u Angulara.

W a ciwo ci wej ciowe w Angularze umo liwiaj dowi zanie wyra e w szablonach do pólegzemplarza komponentu. Uzyskujemy w ten sposób mechanizm przekazania danych z zewn trzkomponentu do jego wn trza przy u yciu szablonu komponentu. Z punktu widzenia komponentujest to przyk ad dowi zania jednokierunkowego.

Je li zastosujemy dowi zanie w a ciwo ci dla zwyk ego atrybutu DOM, Angular dowi e wy-ra enie bezpo rednio do w a ciwo ci DOM elementu. W a nie ten rodzaj dowi zania wyko-rzystujemy dla oznaczenia zako czenia zadania — w a ciwo checked elementu input.

U ycie Opis

@Input() inputProp; Umo liwia dowi zanie atrybutu inputProp w komponencie nadrz dnymdo w a ciwo ci u ywanego elementu.Angular zak ada, e atrybut elementu ma tak sam nazw jak w a ciwo .

@Input('inp') inputProp; Mo na zmieni nazw atrybutu widoczn na zewn trz komponentu.W przedstawionym przyk adzie atrybut inp zostanie przekazany do w a ciwo ciwej ciowej komponentu o nazwie inputProp.

Ostatni brakuj cy element to modyfikacja istniej cego szablonu listy zada , aby zacz u ywanowego komponentu.





58

Odniesiemy si do komponentu zadania, dodaj c w szablonie listy znacznik <ngc-task>, czylinazw podan w selektorze komponentu zadania. Dodamy równie dowi zanie w a ciwo ci.W tym celu przeka emy obiekt task z aktualnej iteracji NgFor do wej cia task komponentu task.Zast p aktualn zawarto pliku task-list.html poni sz :

<ngc-task *ngFor="let task of tasks" [task]="task"></ngc-task>

Aby komponent task-list wiedzia o komponencie task, musimy doda go do deklaracji dost p-nych w module listy zada . W tym celu zmodyfikuj plik task-list.module.js w sposób przedsta-wiony poni ej:

...import {Task} from './task/task';

@NgModule({ declarations: [TaskList, Task], ...})...

Gratulacje! Uda o nam si zrefaktoryzowa list zada i przenie pojedyncze zadanie do w a-snego komponentu w celu uzyskania czystej enkapsulacji. Mo emy powiedzie , e lista zada tokompozycja pojedynczych zada .

Z punktu widzenia konserwacji i przysz ego wielokrotnego wykorzystania elementów tego rodzajurefaktoryzacja stanowi bardzo wa ny krok w procesie budowania aplikacji. Warto ca y czas poszu-kiwa mo liwo ci rozbicia elementu na mniejsze komponenty, je li tylko taka zmiana mo e okazasi pomocna w przysz o ci. Oczywi cie nie nale y te przesadza — nie istnieje adna z ota zasadaszczegó owo ci komponentów, wi c warto kierowa si zdrowym rozs dkiem.

Odpowiednia szczegó owo enkapsulacji w architekturze komponentowej zawsze zale y od kontekstu.Moja osobista wskazówka polega na trzymaniu si zasad projektowania obiektowego, na przyk ad zasadypojedynczej odpowiedzialno ci, co pozwala w a ciwie zaprojektowa drzewo komponentów. Zawsze upewnijsi , e komponent robi tylko to, co sugeruje jego nazwa. Lista zada odpowiada za prezentacj listy i ewentu-aln jej filtracj . Odpowiedzialno za prezentacj pojedynczego zadania i zwi zanych z nim operacji z pewno-ci nie nale y do komponentu listy zada , ale do komponentu zadania.

PowtórkaW tej cz ci rozdzia u przeprowadzili my rozbicie jednego komponentu na dwa mniejsze, co za-pewni o lepsz enkapsulacj . Dodatkowo zapoznali my si z dowi zaniem w a ciwo ci kompo-nentu do argumentów wej ciowych. Wykonali my nast puj ce zadania.





59

1. Utworzyli my subkomponent zadania. 2. Wykorzystali my nowy subkomponent wewn trz komponentu task-list. 3. Wykorzystali my dowi zanie jednokierunkowe, aby przekaza dane z komponentulisty do konkretnego komponentu zadania.

Wej cie generuje wyj cieLista zada zaczyna wygl da coraz lepiej, ale by aby bezu yteczna, gdyby u ytkownik niemóg dodawa do niej nowych zada . Utwórzmy komponent zapewniaj cy wpisywanie nowychzada . Poniewa komponent ten b dzie stanowi cz g ównego komponentu listy zada , utwórzpodfolder enter-task w folderze task-list. Zadaniem komponentu b dzie obs uga ca ej logiki inter-fejsu u ytkownika zwi zanej z wprowadzeniem nowego zadania.

Wykorzystajmy t sam konwencj co w pozosta ych komponentach i utwórzmy plik o nazwieenter-task.html do przechowywania szablonu komponentu:

<input type="text" class="enter-task__title-input" placeholder="Wpisz tytu nowego zadania..." #titleInput><button class="button" (click)="enterTask(titleInput)">Dodaj zadanie</button>

Szablon sk ada si z pola wej ciowego oraz przycisku do wpisywania nowego zadania. W sza-blonie korzystamy z tak zwanych zmiennych lokalnych widoku, aby nada polu wej ciowemunazw #titleInput. Po nadaniu elementowi nazwy mo na odnie si do niego jako titleInputw innym elemencie aktualnego widoku komponentu.

W przedstawionym przyk adzie wykorzystujemy ten mechanizm do przekazania pola wej ciowe-go jako elementu DOM do funkcji enterTask, która zostanie uruchomiona po klikni ciu przyciskuDodaj zadanie.

Przyjrzyjmy si implementacji klasy komponentu odpowiedzialnej za dodanie nowego zadania,która znajdzie si w pliku enter-task.js:

import {Component, Output, ViewEncapsulation, EventEmitter} from'@angular/core';

import template from './enter-task.html!text';

@Component({ selector: 'ngc-enter-task', host: { class: 'enter-task' }, template, encapsulation: ViewEncapsulation.None})





60

export class EnterTask { // Emiter zdarze , który zostaje wywo any, gdy wpiszemy nowe zadanie. @Output() taskEntered = new EventEmitter();

// Funkcja emituje zdarzenie taskEntered i czy ci pole tytu u zadania. enterTask(titleInput) { this.taskEntered.next(titleInput.value); titleInput.value = ''; titleInput.focus(); }}

W tym komponencie zastosowali my podej cie projektowe, które stara si zapewni mo liwielu ne powi zanie listy zada z kodem odpowiadaj cym za zbieranie nowych zada . Cho samkomponent jest mocno powi zany z list zada , sam nie zawiera adnego jawnego odniesieniado listy.

Jedn z najprostszych form odwrócenia sterowania jest funkcja wywo ania zwrotnego lub nas u-chiwanie zdarze . W komponencie stosujemy adnotacj @Output, aby utworzy emiter zdarze .W a ciwo ci wyj ciowe musz by polami egzemplarza komponentu, które przechowuj emiterzdarze . Kod dodaj cy komponent wykorzysta reprezentuj cy go element HTML do dowi zaniaswojej logiki i rozpocz cia nas uchiwania zdarze . W ten sposób uzyskujemy ogromn elastycz-no i czysty projekt aplikacji, poniewa z czenie poszczególnych klocków nast puje w widoku.

U ycie Opis

@Output() outputProp =new EventEmitter();

Po wykonaniu metody outputProp.next() zostanie wyemitowanezdarzenie powi zane z nazw outputProp. Angular b dzieoczekiwa dowi zania nas uchiwania tego zdarzenia w kodzieszablonu u ywaj cym tego komponentu o postaci:

<my-comp (outputProp)="doSomething()">

W wyra eniu dotycz cym zdarzenia zawsze pojawi si dost p dosztucznie wygenerowanej zmiennej $event. Zmienna ta odnosisi do danych przekazanych od obiektu EventEmitter.

@Output('out') outputProp =new EventEmitter();

Zastosuj ten format, je li w a ciwo ci wyj ciowe dost pnew komponentach nadrz dnych maj stosowa inn nazw niwewn trz komponentu. W przedstawionym przyk adzie powi zaniez wywo aniem funkcji outputProp.next() wymaga zastosowaniaponi szego kodu w komponencie nadrz dnym:

<my-comp (out)="doSomething()">

Wykorzystajmy nowy komponent do dodawania nowych zada do komponentu task-list.Zmodyfikujmy istniej cy szablon komponentu listy zada . Otwórz plik task-list.html znajduj cysi w folderze task-list. Musimy doda komponent enter-task, a tak e obs u y zdarzenie, któreb dzie emitowane po wpisaniu nowego zadania w komponencie:





61

<ngc-enter-task (taskEntered)="addTask($event)"></ngc-enter-task><ngc-task *ngFor="let task of tasks" [task]="task"></ngc-task>

Poniewa w a ciwo wyj ciowa komponentu enter-task nosi nazw taskEntered, mo emy jdowi za do atrybutu (taskEntered)="" elementu HTML w komponencie nadrz dnym.

W wyra eniu wpisujemy nazw funkcji komponentu task-list o nazwie addTask. Potrzebujemyrównie skorzysta ze zmiennej $event, która zawiera tytu zadania wyemitowany z komponentuenter-task. Gdy klikniemy przycisk w komponencie enter-task, zostanie zg oszone zdarzenie,które przechwyci komponent nadrz dny i skieruje je do funkcji addTask.

Musimy równie dokona pewnych drobnych zmian w napisanym w JavaScripcie kodzie kompo-nentu task-list. Otwórz plik task-list.js i dodaj pogrubiony fragment:

export class TaskList { ... // Funkcja dodaj ca zadanie z widoku. addTask(title) { this.tasks.push({ title, done: false }); }}

Dodali my w kodzie komponentu funkcj addTask(), która dodaje nowe zadanie do listy napodstawie tytu u otrzymanego jako parametr. Zamkn li my w ten sposób ca y kr g — zdarzeniez komponentu enter-task trafia do tej funkcji i powoduje dodanie zadania w komponencietask-list.

Ostatnia zmiana dotyczy dodania nowego komponentu do modu u listy zada , aby komponentsta si widoczny dla innych komponentów wewn trz modu u. Otwórz plik task-list.module.jsi dodaj pogrubione fragmenty:

...// Komponent do wpisywania nowych zada .import {EnterTask} from './enter-task/enter-task';

@NgModule({ declarations: [TaskList, Task, EnterTask], ...})

Uruchom serwer projektu i sprawd , czy mo esz dodawa nowe zadania. Zauwa , e dodanezadanie automatycznie pojawi si na li cie.





62

PowtórkaDodali my nowy subkomponent listy zada , który odpowiada za zapewnienie logiki interfejsuu ytkownika zwi zanej z dodawaniem nowych zada . Wzbogacili my projekt o nast puj ceelementy.

1. Utworzyli my subkomponent, który jest lu no powi zany z reszt koduw a ciwo ciami wyj ciowymi i emiterami zdarze .

2. Poznali my adnotacj @Output i jej wykorzystanie do tworzenia w a ciwo ciwyj ciowych.

3. Wykorzystali my dowi zanie zdarze , aby powi za zachowanie, czyli przekazadane od widoku do komponentu.

W asne elementy interfejsu u ytkownikaStandardowe elementy interfejsu u ytkownika dost pne w ka dej przegl darce internetowejsprawdzaj si , ale cz sto nowoczesne aplikacje internetowe wymagaj bardziej z o onych i inte-ligentnych elementów wej ciowych ni te dost pne domy lnie.

Wykonamy dwa w asne elementy interfejsu u ytkownika, które wykorzystamy w dalszej cz ciaplikacji, aby uczyni jej obs ug znacznie wygodniejsz :

Pole wyboru — cho istnieje pole wyboru wbudowane w przegl dark , czasemtrudno dostosowa je do wizualnego wygl du pozosta ej cz ci aplikacji.Wbudowane pola wyboru maj ograniczon zdolno dostosowywania swojegowygl du, wi c nie atwo dostosowa je do wymaga . Nie od dzi wiadomo,e nieraz to ma e elementy powoduj , i z aplikacji korzysta si wygodnie.

Przyciski prze czania — to lista przycisków prze czania, w której w danej chwilitylko jeden z przycisków mo e by w czony. W zwyk ej przegl darce u yliby myw ich miejscu przycisków opcji (ang. radio button). Podobnie jak z polami wyboru,ich styl wizualny nie zawsze udaje si dostosowa do wymaga wygl du strony.Lista przycisków w wielu przypadkach w du o bardziej nowoczesny sposób reprezentujewybór typu „jeden z listy”. A tak poza tym to kto nie lubi wciska przycisków?

Zacznijmy od wykonania pola wyboru. Poniewa w przysz o ci b dziemy najprawdopodobniejwykonywa znacznie wi cej elementów interfejsu u ytkownika, utwórzmy w folderze lib folder ui.

W folderze ui utwórz folder checkbox dla komponentu pola wyboru. Nast pnie utwórz w nowymfolderze plik checkbox.html i wstaw w nim poni szy kod:

<input type="checkbox" [checked]="checked" (change)="onChecke dChange($event.target.checked)"> {{label}}





63

W szablonie zastosowali my dwa dowi zana. Pierwsze z nich to dowi zanie do w a ciwo cichecked elementu DOM. Pole checked obs uguj ce to dowi zanie po stronie komponentu wyko-namy w dalszej cz ci rozdzia u.

Dodatkowo dodali my dowi zanie nas uchiwania zdarzenia zmiany stanu pola opcji (change).Ka de wywo anie tego zdarzenia spowoduje wywo anie funkcji onCheckedChange w klasie kompo-nentu. U ywamy syntetycznej zmiennej $event, aby przekaza now warto w a ciwo ci checkedelementu, który by ród em zdarzenia.

Wykonajmy równie implementacj klasy komponentu. Utwórz w folderze checkbox nowy plikcheckbox.js o nast puj cej tre ci:

import {Component, Input, Output, ViewEncapsulation, EventEmitter} from'@angular/core';import template from './checkbox.html!text';

@Component({ selector: 'ngc-checkbox', host: { class: 'checkbox' }, template, encapsulation: ViewEncapsulation.None})export class Checkbox { // Opcjonalna etykieta, któr mo na nada opcji. @Input() label; // Informacja, czy opcja jest w czona czy wy czona. @Input() checked; // Emiter zdarze , gdy dochodzi do zmiany stanu zaznaczenia. // Korzysta z konwencji odnosz cej si do dowi zania dwukierunkowego [(checked)]. @Output() checkedChange = new EventEmitter();

// Ta funkcja spowoduje zg oszenie zdarzenia. onCheckedChange(checked) { this.checkedChange.next(checked); }}

W zasadzie klasa komponentu nie zawiera adnych specjalnych elementów, je li przyjrzymy sijej tylko pobie nie. U ywa w a ciwo ci wej ciowej, aby umo liwi ustawienie stanu zaznaczeniaz zewn trz, a dodatkowo posiada w a ciwo wyj ciow w postaci emitera zdarze , aby poinfor-mowa zewn trzne komponenty o dokonanej zmianie stanu. Istnieje jednak pewna konwencjanazewnicza, która czyni komponent do szczególnym. Konwencja, w której nazwa w a ciwo ciwej ciowej pojawia si równie w nazwie w a ciwo ci wyj ciowej, ale z dodanym s owem Change,powoduje, e programista stosuj cy komponent mo e skorzysta ze skrótu zapewniaj cego dowi -zanie dwukierunkowe.





64

Angular jako taki nie zapewnia dowi zania dwukierunkowego, ale jego wykonanie jest dziecinnieproste. W zasadzie dwukierunkowe dowi zanie danych nie ró ni si znacz co od po czeniadowi zania w a ciwo ci z dowi zaniem zdarzenia.

Poni szy przyk ad tworzy bardzo proste dowi zanie dwukierunkowe dla pola tekstowego:

<input type="text" (input)="value = $event.target.value" [value]="value">

Prostota Angulara i ogólne podej cie do rozszerzania wbudowanej funkcjonalno ci przegl darekczyni implementacj tego mechanizmu wyj tkowo prost .

Implementacja dowi zania dwukierunkowego mi dzy komponentem i subkomponentem nie jestwcale trudniejsza. W zasadzie musimy si tylko skupi na uczestnicz cych w zadaniu w a ciwo-ciach wej ciowych i wyj ciowych subkomponentu.

Przyjrzyj si poni szemu diagramowi.

Dowi zanie dwukierunkowe mi dzy polami sk adowymi komponentu i subkomponentem





65

Poniewa dowi zanie dwukierunkowe by o funkcjonalno ci , której dodania do Angulara doma-ga o si wiele osób, istnieje bardzo przydatny skrót pozwalaj cy je uzyska . Przyjrzyjmy sikilku przyk adom, w jaki sposób zaimplementowa dowi zanie danych mi dzy szablonem kom-ponentu a subkomponentem.

W a ciwo cisubkomponentu

Dowi zania w szablonie komponentu

@Input() text;

@Output() textOut =

new EventEmitter();

<sc [text]="myText"

(textOut)="myText = $event">

Dowi emy w a ciwo myText komponentu do w a ciwo ci wej ciowej textsubkomponentu. Dodatkowo wy apujemy zdarzenie textOut z subkomponentui aktualizujemy w a ciwo myText.

@Input() text;

@Output() textChange =

new EventEmitter();

<sc [(text)]="myText">

Mo emy upro ci dowi zanie dwukierunkowe poprzez u ycie konwencjinazewniczej, w której emiter zdarze ma do czone na ko cu s owo Change,ale poza tym nazwy s identyczne. Taki zapis pozwala zastosowa w szablonieskrócon notacj w postaci [(w a ciwo )].

Je li przyjrzymy si implementacji komponentu checkbox, zauwa ymy dostosowanie si do kon-wencji pozwalaj cej na u ycie skróconego zapisu dowi zania dwukierunkowego. W ten sposób,pisz c szablony u ywaj ce komponentu checkbox, b dziemy mogli zaoszcz dzi sobie nieco pisania.

Poniewa tworzymy nowy zestaw komponentów, b dziemy potrzebowali nowego modu u Angulara.W folderze ui utwórz plik ui.module.js i umie w nim poni szy kod:

import { NgModule } from '@angular/core';

// Wczytaj modu zawieraj cy podstawowe dyrektywy.import {CommonModule} from '@angular/common';

// Wczytaj komponenty.import {Checkbox} from './checkbox/checkbox';

// Utwórz modu listy zada .@NgModule({ declarations: [Checkbox], imports: [CommonModule], exports: [Checkbox]})export class UIModule {}

W przedstawionym kodzie modu u nie ma adnych nowych elementów, ale warto pami ta ,e u ycie komponentów na zewn trz modu u wymaga podania ich równie w sekcji exports.





66

Poniewa modu listy zada b dzie korzysta z modu u interfejsu u ytkownika, nanie w plikutask-list/task-list.module.js pogrubione zmiany:

...// Wczytaj modu zawieraj cy komponenty interfejsu u ytkownika.import {UIModule} from '../ui/ui.module';...@NgModule({ imports: [CommonModule, UIModule], ...})...

Zintegrujmy nowy komponent z komponentem zadania, zast puj c obecnie stosowan imple-mentacj zwyk ego pola wyboru. Zmodyfikuj plik task.html znajduj cy si w folderze task-list/task.Zast p pole wyboru wbudowane w przegl dark poni szym kodem:

<ngc-checkbox [(checked)]="task.done"></ngc-checkbox>

Poniewa importujemy modu interfejsu u ytkownika w module listy zada , komponent checkboxb dzie dost pny we wszystkich komponentach modu u listy. Musimy jednak doda w plikutask.js dodatkow obs ug stanu zaznaczenia. Wprowad w pliku nast puj ce zmiany.

...import {..., HostBinding} from '@angular/core';...export class Task { // Model task mo e zosta do czony na elemencie nadrz dnym wewn trz widoku. @Input() task;

@HostBinding('class.task--done') get done() { return this.task && this.task.done; }}

Ju wcze niej wykorzystywali my w a ciwo host w komponentach. Umo liwia ona zdefiniowa-nie dodatkowych zdarze lub w a ciwo ci w elemencie hostuj cym komponent. Element hostuj -cy to element DOM, w którym znajduje si komponent wewn trz komponentu nadrz dnego.

Istnieje jednak inny sposób ustawiania w a ciwo ci na elemencie hostuj cym komponent,który przydaje si , je li musimy ustawia w a ciwo na podstawie danych znajduj cych siw komponencie.

Adnotacja @HostBinding umo liwia tworzenie dowi za w a ciwo ci w elemencie hostuj cymkomponent na podstawie sk adowych komponentu. Przedstawiony kod wykorzystuje adnotacjdo warunkowego ustawienia klasy CSS task--done w elemencie HTML komponentu. W tensposób odró nimy wizualnie zadania zako czone od trwaj cych.





67

By to ostatni krok integruj cy w asny komponent checkbox z list zada . Uruchom serwer pole-ceniem live-server i pobaw si du ymi polami wyboru na li cie zada . Czy nie s one du oprzyjemniejsze do zaznaczania ni standardowe pola wyboru? Nie zaniedbujmy interfejsówu ytkownika. Mo e to mie bardzo pozytywny wp yw na popularno produktu.

Lista zada po dodaniu w asnego komponentu checkbox

Po zako czeniu prac nad komponentem checkbox mo emy rozpocz prace nad komponentemprze czania przycisków, z którego skorzystamy w nast pnym podrozdziale. Utwórz w folderze uifolder o nazwie toggle, a w nim plik toggle.html o nast puj cej tre ci:

<button class="button button--toggle" *ngFor="let button of buttonList" [class.button--active]="button === selectedButton" (click)="onButtonActivate(button)">{{button}}</button>

Tak naprawd nie pojawi si tu nic nowego! Powielamy przycisk kilkukrotnie za pomoc dyrekty-wy NgFor na podstawie zawarto ci listy buttonList. Lista zawiera etykiety przycisków. Warunkowoustawiamy klas CSS o nazwie button--active za pomoc dowi zania w a ciwo ci, porównuj caktualny przycisk z nazw znajduj c si w polu selectedButton. Klikni cie przycisku powodujewywo anie funkcji onButtonActivate, która otrzyma tre aktualnie klikni tego przycisku.

W folderze toggle utwórz plik toggle.js i umie w nim poni sz klas komponentu:

import {Component, Input, Output, ViewEncapsulation, EventEmitter}from '@angular/core';

import template from './toggle.html!text';





68

@Component({ selector: 'ngc-toggle', host: { class: 'toggle' }, template, encapsulation: ViewEncapsulation.None})export class Toggle { // Lista obiektów, która zostanie wykorzystana jako warto ci przycisku. @Input() buttonList; // Wej cie i stan informuj cy, który przycisk jest wybrany, musz odnosi si do obiektu // w buttonList. @Input() selectedButton; // Emiter zdarze po zmianie selectedButton wykorzystuje dowi zanie dwukierunkowe // o sk adni [(selected-button)]. @Output() selectedButtonChange = new EventEmitter();

// Funkcja zwrotna cyklu ycia komponentu wywo ywana po tym, jak konstruktor i dane // wej ciowe zosta y ustawione. ngOnInit() { if (this.selectedButton === undefined) { this.selectedButton = this.buttonList[0]; } }

// Funkcja wybieraj ca wybrany przycisk i emituj ca zdarzenie. onButtonActivate(button) { this.selectedButton = button; this.selectedButtonChange.next(button); }}

W komponencie wykorzystujemy sk adow buttonList jako tablic obiektów, po której iterujemyw szablonie dyrektyw NgFor. Sk adowa buttonList jest w a ciwo ci wej ciow , wi c trafi tokomponentu jako cz danych z komponentu nadrz dnego.

Sk adowa selectedButton przechowuje aktualnie wybrany obiekt tablicy buttonList. Wykorzy-stujemy dla niej dowi zanie dwukierunkowe. W ten sposób mo emy nie tylko zmodyfikowaaktualne zaznaczenie z komponentu, ale równie poinformowa wiat zewn trzny o wybraniuinnego przycisku przez u ytkownika.

Wewn trz funkcji onButtonActivate ustawiamy sk adow selectedButton i zg aszamy zdarzeniezmiany.

Metod ngOnInit wywo a Angular, bo stanowi ona jedn z metod cyklu ycia dyrektyw i kompo-nentów. W sytuacji, gdy zmienna wej ciowa selectedButton nie zosta a ustawiona, ustawiamydomy lne zaznaczenie na pierwszy przycisk z listy. Poniewa zarówno selectedButton, jak i button





69

List s w a ciwo ciami wej ciowymi, musimy zaczeka na ich inicjalizacj , zanim uruchomi-my wspomnian logik . Jest niezwykle wa ne, aby nie uruchamia inicjalizacji parametrów wej-ciowych w konstruktorze komponentu. Metoda cyklu ycia ngOnInit() zostanie uruchomiona

dopiero po podpi ciu wszystkich w a ciwo ci wej ciowych i wyj ciowych, a ta sytuacja ma miejscedopiero po skonstruowaniu dyrektywy.

Je li zdefiniujemy w komponencie dowoln z metod cyklu ycia komponentu, Angular wywo a j automatycznie.

Przedstawiony poni ej diagram ilustruje cykl ycia komponentu Angulara. Przy tworzeniukomponentu wszystkie metody zostan wywo ane w kolejno ci wskazanej w diagramie pozametod ngOnDestroy, która zostanie wywo ana w momencie niszczenia komponentu.

Ilustracja cyklu ycia komponentu Angulara





70

Wykrywanie zmian równie powoduje uruchomienie cz ci metod cyklu ycia. Zostanuruchomione przynajmniej dwie z wymienionych poni ej metod, ale zawsze w przedstawionejtu kolejno ci:

ngDoCheck, ngAfterContentChecked, ngAfterViewChecked, ngOnChanges (je li zostan wykryte jakiekolwiek zmiany).

Szczegó owy opis wszystkich metod cyklu ycia komponentu znajduje si w dokumentacji frame-worku Angular dost pnej na stronie https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html.

Pami taj o dodaniu komponentu toggle do modu u interfejsu u ytkownika znajduj cego si w pli-ku ui.module.js w sekcjach declarations i exports.

PowtórkaW tej cz ci wyja ni em, jak budowa w asne komponenty interfejsu u ytkownika, które s ogólnei lu no powi zane z pozosta cz ci aplikacji, wi c mog by stosowane w innych komponentachjako subkomponenty. Wykonali my w tym podrozdziale nast puj ce zadania:

1. Utworzyli my subkomponent, który jest lu no powi zany z reszt aplikacji dzi kiw a ciwo ciom zewn trznym i emiterom zdarze .

2. Dowiedzieli my si , czym jest adnotacja @Output i jak wykorzysta j do tworzeniaw a ciwo ci zewn trznych.

3. Wykorzystali my adnotacj @HostBinding do utworzenia w sposób deklaratywnyw a ciwo ci w elemencie HTML hostuj cym komponent.

4. Wykorzystali my dowi zanie zdarze , aby przekaza dane z widoku do komponentu. 5. Wykonali my dowi zanie dwukierunkowe, wykorzystuj c notacj skrócon . 6. Poznali my cykl ycia komponentu Angulara i wykorzystali my metod cyklu yciangOnInit do inicjalizacji komponentu po otrzymaniu przez komponent w a ciwo ciwej ciowych i wyj ciowych.

Filtrowanie zadaTo ostatnie zadanie w tym rozdziale. Poznali my wiele elementów Angulara 2, tworz c prostekomponenty i cz c je w wi ksze elementy. W poprzednim podrozdziale wykonali my ogólnykomponent interfejsu u ytkownika, który mo na zastosowa w wielu ró nych projektach. Wyko-rzystamy okazj i nie tylko zastosujemy komponent przycisków prze czania do filtrowania zada ,ale równie wprowadzimy poj cie us ugi danych.





71

Rozpocznijmy od dodatkowego wiczenia z refaktoryzacji. Do tej pory przechowywali my danelisty zada bezpo rednio w komponencie task-list. Zmie my t sytuacj , bo rzadko b dzieodpowiada a rzeczywisto ci, i skorzystajmy z us ugi danych.

Zastosowana us uga nie b dzie korzysta a z bazy danych — po prostu b dzie niezale nym ró-d em danych o zadaniach. Dodatkowo w trakcie realizacji zadania po raz pierwszy skorzystamyz mechanizmu wstrzykiwania zale no ci Angulara 2.

Utwórz nowy plik o nazwie task-list-service.js w folderze lib/task-list i umie w nim nast puj ctre :

// Klasy, które maj zosta udost pnione dla wstrzykiwania zale no ci, musz by// oznaczone tym dekoratorem.import {Injectable} from '@angular/core';

@Injectable()export class TaskListService { constructor() { this.tasks = [ {title: 'Zadanie 1', done: false}, {title: 'Zadanie 2', done: false}, {title: 'Zadanie 3', done: true}, {title: 'Zadanie 4', done: false} ]; }}

Wszystkie zadania zosta y przeniesione do nowej us ugi. Aby mo liwe by o wstrzykiwanieklasy us ugi, musimy udekorowa j adnotacj @Injectable.

Wprowad my pewne zmiany do komponentu task-list, modyfikuj c plik task-list.js znajduj cysi w folderze task-list. Zmodyfikowane fragmenty kodu zosta y pogrubione:

import {..., Inject} from '@angular/core';

// Tymczasowy serwis, z którego b dziemy pobierali zadania.import {TaskListService} from './task-list-service';

@Component({ ... // Ustaw TaskListService jako dostawc . providers: [TaskListService]})export class TaskList { // Wstrzyknij TaskListService i okre l dane do filtrowania. constructor(@Inject(TaskListService) taskListService) { this.taskListService = taskListService; this.taskFilterList = ['wszystkie', 'otwarte', 'wykonane']; this.selectedTaskFilter = 'wszystkie'; }





72

// Metoda zwraca przefiltrowan list zada na podstawie wybranego rodzaju filtrowania. getFilteredTasks() { return this.taskListService.tasks ?this.taskListService.tasks.filter((task) => { if (this.selectedTaskFilter === 'wszystkie') { return true; } else if (this.selectedTaskFilter === 'otwarte') { return !task.done; } else { return task.done; } }) : []; }

// Funkcja dodaj ca zadanie z widoku. addTask(title) { this.taskListService.tasks.push({ title, done: false }); }}

W cz ci dotycz cej importu pobieramy us ug listy zada . Wstrzykiwanie zale no ci pos u ydo faktycznego pobrania egzemplarza klasy TaskListService i przekazania go do konstruktorakomponentu. Wykorzystujemy w tym celu now adnotacj , która pozwala okre li typ wstrzyki-wanej zale no ci. Dekorator Inject importujemy z g ównego modu u Angulara, aby móc go u yw konstrukcji @Inject. Zauwa , e w przedstawionym powy ej kodzie przekazujemy do @Injecttyp obiektu, który chcemy wstrzykn .

Poza u yciem adnotacji @Inject w konstruktorze klasy musimy wykona jeszcze jedno zadanie,aby zapewni prawid owe dzia anie wstrzykiwania — niezb dna jest rejestracja TaskListServicejako dostawcy us ug za pomoc w a ciwo ci providers adnotacji @Component.

Utworzyli my kod, który otrzyma wstrzykni ty TaskListService w momencie konstruowaniadyrektywy. Referencj do niego mo emy przechowa we w a ciwo ci egzemplarza klasy.

W konstruktorze klasy chcemy równie okre li list stanów mo liwych do u ycia jako filtr. Listata pos u y te jako parametr wej ciowy listy prze czników. Przypomn , e w a ciwo wej ciowakomponentu listy przycisków akceptowa a element buttonList przyjmuj cy etykiet. Aby zapa-mi ta aktualnie wybrany filtr, u yjemy pola egzemplarza o nazwie selectedTaskFilter.

Ostatnim elementem, który dodamy do komponentu task-list, jest metoda getFilteredTasks().Zamiast przechowywa pe n list w polu egzemplarza, mo emy pobiera j na danie przyu yciu metody komponentu. Logika wewn trz metody sprawdza w a ciwo selectedTaskFilteri zwraca list przefiltrowan wed ug wybranego kryterium.





73

To wszystko, co chcieli my zmieni w implementacji komponentu. Musimy jeszcze doda listfiltrów, odpowiednio na ni reagowa i pobiera przefiltrowan list zada . W tym celu otwórzplik task-list.html w folderze task-list i zmodyfikuj go zgodnie z poni sz wersj :

<ngc-toggle [buttonList]="taskFilterList" [(selectedButton)]="selectedTaskFilter"></ngc-toggle><ngc-enter-task (taskEntered)="addTask($event)"></ngc-enter-task><ngc-task *ngFor="let task of getFilteredTasks()" [task]="task"></ngc-task>

Poniewa dodali my wcze niej komponent toggle do listy komponentów eksportowanych przezmodu komponentów interfejsu u ytkownika, mo emy go bez przeszkód u y w komponencie.Dowi zujemy w a ciwo wej ciow buttonList do listy taskFilterList przechowywanej w kom-ponencie. Wykorzystujemy równie dowi zanie dwukierunkowe, aby powi za w a ciwo wej-ciow selectedButton z polem selectedTaskFilter listy zada . W ten sposób mo emy nie tylko

ustawi warto pocz tkow listy z poziomu komponentu listy zada , ale równie otrzyma infor-macj o zmianie warto ci dokonanej na li cie przycisków.

Pozostaje jeszcze drobna zmiana w zawarto ci dyrektywy NgFor, aby pobiera przefiltrowanlist zada . Poniewa list przefiltrowanych zada udost pnia metoda getFilteredTasks(), to w a-nie jej u ywamy do pobrania aktualnej listy zada komponentu task-list.

I to wszystko! Pomy lnie dodali my filtrowanie listy zada i wykorzystali my komponent prze-cznika wykonany w poprzednim podrozdziale. Uruchom serwer poleceniem live-server i zobacz

w pe ni dzia aj c list zada umo liwiaj c dodawanie nowych zada i filtrowanie istniej cych.

Zrzut ekranu aplikacji z list zada zapewniaj c dodawanie nowych zada i ich filtrowanie





74

PodsumowanieW tym rozdziale omówi em wiele podstawowych koncepcji zwi zanych z budowaniem kompo-nentów interfejsu u ytkownika w aplikacji Angulara. Dodatkowo utworzyli my g ówny kompo-nent aplikacji do zarz dzania zadaniami, czyli list zada . Przedstawi em koncepcj w a ciwo ciwej ciowych i wyj ciowych oraz wykorzystanie ich do budowania dowi za dwukierunkowych.

Przedstawi em równie podstawy cyklu ycia komponentu Angulara, a w szczególno ci mo liwopodpi cia si pod krok wyst puj cy tu po wst pnej inicjalizacji komponentu.

Jako ostatni krok zintegrowali my komponent listy przycisków z g ówn list zada , aby uzyskamechanizm filtrowania. Ponadto przerobili my komponent task-list w taki sposób, aby u ywadodatkowej us ugi do pobierania listy zada . Wymaga o to zastosowania mechanizmu wstrzykiwa-nia zale no ci.




Skorowidz

Aadnotacja

@HostBinding, 109@HostListener, 109@Injectable, 109@ViewChild, 109

adresy URL, 141aktywno u ytkownika, 153, 156, 164, 175AMD, Asynchronous Module Definition, 267API modu ów dodatkowych, 285aplikacja do zarz dzania zadaniami, 46, 341architektura

komponentowa, 29modu owa, 281, 282modu ów dodatkowych, 284pluginów, 295

atrapaus ugi danych, 109subkomponentu, 328

automatyczne uzupe nianie, 244

Bbaza danych, 76BDD, Behavior-Driven Development, 314biblioteka

Chartist, 254, 267RxJS, 78

budowanie systemu komentarzy, 118

CCORS, Cross-Origin Resource Sharing, 311CSS, 161cykl ycia komponentu, 69czas, 225czasoch onno , 232czyste komponenty, 86czyszczenie danych w bazie IndexedDB, 342

Ddane, 76dekorator, 37

PluginConfig, 284, 286@HostListener, 153

dodawanieaktywno ci, 179osadzonych widoków, 218

dokumentacja, 313DOM, 29dowi zanie

dwukierunkowe, 65w a ciwo ci, 57

drzewo komponentównawigacyjnych, 101routingu, 136

DSL, 282dyrektywa

draggable, 208draggableDropZone, 208niesko czonego przewijania, 213




Skorowidz

346

dyrektywaPluginSlot, 285, 292przeci gania, 202RouterLink, 133, 148routerLinkActive, 134, 148RouterOutlet, 133, 148strefy upuszczania, 202, 205szablonu, 216

dziennik aktywno ci, 154, 156

EECMAScript, 36edytor, 110elementy

interfejsu u ytkownika, 62szablonowe, 28

emisja warto ci, 77encja danych etykiety, 184enkapsulacja, 19, 50, 56, 58

komponentów, 136etykiety

encje, 184generowanie, 185integracja us ugi, 190komponent edytora, 199mened er wpisywania, 194obs uga wpisywania, 193renderowanie, 188, 192tworzenie komponentu wyboru, 196tworzenie us ugi, 186w czenie dla zada , 230zarz dzanie, 184

Ffiltrowanie zada , 70Firefox

w czenie komponentów, 343format

CommonJS, 267SVG, 158XML, 158

formatowanie dat i czasu, 153framework Jasmine, 314frameworki interfejsu u ytkownika, 25funkcja

ngDoCheck(), 184, 215System.import(), 48

Ggenerowanie

adresów URL, 141etykiet, 185

grafika wektorowa, 158

Hhierarchia routera, 135HTML, 162

IIIFE, Immediately Invoked Function

Expression, 35implementacja

API modu ów dodatkowych, 285dyrektywy przeci gania, 202dyrektywy strefy upuszczania, 205routingu, 139

informacje o zwinnym zadaniu, 299instalowanie Chartist, 267integracja

listy etykiet, 199us ugi etykiet, 190

interakcjekomponentu, 333u ytkownika, 325

interaktywnysuwak aktywno ci, 164wykres, 277

interfejsypluginów, 283u ytkownika

bazuj ce na komponentach, 17frameworki, 25modu y dodatkowe, 284w asne elementy, 62

JJasmine, 314JavaScript, 33JSPM, 41, 48




Skorowidz

347

Kkamienie milowe, 225

konfiguracja, 244klasa, 34

AutoComplete, 318Plugin, 285PluginData, 285, 286PluginPlacement, 286ReplaySubject, 78ViewContainerRef, 290

kod startowy aplikacji, 52komentarze, 118, 122, 130komponent, 19, 23, 30, 75

automatycznego uzupe niania, 244checkbox, 67edytora, 110informacji o zwinnym zadaniu, 299interaktywnego suwaka, 153, 164komentarzy, 122listy zada , 208nawigacyjny, 101panelu projektów, 258podsumowania projektu, 259project-task-details, 296suwaka aktywno ci, 164, 175szczegó ów zadania, 301task-info, 296wyboru etykiet, 196wykresu, 264zak adek, 97

komponentyczyste, 86PluginComponent, 285SVG, 162wielokrotnego u ytku, 109

kompozycja, 22poprzez routing, 133, 134poprzez szablon, 133

kompozycyjno , 282konfiguracja

kamieni milowych, 244routingu, 146

Llegenda wykresu, 275lista zada , 53lukier sk adniowy, 33

MMathML, 162mechanizm

przeci gania, 202SMIL, 163SPI, 283wczytywania modu ów, 282wykrywania zmian, 184

mened er wpisywania etykiet, 194metoda

createComponent(), 291initialize(), 294loadPlugins(), 288

metody obiektu ViewContainerRef, 220modu , 35

AMD, 267aplikacji, 51RouterModule d, 133UMD, 267

modu y dodatkowe, 284

Nnadawanie

interaktywno ci wykresowi, 277SVG stylów, 160

nadpisywanie, 325narz dzia do testowania komponentów, 322, 325narz dzie

JSPM, 41Node.js, 40NPM, 40SystemJS, 41

natychmiastowe wykonywane wyra eniefunkcyjne, 35

nawigacja, 101, 106refaktoryzacja, 149

niesko czone przewijanie, 183, 213niezmienno , 84Node.js, 40NPM, 40

Oobiekt

ActivatedRoute, 133ViewContainerRef, 220, 290

obserwowalne struktury danych, 76




Skorowidz

348

obs ugaczasu, 225, 235, 243wpisywania etykiety, 193

oczyszczanie listy zada , 89odporno na nieoczekiwane zmiany, 313OOP, Object-Oriented Programming, 19operacja

anulowania, 115zapisu, 115

Ppakiet

@angular/common, 48@angular/compiler, 48@angular/core, 48@angular/platform- -browser-dynamic, 48text, 48typescript, 48

panel projektów, 257, 258PGML, 158pierwszy komponent, 31plik

app.js, 49bootstrap.js, 52config.js, 48index.html, 48, 52package.json, 47

plugin, 284wstawianie komponentów, 290

podsumowanie projektu, 253, 258, 259pole

wprowadzania czasu, 233wyboru, 62

poziom enkapsulacji, 56predykaty, 333programowanie

obiektowe, OOP, 19reaktywne, 76

projektowanie architektury modu owej, 281projekty w stylu zwinnym, 296przeci ganie, 202przeno no , 282przewijanie niesko czone, 183, 213przycisk

anulowania, 114edycji, 114prze czania, 62zapisu, 114

punktyrozszerze , 283wstrzykni cia interfejsu u ytkownika, 284

Rrdze , 283

Jasmine, 316refaktoryzacja, 133

listy zada , 95nawigacji, 149

renderowanieetykiet, 188znaczników aktywno ci, 169

reporter Jasmine, 316responsywne wykresy, 254rodzaje predykatów, 333router, 134routing, 133rozszerzalno , 282

systemu, 281rzutowanie

czasu, 167tre ci, 95

Sshadow DOM, 29, 153sk adnia z gwiazdk , 211SMIL, 163SPI, Service Provider Interface, 283standard SVG, 158standardy webowe, 27strategia

HashLocationStrategy, 141PathLocationStrategy, 141wykrywania zmian, 89

CheckAlways, 89Default, 89Detached, 89OnPush, 89

struktura graficzna, 161struktury danych, 76strumie aktywno ci, 153, 175subskrypcja elementu, 77suwak aktywno ci, 164SVG, Scalable Vector Graphics, 153, 158, 162




Skorowidz

349

systemkomentarzy, 118, 130nawigacji, 106pluginów, 335

SystemJS, 41szablon, 211

tekstu, 36szczegó y zadania, 226, 301szpiegowanie wyników dzia ania komponentu,

319

cie ka routingu, 140

Ttestowanie

detekcji zmian, 325interakcji komponentu, 333komponentów, 313, 322, 326systemu pluginów, 335widoku komponentu, 325zaawansowane komponentów, 330

transformacja, 77tworzenie

atrapy subkomponentu, 328dyrektywy, 223dziennika aktywno ci, 154, 156interfejsów u ytkownika, 17komponentu

automatycznego uzupe niania, 244edytora, 110panelu projektów, 258wyboru etykiet, 196wykresu, 264zak adek, 97

kompozycji, 75legendy wykresu, 275listy zada , 53mened era wpisywania etykiet, 194nowego folderu, 47pluginu, 305potoku, 109, 153responsywnych wykresów, 254strumienia aktywno ci, 175testu, 317

us ugi etykiet, 186widoków, 184wykresów, 256wykresu otwartych zada , 272za lepek, 325

TypeScript, 36

UUMD, Universal Module Format, 267unikanie niepotrzebnego kodu, 313uruchamianie

aplikacji, 52Jasmine, 316

us ugaActivityService, 269PluginService, 285, 286, 293

usuwanie osadzonych widoków, 218u ycie

komponentu edytora, 117w a ciwo ci editablecontent, 109

VVML, 158

Wwarstwa wizualna, 161wczytywanie pluginów, 308wej cie, 59widok szczegó ów zadania, 226wizualizacja otwartych zada , 269wizualne przedstawianie post pów, 240w a ciwo ci

CSS, 161wej ciowe, 57

w czeniekomponentów webowych, 343renderowania etykiet, 192

wprowadzanie czasu, 233wstawianie komponentów z pluginu, 290wstrzykiwanie

komponentów, 147w testach, 323zale no ci, 215, 284

wyj cie, 59




Skorowidz

350

wykres, 264aktywno ci, 257aktywno ci projektu, 253interaktywny, 277otwartych zada , 272, 277responsywny, 254tworzenie legendy, 275zada w projektach, 253, 257

wykrywanie zmian, 89w dyrektywie, 216

wy wietlanie listy, 211

Zzak adka, 97

Komentarze, 131zak adki wykorzystuj ce router, 147zale no , 48

ViewContainerRef, 220

zarz dzanieczasoch onno ci , 225, 232etykietami, 183, 184kamieniami milowymi projektu, 225pluginami, 305zadaniami, 45, 341

za lepki, 325zmiana kolejno ci, 183zmiany w dyrektywie, 216znaczniki aktywno ci, 169znak gwiazdki, 211zrzut ekranu aplikacji, 106




http://program-partnerski.helion.pl

Tytuł oryginału: Mastering Angular 2 Componentspdf.helion.pl/angtia/angtia.pdf · Wprowadzenie do...

Documents

Transcript of Tytuł oryginału: Mastering Angular 2 Componentspdf.helion.pl/angtia/angtia.pdf · Wprowadzenie do...