Please enable JavaScript.
Coggle requires JavaScript to display documents.
ANGULAR (ZAGNIEŻDŻANIE KOMPONENTU (przesyłanie danych z komponentu dziecka…
ANGULAR
ZAGNIEŻDŻANIE KOMPONENTU
- wyciąć fragment kodu html
- zaimportować dekorator Input - importuje dane z komponentu rodzica
- przesłać dane do komponentu zagnieżdżonego z komponentu rodzica
<cs-total-cost [totalCost]="totalCost" ></cs-total-cost>
- encapsulation: ViewEncapsulation.None - wszystkie style komponentu są widoczne globalnie
przesyłanie danych z komponentu dziecka do komponentu rodzica - dekorator Output
Output() shownGross: EventEmitter<string> = new EventEmitter<string>();
-
ViewChild - wykonanie referencji do komponentu zagnieżdżonego i sięgać po jego metody
ROUTING
-
-
- Import RouterModule.forRoot([
{path: 'cars', component: <any>CarsListComponent}
])
- <router-outlet></router-outlet> w app.component.html
-
przekierowanie:
{path: '', pathMatch: 'full', redirectTo: 'cars'},
-
Framework do tworzenia aplikacji (MVC: Model ,View, Controller)
MODUŁY
- strukturyzują kod aplikacji
- moduł odpowiada za jakąś konkretną część aplikacji
KOMPONENTY
- widok aplikacji budujemy z komponentów
- nad klasą komponentu definiujemy jego metadane
DYREKTYWY
- dyrektywę nakładamy na element HTML
- dyrektywa modyfikuje zachowanie elementu na widoku np. dodaje klasę w zależności od warunku logicznego
- najbardziej popularne wbudowane dyrektywy: ngFor, ngIf, [ngClass], [ngStyle]
- możemy tworzyć własne dyrektywy
-
-
*ngIf = "cars.length > 0; else noCarsInfo" - ukrywanie elementów w widoku<ng-template #noCarsInfo></ng-template>
-
DATA BINDING
- na widoku możemy wyświetlać tylko dane zadeklarowane jako pola klasy
- używamy interpolacji do wyświetlania danych
- event w nawiasach
SERWIS
- klasa która dostarcza dane do komponentu, które pobiera z serwera za pomocą metod HTTP (get, post, put, delete)
- jeśli chcemy skorzystać z serwisu to wstrzykujemy go do konstruktora klasy komponentu
- dekorator Injectable umożliwia wstrzykiwanie serwisów do innych serwisów
PIPES
- służy do formatowania danych na widoku
PROJEKT
Instalacja bootstrapa:
- npm install bootstrap --save-dev
- podpiąć w angular.json
- Tworząc nowy moduł należy go dodać do app.module, a komponenty z tego modułu należy wyeksportować
-
Przygotowania
- Instalacja node.js
node -v
npm -v
Angular CLI - narzędzie, które udostępnia nam zbiór poleceń do budowania i testowania aplikacji budowanej we frameworku Angular (v2+), komendy wywołujemy w terminalu
-
-
TypeScript
- nadzbiór języka JavaScript: rozszerza JS
- silnie typowany
- ułatwia programowanie obiektowe w JS: udostępnia klasy i interfejsy
- posiada wiele funkcjonalności z ES6 (np. arrow function)
- W construktorze nadajemy stan początkowy klasy (początkowe metody)
- pola klasy i metody
- let i const zamiast var w metodach
- arrow function
-
-
SERWISY
-
TWORZENIE
- metoda getCars(): Observable<Car{}> {
return this.http.get("http://localhost:3000/api/cars")
.pipe(map((res) => res.json()));
} + import { map } from 'rxjs/operators';
-
-
- wstrzyknięcie serwisu http:
constructor(private http: Http) {} + import Http
- W klasie komponentu piszemy metodę:
loadCars(): void {
this.carsService.getCars().subscribe((cars) => {
this.cars = cars;
})
- Wstrzykujemy serwis do konstruktora w klasie komponentu:
constructor(private: carService: CarService) {} + import serwisu
- ngOnInit() {
this.loadCars();
}
- templatka:
dodanie do warunku *ngIf tablicy cars && cars.length >0
- Zarejestrowanie serwisu w app.module i import HttpModule
- Dodanie znaku zapytania przed każdą propercją w templatce
- Wkleić metodę countTotalCost do metody loadCars
MODUŁY SHARED I CORE
sharedModule - dla reużywalny komponent wiele instancji (powtórzony selektor komponentu)
coreModule - sidebar, komponenty które maja jedną instansję w aplikacji
zaimportować moduł coreModule do app.module, a sharedModule do cars.module
wyeksportować komponenty z modułów
HEADER
komponent z projekcją (transkluzją) - zagnieżdżanie kodu html pomiędzy selektorami komponentu
<ng-content select="[levels]"></ng-content> slot w szablonie komponentu
<cs-header><p levels>cars</p>
</cs-header>