Co to jest Angular Material?

Obserwując rozwój aplikacji internetowych można dojść do wniosku, że z biegiem czasu możemy tworzyć coraz bardziej złożone funkcjonalności z mniejszym nakładem pracy. Dzieje się tak dlatego, bo używamy często narzędzi, które ktoś za nas napisał. Można to porównać do budowy domu z klocków. Pozwala to oczywiście na oszczędność czasu i skupieniu się na naszym celu. Angular Material to biblioteka, która pomoże Ci w łatwiejszym budowaniu interfejsu użytkownika.

Używając Material masz na start gotowe komponenty: jak kontrolki do formularzy, przyciski, popupy i wiele więcej.

Instalacja

Zanim zaczniemy instalację zakładam, że masz już postawioną aplikację Angular.

Żeby zacząć używać bibliotekę musimy ją zainstalować. Wejdź do katalogu swojej aplikacji i wywołaj komendę:

ng add @angular/material

Zacznie się proces instalacji. Będziesz pytany przez instalator o: wybranie motywu graficznego, czy ustawić globalnie style odnośnie czcionki(wybierz 'n' to Cię raczej teraz nie interesuje), czy ma być dodana obsługa efektów animacji(zalecam 'y'). To tyle jeśli chcesz poznać więcej szczegółów znajdziesz je pod tym: linkiem.

Pierwsze użycie

Stwórzmy plik o nazwie: material.module.ts o takiej zawartości:

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  exports: [
  	MatInputModule
  ]
})
export class MaterialModule {}

Żeby zacząć używać któryś z komponentów Material trzeba je najpierw zaimportować. W tym przykładzie importujemy komponent do obsługi pól tekstowych.

Drugi krok to dodanie tego modułu do pliku: app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dla uproszczenia tego wpisu zakładam, że działamy na komponencie podstawowym czyli: app.component.ts, app.component.html.

Do pliku: app.component.ts dodaj:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  field = new FormControl();
}

Dobra ostatnia rzecz to po prostu dodanie naszej kontrolki do szablonu. Dodaj taki fragment do szabonu app.component.html:

<div *ngIf="field.value">
  Dzisiaj zjem pizzę: {{ field.value }}
</div>

 <div>
	<mat-form-field>
		<mat-label>Twoja ulubiona pizza?</mat-label>
		<input matInput [formControl]="field" placeholder="Pizza">
	</mat-form-field>
</div>

Krótkie wyjaśnienie:

mat-form-field - to kontener, w którym przechowujemy kontrolkę z biblioteki Material. To pole jest wymagane.

mat-label - Zwykła etykieta. Dodatkowo: w tym przypadku jeśli pole tekstowe nie ma fokusa, to wartość podana w tym tagu jest wyświetlana w kontrolce jako placeholder. Opcjonalne.

matInput - To dyrektywa która informuje, że chcemy skorzystać z modułu: MatInputModule. Tej dyrektywy możemy także użyć dla tagu textarea. To jest wymagane.

Mija drugi miesiąc działalności bloga. Oto podsumowanie!

W maju na blogu pojawiło się 7 nowych wpisów. Konkrety:

JavaScript:

• Jak posortować tablicę nie zmieniając oryginału?
• Jak zmienić string w HTML Element?

SSH:

• Jak dodać klucz publiczny SSH na serwer?

Webstorm:

• Jak ustawić własny skrót klawiszowy?
• Jak włączyć tryb pełnoekranowy?

NodeJS:

• NodeJS: Wczytywanie plików

Dodałem także nowy dział: Książki. W tym miesiącu przeczytałem trzy pozycje:

• Nie każ mi myśleć - Steve Krug
• Inteligencja emocjonalna - Daniel Goleman
• Jest krew... - Stephen King

Jakiś czas temu stanąłem przed takim problemem: miałem zapisany w string szablon za pomocą HTMLa na przykład:

<div class="foo">
  <h2 class="title">Nagłówek</h2>
  <p>
  Lorem ipsum...
  </p>
</div>

I potrzebowałem przekonwertować stringa na HTML Element. Można to zrobić w taki sposób:

const stringToHtml = (htmlString) => {
    const parent = document.createElement('div');
    parent.innerHTML = htmlString;
    return parent.children.item(0);
};

Ta metoda sprawdza się gdy mamy tylko jeden kontener a w środku reszta danych. Dla tej metody nie zadziała:

<div class="foo">
  Foo
</div>
<div class="bar">
  Bar
</div>

Jak wywołamy funkcję stringToHtml dla takiego szablonu dostaniemy tylko pierwszy element.

Poniżej inna wersja po małej modyfikacji:

const stringToManyHtmlElements = (htmlString) => {
    const parent = document.createElement('div');
    parent.innerHTML = htmlString;
    return parent.children;
};

