Diversity w polskim IT
John Au-Yeung
John Au-YeungFrontend Developer @ Rise Poeple

Wprowadzenie do szablonów Angulara

Sprawdź, w jaki sposób można posługiwać się szablonami we frameworku Angular.
29.04.20203 min
Wprowadzenie do szablonów Angulara

Angular jest popularnym frameworkiem firmy Google. Podobnie jak inne frameworki frontendowe wykorzystuje on architekturę opartą na komponentach do strukturyzacji aplikacji. W tym artykule przyjrzymy się składni szablonów Angulara.

Składnia szablonów

Szablony Angulara korzystają ze zmodyfikowanej składni HTML z angularowymi dodatkami. Prawie cała składnia HTML jest poprawna, z wyjątkiem tagu script. Tagi script są ignorowane, ale jeśli się w składni znajdą, to pojawi się ostrzeżenie. 

Interpolacja i wyrażenia szablonowe

Wyrażenia JavaScriptu mogą być interpolowane w szablonach przez umieszczanie ich między podwójnymi nawiasami klamrowymi. Możemy, na przykład, napisać:

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string = "foo";
}

app.component.html:

{{name}}

Wyświetla to pole name z AppComponent w naszym szablonie. Powinniśmy zobaczyć na ekranie słowo „foo”. Angular ewaluuje wartość pola name, a następnie zastępuje placeholder daną wartością. Możemy również umieścić tam wyrażenia. Możemy, na przykład, napisać:

{{1 + 1}}

i widzimy wyświetlaną liczbę 2.

Możemy wywołać metodę z komponentu w następujący sposób:

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  getName() {
    return "foo";
  }
}

app.component.html:

{{getName()}}

W powyższym kodzie otrzymujemy wartość zwróconą przez getName wyświetlaną na ekranie.

Następnie na ekranie pojawia się „foo”. Możemy zmienić znaki, w których zawiera się interpolowane wyrażenie z podwójnych nawiasów klamrowych, ustawiając opcję interpolation w obiekcie, który przekazujemy do dekoratora @Component. Możemy też zmienić interpolowany ogranicznik na pojedyncze nawiasy kwadratowe, pisząc:

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  interpolation: ["[", "]"]
})
export class AppComponent {
  getName() {
    return "foo";
  }
}


app.component.html:

[getName()]

Następnie nadal wyświetla się „foo” zgodnie z oczekiwaniami.

Wyrażenia szablonowe

Wyrażenia szablonowe (ang. template expressions) zwracają wartość i pojawiają się w podwójnych nawiasach klamrowych. Wynik wyrażenia zostanie przypisany do właściwości tzw. binding target. Tym celem może być element HTML, komponent lub dyrektywa. Nie możemy mieć wyrażeń, które powodują następujące skutki uboczne:

  • przypisania (na przykład, = , *= , …)
  • operatory typu new, typeof, instanceof itd.
  • kilku następujących po sobie wyrażeń z ; albo ,
  • Operatory inkrementacji i dekrementacji ++ oraz --
  • Kilka innych operatorów ES2015+


Operatory bitowe (np.  | , ? czy !)  również nie są obsługiwane. 

Kontekst wyrażenia

Kontekstem wyrażenia jest zazwyczaj instancja komponentu. Na przykład, jeśli mamy:

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  getName() {
    return "foo";
  }
}

oraz app.component.html:

{{getName()}}

AppComponent jest potem kontekstem wyrażenia, getName odnosi się do metody getName w AppComponent.

Kilka słów o wyrażeniach 

Wyrażenia powinny być proste. Jeśli mamy do czynienia ze złożoną logiką, powinno się to znajdować w komponencie. Wyrażenia powinny też działać szybko, aby nie spowalniały naszej aplikacji. Wyrażenia nie powinny też zmieniać żadnego innego stanu aplikacji niż wartość właściwości docelowej. Widok powinien być stabilny podczas jednego renderowania.

Co więcej, wyrażenia powinny być wolne od skutków ubocznych. Idempotentne wyrażenie jest zatem idealne, ponieważ spełnia powyższe kryteria. Wyjątkiem jest jednak wyrażenie *ngFor. Posiada ono funkcję trackBy, która może poradzić sobie z referencyjną nierównością obiektów podczas iteracji po nich.

Instrukcje szablonowe

Instrukcja szablonowa (ang. template statement) jest odpowiedzią na zdarzenie wywołane przez binding target, taki jak element, komponent lub dyrektywa. Mają one skutki uboczne, ponieważ zmieniają pola w komponencie. Poniżej znajduje się przykład instrukcji szablonowej:

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  showText: boolean = false;
  toggle() {
    this.showText = !this.showText;
  }
}

app.component.html:

<button (click)="toggle()">Toggle</button>
<p *ngIf="showText">foo</p>

W powyższym kodzie toggle() w app.component.html jest przykładem instrukcji szablonowej, ponieważ wywołuje metodę toggle w AppComponent w celu zmiany wartości this.showText. Robi to, reagując na kliknięcia. Kod JavaScript, który nie jest dozwolony w wyrażeniach, nie jest również dozwolony w instrukcjach.

Podsumowanie

Szablonów używamy do wyświetlania danych z komponentów i akceptowania danych wejściowych użytkownika. Składają się one ze składni HTML oraz wyrażeń i instrukcji szablonów, które są kodem JavaScript uruchamianymi z kodu przypominającego HTML.


Oryginał tekstu w języku angielskim możesz przeczytać tutaj

<p>Loading...</p>