ANGULAR
Tworzymy aplikację
Do zainstalowania Typescript i Angulara potrzebujesz środowiska NodeJS.
Instalacja:npm install -g @angular/cli
Po utworzeniu wpisz w linii komend:
ng new nazwa_aplikacji
Może to zająć kilka chwil. Po utworzeniu, przejdź do nazwa_aplikacji i uruchom w terminalu:ng serve --open
Zbudowanie aplikacji w wersji dystrybucyjnej:
ng build
Tworzy on aplikację w czystym Javascript w katalogu dist/nazwa_aplikacji/ . Zwróć uwagę na generowany w pliku index.html wpis: <base href="/">. Zakłada on, że strona będzie uruchamiana z katalogu głównego (/).:
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
</head>
<body>
<app-root></app-root>
<script>
// tu jest umieszcany wygenerowany kod
</script>
</body>
</html>
<app-root> jest komponentem aplikacji, który jest wywoływany, i to jest ten komponent, który wyrenderuje na ekranie. Sekcja <script></script> tworzona jest dopiero w czasie budowania aplikacji - nie ma jej we wzorcu strony.
Budujemy komponent
W katalogu src/app zbudujmy komponent na wzór wygenerowanego app.component - powielając przykład planszy do gry w kółko i krzyżyk. Nazwijmy ten komponent xo.component. W konsekwencji implementację zapisujemy w pliku src/app/xo.component.tx:
import { Component } from '@angular/core';
@Component({
selector: 'xo-selector',
template : `<table className="plansza">
<tbody>
<tr>
<td x="0" y="0"> {{ xo[0] }} </td>
<td x="1" y="0"> {{ xo[1] }} </td>
<td x="2" y="0"> {{ xo[2] }} </td>
</tr>
<tr>
<td x="0" y="1"> {{ xo[3] }} </td>
<td x="1" y="1"> {{ xo[4] }} </td>
<td x="2" y="1"> {{ xo[5] }} </td>
</tr>
<tr>
<td x="0" y="2"> {{ xo[6] }} </td>
<td x="1" y="2"> {{ xo[7] }} </td>
<td x="2" y="2"> {{ xo[8] }} </td>
</tr>
<tr>
<td colSpan="3">{{ stanGry }} </td>
</tr>
</tbody>
</table>
`,
styleUrls: ['./xo.component.css']
})
export class XoComponent {
stanGry='KÓŁKO I KRYŻYK';
xo = [' ',' ',' ',' ',' ',' ',' ',' ',' '];
}
W pliku xo.component.css umieszczamy style dla naszej planszy (można przekopiować z przykładu w React). Zamiast szablonu w postaci własności template możemy użyć własności templateUrl wskazującej na zewnętrzny plik xo.template.html:
templateUrl: './xo.component.html',
Użyliśmy selektora selector: 'xo-selector', aby przy okazji pokazać możliwość tworzenia strony z wielu komponentów. Nasz główny plik wzorca strony uzupełniamy o ww selektor:
<body>
<app-root></app-root>
<xo-selector></xo-selector>
</body>
Ostatnią rzeczą jaką musimy zrobić, to wskazać Angularowi powiązanie między aplikacją na użytym selektorem. Zmieniamy w tym celu definicję modułu w pliku src/app/app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { XoComponent } from './xo.component';
@NgModule({
declarations: [
AppComponent,
XoComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent, XoComponent]
})
export class AppModule { }
Jak widać importujemy komponent, a następnie dodajemy go do deklaracji oraz listy komponentów potrzebnych w chwili startu (bootstrap).
Uzyskujemy oczekiwany efekt - planszę 3x3.
Obsługa zdarzeń
Zmieńmy nieco nasz komponent - tak, aby obsłużyć zdarzenie onclick (kliknięcie):
export class XoComponent {
stanGry: string ='KÓŁKO I KRYŻYK';
public xo: Array<string>;
constructor() {
this.xo = [' ',' ',' ',' ',' ',' ',' ',' ',' '];
}
public click(event, n, item) {
alert('Kliknąłem ['+n+']:' + item);
}
}
Po wywołaniu metody click - wyświetli się komunikat potwierdzający poprawne wywołanie.
Musimy dodać takie wywołanie do każdej komórki naszej planszy:
<tr>
<td x="0" y="0" (click)="click($event, 0, xo[0])"> {{ xo[0] }} </td>
<td x="1" y="0" (click)="click($event, 1, xo[1])"> {{ xo[1] }} </td>
<td x="2" y="0" (click)="click($event, 2, xo[2])"> {{ xo[2] }} </td>
</tr>
<tr>
<td x="0" y="1" (click)="click($event, 3, xo[3])"> {{ xo[3] }} </td>
<td x="1" y="1" (click)="click($event, 4, xo[4])"> {{ xo[4] }} </td>
<td x="2" y="1" (click)="click($event, 5, xo[5])"> {{ xo[5] }} </td>
</tr>
<tr>
<td x="0" y="2" (click)="click($event, 6, xo[6])"> {{ xo[6] }} </td>
<td x="1" y="2" (click)="click($event, 7, xo[7])"> {{ xo[7] }} </td>
<td x="2" y="2" (click)="click($event, 8, xo[8])"> {{ xo[8] }} </td>
</tr>
To powinno wystarczyć, aby kliknięcie w komórce planszy wywołało komunikat.
Jednak nam chodzi o to, by stan planszy się zmieniał, a nie tylko o śledzenie kliknięć. W Angularze jest to jeszcze prostsze niż w React. Nowa implementacja funkcji click():
public click(event, n, item) {
let newitem : string = ' ';
if (item==' ') newitem='x'
else if (item=='x') newitem='o';
this.xo[n]=newitem;
}
Angular jest dużo bardziej rozbudowanym frameworkiem, niż React. Pełny opis wykracza znacznie poza ramy niniejszej publikacji (w następnym rozdziale opisano jeszcze integrację z Redux).