Jak wywołamy tą funkcję dostaniemy w rezultacie: HTMLCollection. Przykład:

const divs = stringToManyHtmlElements('<div>a</div><div>b</div>');
console.log('Div A: ', divs[0]);
console.log('Div B: ', divs[1]);

Żeby wczytać plik wystarczy nam moduł wbudowany w NodeJS o nazwie: fs. W tym wpisie podam przykłady dla dwóch metod, które pozwalają wczytać plik w sposób synchroniczny lub asynchroniczny. Warto także mieć na uwadze to, że opisane metody wczytują plik do pamięci. Jeśli zamierzasz wczytać duży plik będzie to miało negatywny wpływ na pracę programu. W takim przypadku warto zainteresować się strumieniami.

Synchroniczne wczytywanie pliku

Wczytywanie pliku, w sposób synchroniczny oznacza, że wątek główny zostanie zablokowany do momentu zakończenia tej operacji.

Posłużymy się metodą readFileSync:

const fs = require('fs');

try {
  const data = fs.readFileSync('./file-to-load', 'utf8');
  console.log(data);
} catch (error) {
  console.log(error);
}

Metoda readFileSync przyjmuje dwa parametry. Pierwszy parametr to ścieżka do pliku który chcemy wczytać. Drugi argument jest opcjonalny możemy w nim określić sposób kodowania(domyślnie przymuje wartość null) wczytywanego pliku oraz flagę operacji(domyślnie ma wartość r). Ten drugi parametr dodatkowo można przekazać jako string lub zwykły obiekt, więcej informacji znajdziesz pod tym linkiem.

Żeby obsłużyć ewentualny błąd przy wczytywaniu pliku korzystamy w wersji synchronicznej metody z obsługi wyjątku.

Asynchroniczne wczytywanie pliku

Żeby wczytać plik, w sposób asynchroniczny używamy metody: readFile

const fs = require('fs');

fs.readFile('./file-to-load', 'utf8' , (error, data) => {
  if (error) {
    console.log(error);
    return;
  }
  console.log(data);
});

Dwa pierwsze parametry są takie same jak dla wersji synchronicznej. W wersji asynchronicznej mamy trzeci parametr. Jest to zwykła funkcja zwrotna. Zwraca ona dwa parametry. Pierwszy parametr to ewentualny błąd przy próbie wczytywania, a drugi to dane z pliku.

Ścieżka do pliku

Przy pracy w z plikami warto wiedzieć jeszcze o istnieniu zmiennej o nazwie:

__dirname

Zwraca ona ścieżkę absolutną do katalogu który zawiera wywołany skrypt. Spójrzmy:

|--server
|  |--index.js
|  |--models
|     |--some-model.js

Gdy wywołamy w pliku some-model.js z tą linijkę kodu:

console.log(__dirname);

Otrzymamy:

/home/user/server/models

No dobra, ale po co nam ta informacja? Dwa powyższe przykłady bazują na ścieżce względnej i nawet nie powinniśmy wczytywać w ten sposób plików! Problem jest taki, że my nie mamy wpływu z jakiej lokalizacji skrypt zostanie wywołany. Dla jasności spójrz jeszcze na poniższy przypadek:

Weźmy pierwszy przykład:

fs.readFileSync('./file-to-load', 'utf8');

I załóżmy że wywołujemy skrypt, w miejscu w którym się on znajduje na przykład będzie to ścieżka /home/user/myscript:

node load-file.js

Plik zostanie wczytany poprawnie.

Teraz drugi przypadek. Wywołujemy ten sam skrypt, ale na przykład ze ścieżki: /home/user czyli jeden katalog wyżej:

node myscript/load-file.js

Oto wynik:

Error: ENOENT: no such file or directory, open '/home/user/file-to-load'

Używając tej zmiennej będziemy mieli pewność, że plik zostanie wczytany poprawnie:

const fs = require('fs');

try {
  const data = fs.readFileSync(__dirname + '/file-to-load', 'utf8');
  console.log(data);
} catch (error) {
  console.log(error);
}

Praca, w trybie pełnoekranowym ma jeden duży plus: zwiększa nasze szanse na pracę w skupieniu. Przez to, że cały ekran jest zasłonięty możemy skoncentrować się na naszym zadaniu. Nie widzimy żadnych ikonek informujących, że czeka na nas wiadomość z komunikatora lub nieprzeczytany e-mail.

W Webstormie żeby przejść w tryb pełnego ekranu należy wybrać:

View -> Appearance -> Enter Full Screen

Domyślnie nie ma skrótu klawiszowego dla tej akcji. Dlatego warto go sobie ustawić. Jak ustawić skrót klawiszowy w Webstormie dowiesz się z tego wpisu.