Framework Angular4 Alicja Frankowicz Weronika Węglińska
Angular Pierwszym wydaniem Angulara był Angular1, zwany także AngularJS. Opierał się on na języku JavaScript oraz na wzorcu MVC wdrożonego do aplikacji internetowych w celu ułatwienia ich rozwoju i testowania. We wrześniu 2014 roku wydano wersję Angular2, która niosła ze sobą wiele zmian w odniesieniu do poprzednika. Ta wersja bazuje na architekturze komponentów i serwisów oraz na języku TypeScript. Nie zapewniono kompatybilności wstecznej. Angular4 wydany w marcu 2017 roku jest bardzo podobny do Angulara2 i zapewnia dla niego kompatybilność wsteczną. Różni się kilkoma nowymi funkcjonalnościami.
Przygotowanie do użycia Do zainstalowania Angulara4 potrzebujemy: Nodejs > 4 Npm > 3 Angular CLI IDE
Komendy Angular CLI Do zainstalowania CLI, stworzenia nowego projektu oraz odpalenia serwera potrzebowaliśmy poniższych komend. npm install -g @angular/cli ng new Angular my-dream-app cd my-dream-app ng serve ng serve --host 0.0.0.0 port 4205
TypeScript
Komponenty Komponenty to klasy współdziałające z plikami html, które to są wyświetlane w przeglądarce.
Komponenty Podczas tworzenia projektu został za nas stworzony pierwszy komponent o nazwie AppComponent, który jest głównym komponentem w aplikacji. Inne tworzone przez nas komponenty będą dla niego komponentami dziećmi. CLI udostępnia nam komendę do tworzenia komponentów: ng generate component new-cmp (ng g c new-cmp) Użycie tej komendy skutkuje stworzeniem nowego folderu newcmp we wnęrzu folderu app. Oraz czterech plików w jego wnętrzu: new-cmp.component.css new-cmp.component.html new-cmp.component.spec.ts new-cmp.component.ts
Komponenty Plik new-cmp.component.ts
Komponenty Zmiany w pliku app.module.ts
Komponenty Stworzony plik new-cmp.component.html
Komponenty Teraz komponent można używać w plikach html innych komponentów poprzez użycie nazwy podanej jako selector. Zamieszczenie takiego tagu na przykład na końcu głównego komponentu daje nam rezultat:
Data Binding
String Interpolation Wyrażenie umieszczone w nawiasach klamrowych musi być konwertowalne do typu String. Więc znaleźć się w nich może zwykły napis, odniesienie do jakiegoś atrybutu z komponentu czy wywołanie funkcji.
Property Binding Umożliwia nam kontrolowanie wartości atrybutów dla elementów html. Na przykład gdy chcemy mieć kontrolę nad tym czy przycisk ma działać czy też ma być wyszarzony albo nad tekstem, który się na nim pojawia. Mając w komponencie zmienną można użyć jej jako wartości dla atrybutu w pliku html.
Two Way Binding Ten sposób wykorzystujemy na przykład w sytuacji kiedy chcemy jednocześnie pobierać i ustawiać wartość jakiegoś pola komponentu. Używamy w tym celu dekoratora ngmodel. Do jego wykorzystania konieczne jest zaimportowanie FormsModule, co przy użyciu CLI stało się już automatycznie.
Dyrektywy Dyrektywy to klasy, które pozwalają na zmienianie elementów strony w zależności od zawartych w nich instrukcji. Tworzone są przez wykorzystanie dekoratora @Directive, który to pozwala na określenie jedynie atrybutu selector. Możemy stworzyć dyrektywę przy pomocy polecenia CLI ng generate directive change-text-directive (ng g d change-textdirective)
Dyrektywy Zmiany w pliku app.module.ts
Dyrektywy Plik change-text.directive.ts oraz jego modyfikacje.
Dyrektywy W pliku app.component.html umieszczono.
Dyrektywy strukturalne - *ngif NgIf jest dyrektywą strukturalną, która może dodawać lub nie, elementy i ich potomstwo w strukturze DOM w czasie wykonywania programu. NgIf opiera się na wartości true lub false danego wyrażenia. Jeśli warunek zwraca true, element zostanie dodany do struktury DOM, jeśli warunek zwraca false, element ten się nie pojawi.
Dyrektywy strukturalne - *ngif-else W naszym przykładzie else używamy w przypadku gdy chcemy coś wyświetlić jeśli jakiś wcześniejszy warunek nie został spełniony. Dla bloku else musimy używać elementu <ng-template>. Odnosimy się do niego przy użyciu zmiennej referencyjnej. W rzeczywistości element ten może być napisany w dowolnym miejscu szablonu HTML, jednak dobrą praktyką jest umieszczanie go po ngif dla czytelności. Elementy wyświetlane przy spełnieniu warunku z if również możemy umieścić w elemencie <ng-template>, wtedy jednak używamy jeszcze polecenia then.
Dyrektywy strukturalne - *ngfor NgFor tworzy instancję elementu szablonu dla każdego elementu w iteracji. Można tej dyrektywy używać z elementami html lub z <ng-template>.
Dyrektywy atrybutów- ngstyle Tego rodzaju dyrektywy nie mogą być używane do manipulacji strukturą DOM, są one zaś używane do manipulacji elementem samym w sobie dla, którego je zastosowano.
Dyrektywy atrybutów- ngclass Klasa ta pozwalana na automatyczne przydzielanie styli CSS do elementów. Tym razem również przekazujemy obiekt JS. W obiekcie tym klucze to nazwy styli, a wartości to true lub false, które mówią nam o tym czy klasa powinna zostać dołączona do elementu czy też nie.
Routing Routing oznacza nawigację między stronami. Tutaj strony, do których się odnosimy posiadają formę komponentów. Aby wykorzystać routing do komponentu należyw komponencie głównym app.module.ts zaimportować moduł router. Moduł ten należy załączyć w importach jak poniżej.
Routing Chcemy aby zawartość pliku new-cmp.component.html była pokazywana, kiedy klikniemy odpowiedni link w głownym module. W tym celu do pliku app.component.html musimy tag z linkiem do danego routera. Konieczne jest także dodanie tagu <router-outlet> do pliku, który umożliwia wyświetlanie zawartości pliku new-cmp.component.html kiedy użytkownik kliknie New component.
Serwisy Celem serwisów jest uwspólnienie pewnych fragmentów kodu, które są potrzebne w wielu miejscach projektu. Używając serwisów możemy mieć dostęp do ich metod i właściwości w innych komponentach i całym projekcie. W celu stworzenia serwisu możemy skorzystać z metody CLI. ng generate service myservice (ng g s myservice ) Stworzone pliki to myservice.service.spec.ts i myservice.service.ts. Dekorator Injectable oznacza, że klasa może być użyta przy wsztrzykiwaniu zależności.
Serwisy Stworzony serwis musimy załączyć w głównym pliku app.module.ts. Tą samą klasę umieszczamy również w sekcji providers w obiekcie JS przekazywanym do dekoratora NgModule.
Serwisy Do serwisu dodajemy przykładową funkcję i pole.
Serwisy Serwis wykorzystujemy w jednym ze stworzonych komponentów, chociaż w praktyce może to też być komponent główny, wtedy robimy to analogicznie.
Serwisy W pliku new-cmp.component.html umieszczono
Realizacja zadania Stworzenie projektu: ng new angular-app cd angular-app ng serve
Stworzenie komponentu W cmd wpisać: ng g c testc W pliku app.component.html usunąć domyślnie wygenerowaną zawartość i umieścić: <h3>app Component<h3> <app-testc></app-testc>
Stworzenie komponentu W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: hellotext = "hello"; Do zawartości pliku testc.component.html dodać: <p> {{ hellotext }} </p>
Property binding W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: allowclick = true; Do zawartości pliku testc.component.html dodać: <button [disabled]="!allowclick">button</button>
Event binding W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: clicktext = "not clicked"; Oraz zaimplementować funkcję: onclickfunc() { this.clicktext = "clicked"; this.allowclick = false; } Poprzednio stworzony button w pliku testc.component.html zmodyfikować w następujący sposób i dodać linijkę zawierającą interpolację: <button [disabled]="!allowclick" (click)="onclickfunc()">button</button> {{ clicktext }}
Two way binding W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: testtext= ""; Do zawartości pliku testc.component.html dodać: <input type="text" [(ngmodel)]="testtext"/> <br> {{ testtext }} Uwaga: Dodać import w testc.component.ts i app.module.ts: import { FormsModule } from '@angular/forms'; Oraz dodać zależności do listy imports w dekoratorze NgModule w pliku app.module.ts FormsModule
Dyrektywy: ngif W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: show = false; Oraz zaimplementować funkcję: showcontent() { this.show =!this.show; } Do zawartości pliku testc.component.html dodać: <button (click)="showcontent()">button</button> <div *ngif="show; else elsecontent"> <p>if show = {{show}}</p> </div> <ng-template #elsecontent> <p>else show = {{show}}</p> </ng-template>
Dyrektywy: ngfor W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: arr = ["one", "two", "three", "four"]; Do zawartości pliku testc.component.html dodać: <ul> <li *ngfor="let elem of arr"> {{elem }} </li> </ul>
Serwisy Stworzyć folder people a w nim plik: people.service.ts z następującą zawartością: import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable() export class PeopleService { constructor(private http: Http) { } getpeople(){ return [ {'name': 'John', 'age':21}, {'name': 'Anna', 'age':22}, {'name': 'Kate', 'age':34}, {'name': 'Mark', 'age':18}, {'name': 'Steve', 'age':29} ] } }
Serwisy Zmiany w app.module.ts: Dodanie importów: import { HttpModule } from '@angular/http'; import { PeopleService } from './people/people.service'; oraz dodanie zależności do listy imports: HttpModule
Serwisy W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: people = []; Zmodyfikować konstruktor (stworzyć instancję peopleservice) constructor(private peopleservice: PeopleService) {} Wywołać funkcję getpeople z serwisu peopleservice w funkcji ngoninit ngoninit() { this.people = this.peopleservice.getpeople(); } Dodanie do dekoratora Component klasy TestcComponent providers: [PeopleService]
Serwisy Dodanie importu w pliku testc.component.ts import { PeopleService } from '../people/people.service'; Do zawartości pliku testc.component.html dodać: <ul> <li *ngfor="let elem of people"> {{elem.name}} </li> </ul>
Serwisy - GET W ciele klasy PeopleService znajdującej się w pliku people.service.ts zaimplementować funkcję: gettime() { return this.http.get("http://date.jsontest.com"); } W ciele klasy TestcComponent znajdującej się w pliku testc.component.ts stworzyć zmienną: currentdate = null; i zmodyfikować funkcję ngoninit w następujący sposób: ngoninit() { this.people = this.peopleservice.getpeople(); this.peopleservice.gettime().subscribe( data => { this.currentdate = data.json();} ); } Do zawartości pliku testc.component.html dodać: <p> {{ currentdate.time }} {{ currentdate.date }} </p>
Routing Stworzenie nowego komponentu przez cmd ng g c testr W pliku app.module.ts poza klasą AppModule dodać zmienną approutes const approutes: Routes = [ { path: '', component: TestcComponent, pathmatch: 'full'}, { path: 'testr', component: TestrComponent }, { path: '**', redirectto: '/', pathmatch: 'full'} ]; Oraz dodać import: import { RouterModule, Routes } from '@angular/router' A w liście imports w dekoratorze NgModule dodać: RouterModule.forRoot(appRoutes)
Routing Plik app.component.html zmodyfikować w następujący sposób: <h3>app Component<h3> <router-outlet></router-outlet>
Przykładowy formularz Stworzenie folderu models, a w nim pliku person.ts o następującej zawartości export class Person { } constructor( public name: string, public age: number ) { }
Przykładowy formularz W ciele klasy PeopleService znajdującej się w pliku people.service.ts zaimplementować funkcję: sendperson(person) { console.log(person); }
Przykładowy formularz Klasę TestrComponent znajdująca się pliku testr.component.ts zmodyfikować w następujący sposób: import { Component, OnInit } from '@angular/core'; import { PeopleService } from '../people/people.service'; import { Person } from '../models/person'; @Component({ selector: 'app-testr', templateurl: './testr.component.html', styleurls: ['./testr.component.css'], providers: [PeopleService] }) export class TestrComponent implements OnInit { model = new Person('', 0); } constructor(private peopleservice: PeopleService) { } ngoninit() { } onsubmit() { this.peopleservice.sendperson(this.model); }
Przykładowy formularz Plik testr.component.html zmodyfikować w następujący sposób: <form form (ngsubmit)="onsubmit()"> <div class="form-group"> <label for="name">name</label> <input [(ngmodel)]="model.name" type="text" id="name" name="name"required> </div> <div class="form-group"> <label for="age">age</label> <input [(ngmodel)]="model.age" type="number" id="age" name="age"> </div> <button type="submit">submit</button> </form>