docLaboratorium 10 – Angular 2
download 
Reklamacja Transkrypt
Laboratorium 10 – Angular 2
Laboratorium 10 – Angular 2
Zadanie 1 – Hello World w Angular 2
Utworzyć projekt w Angular 2 wyświetlający w przeglądarce napis „Hello World”.
Warto wykorzystać:
• https://angular.io/docs/ts/latest/quickstart.html – oryginalny tutorial
• http://icis.pcz.pl/~rperlinski/?m=a2 – po polsku, dużo mniej czytania
Następnie proszę pozmieniać domyślne nazwy na poniższe (m.in. w pliku systemjs.config.js):
• helloApp – nazwa pakietu z głównym komponentem naszej aplikacji,
• fApp – folder, w którym będzie nasz główny komponent, nasza aplikacja,
• hello.component.ts – nazwa modułu z głównym komponentem naszej aplikacji,
• HelloComponent – nazwa naszego komponentu,
• <hello> – nazwa znacznika w szablonie naszego komponentu.
No i niech zamiast „Hello World” coś innego się wyświetla.
Takie różne nazwy, żeby dokładnie zrozumieć, jak wczytywane są komponenty, importowane
moduły, jak jest uruchamiana aplikacja. To ważne.
Zadanie 2
Utworzyć klasę Student zawierającą trzy atrybuty: imie, nazwisko, ocena.
Zależnie od uzyskanej oceny (mniej lub przynajmniej 3.0) na stronie wyświetla się odpowiedni opis:
Student Marek Nowak nie ma zaliczenia z przedmiotu Web 2.0.
Student Marek Nowak ma zaliczenie z przedmiotu Web 2.0. Uzyskana ocena: 4.5.
Ocena pojawia się tylko w wypadku uzyskana zaliczenia.
Wykorzystać ngIf, operator warunkowy i odwrotny apostrof (`).
Zadanie 3 – ngFor, ngIf
Tworzymy tablicę kilku studentów, np. ośmiu:
{imie:"Konrad", nazwisko:"G.", ocena:3.0},
{imie:"Krzysztof", nazwisko:"J.", ocena:5.0},
{imie:"Agnieszka", nazwisko:"Z.", ocena:4.5},
{imie:"Oskar", nazwisko:"M.", ocena:2.0},
…
Wyświetlamy listę studentów. Studenci z oceną mniejszą niż 3 powinni być wyróżnieni.
Po kliknięciu studenta na liście powinna być możliwość zmiany jego oceny. Przykład:
Zadanie 4 – dwa niezależne komponenty
Proszę utworzyć drugi komponent HelloComponent wyświetlający „Hello World” i wyświetlić go
na stronie korzystając z innego znacznika z nim skojarzonego, np.:
<body>
<hello>Wczytywanie...</hello>
<student>Wczytywanie...</student>
</body>
W main.ts wywołujemy
dwa niezależne komponenty.
Zadanie 5 – dwa zależne komponenty
Tworzymy komponent WorldComponent, który będzie wykorzystany w HelloComponent.
Strona wyświetla HelloComponent, a ten wyświetla WorldComponent.
W komponencie HelloComponent importujemy moduł z komponentem WorldComponent.
W szablonie wykorzystujemy odpowiedni znacznik. Informujemy też Angular, że mamy nową
dyrektywę poprzez tablicę directives zawierającą nazwę komponentu ze zgłaszaną nową
dyrektywą:
@Component({
selector: 'hello-comp',
template: `
<h2>Hello komponent</h2>
<world-comp>Wczytywanie...</world-comp>
`,
directives: [WorldComponent]
})
Zadanie 6 – dwa zależne komponenty przekazujące sobie dane
Można skorzystać z: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html
Podzielić komponent wyświetlający studentów i pozwalający zmieniać im oceny na dwa osobne
komponenty, np.: StudentsComponent i StudentDetailsComponent.
Lista studentów zostaje w tym samym, nadrzędnym komponencie, a szczegóły informacji o studencie
i zmianę jego oceny proszę przenieść do komponentu podrzędnego.
