Witam serdecznie, dziś będziemy zgłębiać Angularowe pliki aplikacji, czyli miejsca gdzie będziemy spędzać 95% czasu pisząc kod. Zobaczymy jak komponent zależy od modułu, gdzie trzymamy pliki ścieżki css/scss, czy widoki komponentu, oraz jak to wszystko spiąć ze sobą.
Zaczynamy…
1. Opis plików
Cały nasz widok aplikacji mieści sie w folderze:
src/app
Mamy tam 5 plików:
– app.component.html – w tym pliku jest widok naszego komponentu, jest to główny komponent aplikacji. W dalszej pracy będzie więcej takich komponentów i zawsze w pliku html będzie trzymany nasz widok.
– app.component.scss – tutaj trzymamy pliki scss do naszego widoku (pamiętać należy że są to pliki do danego komponentu )
– app.component.spec.ts – tutaj są testy
– app.component.ts – plik TypeScript to główny plik w którym będzie znajdowała się obsługa naszego widoku, będzie on przekazywał dane i informacje do naszego widoku. Jest to jakby podstawowy blok który buduje aplikacje.
– app.module.ts – główny moduł naszej aplikacji
Główny komponent w Angularze będzie zawierał szereg komponentów podrzędnych, które będą powstawać, więc będzie się tworzyć niejako „drzewo” takich komponentów. (Oczywiście komponenty mogą nazywać się dowolnie np widok1.component.ts, jednak dobrą praktyką jest nadawanie nazw komponentom, związaną z ich funkcją, a także trzymanie ich w jednym katalogu.)
Oczywiście komponenty mogą być pisane ręcznie, co na początku jest dobrym wyborem, jednak w tym tutorialu będziemy się posługiwać narzędziem Angular CLI i będzie on nam w tym pomagał.
Spójrzmy na początek na nasz plik index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>FoodCalc</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet" /> <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" /> </head> <body> <app-root></app-root> </body> </html>
W tym pliku mamy dość nietypowy znacznik:
<app-root></app-root>
Jest to znacznik, którego przeglądarka nie potrafi zinterpretować (tak jak na przykład <section>, <p>, <header> etc.). I tu z pomocą przychodzi nam Angular wraz ze swoimi komponentami. Komponenty pokazują przeglądarce w jaki sposób ma taki znacznik wykonywać i co z nim robić. Nie jest to jednak żadne słowo kluczowe w Angularze, tylko nazwa głównego komponentu, którą możemy zmienić na dowolną.
Przejdźmy do pliku app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'foodCalc';
}
Zauważmy tutaj, że w polu „selector” mamy podaną nazwę naszego komponentu czyli „app-root”. Jeśli go zmienimy, to znaczy jego nazwę, to aby aplikacja zadziałała, musimy także zmienić ją w pliku index.html. Żeby jednak ten komponent był rozpoznawany przez Angulara jako nasz główny, musimy zrozumieć jeszcze parę rzeczy. Mianowicie, zobaczmy do pliku app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule } from '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatMenuModule,
MatCardModule,
MatToolbarModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Jest to moduł głowny aplikacji. Zauważmy, że w tym module importujemy AppCopmponent z naszego głównego komponentu:
import { AppComponent } from './app.component';
Ponieważ stworzyliśmy taką klasę w głównym komponencie (app.component.ts) poleceniem:
export class AppComponent
Idąc dalej, w module musimy zadeklarować komponent AppComponent w linijce:
@NgModule({
declarations: [
AppComponent
],
oraz należy zadeklarować go jako opcja bootstrap w kodzie:
bootstrap: [AppComponent]
Teraz kiedy podejrzymy plik main.ts mieszczący się poza katalogiem app/src, a będący w katalogu z naszą aplikacją
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
zobaczymy tam, że jest pobrany taki mechanizm który nazywa się platformBrowserDynamic
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
a w linijce:
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
ten mechanizm pozwala nam uruchomić czyli zrobić bootstrap odpowiedniego modułu, a w tym przypadku jest to główny moduł AppModule.
Czyli podsumowując: plik main.ts pozwala nam uruchomić główny moduł naszej aplikacji AppModule, który też tam jest zaimportowany, następnie główny moduł (AppModule) mówi nam, że naszym głównym komponentem jest: AppComponent i on własnie jest uruchamiany. Tak to mniej więcej w skrócie wygląda.
2. Opis głównego komponentu app.component.ts
Spójrzmy jeszcze raz na główny komponent:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'foodCalc';
}
Na samej górze mamy zaimportowany moduł { Component }, który definiuje nam, że ten plik będzie komponentem, żeby Angular o tym wiedział.
Poniżej znajduje się tzw. DEKORATOR: @Component :
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
Dekorator zawierz właściwości naszego komponentu:
– selector: nazwa naszego komponentu
– templateUrl: ścieżka do templatki html w którym będzie widok naszego komponentu.
– styleUrls : tablica ścieżek do styli, które będziemy, używali w tym komponencie
Niekiedy stosuje się także właściwość: template a w tej właściwości zamiast ściezki do pliku html widoku, po prostu sami wpisujemy kod html w `…` i tworzymy widok. Stosowany rzadko, głównie przyt malutkich komponentach, gdy stosowanie osobnego html’a nie miałoby sensu.
Klasa naszego komponentu znajduje się w linijce:
export class AppComponent {
title = 'foodCalc';
}
Wyeksportowaliśmy tutaj naszą klasę po to by można potem się do niej odnieść, lub zaimportować, bo musimy pamiętać, że jeśli będziemy chcieli kiedyś użyć naszej klasie w innym komponencie lub module, to musimy taką klasę najpierw wyeksportować. Pierwszy import tej klasy możemy zaobserwować w głównym module app.module.ts:
import { AppComponent } from './app.component';
a poten na dole użycie tej klasy na dole w module:
bootstrap: [AppComponent]
, która musiała zostać zaimportowana na górze by można było z niej skorzystać.
Na dziś już koniec. Po 3 lekcji mamy już pewne zaplecze teoretyczne i już w następnej będziemy wznosili fundamenty naszej aplikacji. Zaobserwujemy widoczne zmiany i będzie o wiele ciekawiej:)
Serdecznie zapraszam do komentowania i dzielenia się spostrzeżeniami.
Najnowsze komentarze