Kurs Angular Material – cz. 1 wprowadzenie

Witam serdecznie, postanowiłem napisać mini kurs Angular 4 wykorzystując do tego framework Material Design.

Celem tego kursu jest pokazanie jak działa Angular w połączeniu własnie z tym zestawem UI. Przez czas trwania tego kursu napiszemy aplikację do obliczania wartości odżywczych (witamin, tłuszczów, węglowodanów etc.) naszych codziennych posiłków. Będziemy korzystać z publicznego API aby pobierać odpowiednie wartości do naszych produktów żywnościowych.

Co to jest zatem Angular Material? Jest to jak gdyby zestaw komponentów implementujących specyfikacje Google Material Design. (Ten framework czy zestaw komponentów opisze w innym wpisie).

Co będzie potrzebne:

• podstawowa znajomość HTML, CSS i oczywiście JavaScriptu
• podstawowa znajomość obsługi wiersza poleceń (konsoli)
• podstawowa znajomość GIT’a
• Edytor tekstowy, polecam darmowe Visual Code Studio ,  Atom lub SublimeText

Zatem zaczynajmy …

1.Stawiamy środowisko

Na początek, aby korzystać z Angulara musimy zainstalować  Node.js. Jest to środowisko uruchomieniowe JavaScriptu. Dzięki niemu możemy uruchomić JS’a poza przeglądarką. Za pomocą tej platformy i wchodzącego w jej skład narzędzia NPM (node package manager ) możemy także instalować potrzebne narzędzie i biblioteki, w łatwy i przyjemny sposób z wiersz poleceń konsoli. Instalujemy go głownie po to, by zainstalować narzędzie Angular CLI, które znacząco podniesie komfort korzystania z naszego frameworka.

Wejdź proszę na https://nodejs.org/en/download/, wybierz odpowiednią dla siebie wersje i zainstaluj Noda’a. Następnie otwórz terminal i wpisz:

node -v

Jeśli Node.js został zainstalowany poprawnie, powinna pojawić się wersja (ważne żeby była większa niż 6.9, gdyż Angular CLI potrzebuje minimum tej wersji). Teraz sprawdzimy wersję NPM. W konsoli wpisz:

[sourcecode language=”plain”] npm -v[/sourcecode]
Powinna być wyższa niż 3.0

2. Instalujemy Angular CLI

Angular CLi jest to tzw comand line interface, ma on za zadanie odciązyć developera od żmudnego tworzenia komponentóe, serwisóe, plików tetowych, pipów i wielu wielu innych rzeczy. Dzięki niemu dostajemy:

• Gotowy szkielet naszej aplikacji
• Gotowy projekt z najnowszą wersją Angulara
• Kompetentne skrypty webpackowe umożliwiające: build produkcyjnej aplikacji, uruchomienie aplikacji w trybie deweloperskim a także uruchomienie testów
• Możliwość kompilacji preprocesorów (scss/sass/less/stylus) do CSS
• Możliwość konkatenacji plików
• i wiele innych

Aby przyjrzeć się temu ciekawemu narzędziu zapraszam na oficjalną stronę projektu: https://cli.angular.io/

Aby zainstalować CLI wpisujemy w konsoli:

npm install -g angular-cli

Polecenie zainstaluje nam  Angular CLI globalnie. Po instalacji przechodzimy w terminalu do wybranego przez nas katalogu gdzie będziemy chcieli umieścić nasz aplikację. Następnie wpisujemy:

ng new foodCalc --style=scss

„foodCalc” to nazwa naszej aplikacji.

W aplikacji będziemy używać SCSS. O innych wariantach budowania projektu możesz poczytać tutaj: https://github.com/angular/angular-cli/wiki/new .

Po zbudowaniu się projektu przechodzimy do podkatalogu foodCalc (poleceniem w terminalu: „cd foodCalc/”), gdyż taki został utworzony przez Angular CLI. Jest to katalog w którym znajduje się nasz projekt.

Następnie w konsoli zaraz po przejciu do w/w katalogu wpisujemy:

npm install

NPM zainstaluje nam potrzebne biblioteki i skrypty niezbędne przy korzystaniu z Angulara. Wszystkie ona bedą w katalogu node_modules. (W następnym wpisie opisze strukturę naszej aplikacji). Po wpisaniu komendy będziemy musieli odczekać jakąś chwilę.  Teraz możemy już uruchomić nasz aplikacje wpisując w wiersz poleceń :

ng serve

Angular CLI zbuduje nam wersję developerską aplikacji i po wejściu w przeglądarkę na adres: http://localhost:4200/ naszym oczom ukaże się wersja powitalna naszej aplikacji:)

3. Instalujemy Angular Material

Teraz zainstalujemy nasz zestaw komponentów. Wchodzimy w terminalu w katalog gdzie mamy nasz aplikację , czylu musimy wyb w ../foodCalc. Teraz w konsoli wpisujemy:

npm install --save @angular/material @angular/animations

Mamy tu do czynienia z 2 pakietami.

• • @angular/material
    Jest to oficjalny pakiet materiałów dla Angular .
  • @angular/animations
    Nowością w wersji 4 jest konieczność instalowania animacji oddzielnie od Angular. Niektóre składniki Material potrzebują dostępu do biblioteki animacji, dlatego instalujemy ją tutaj.

Następnie wpisujemy:

npm install @angular/cdk

Na ten czas Angular CLI bez tego powyżej wywalał mi bład, więc warto to zainstalować.

Teraz otwórz nasz  plik /src/app/app.module.ts i zaimportuj pakiety, które właśnie zainstalowaliśmy:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule } from '@angular/material';

Następny import to coś wyjątkowego dla Angular 4 Material. Przedtem dołączyliśmy tylko jeden plik MaterialModule . Teraz musimy importować każdy komponent, który zamierzamy wykorzystać.

Dodajemy 6 różnych modułów do materiałów, przycisków, kart, menu, pasków narzędzi i ikon.

Teraz dodajmy każdy z nich jako import w pliku @NgModule:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule
  ],

Cały plik powinien wyglądać następująco:

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 { }

Nazwy modułów zgdonie z dokumentacją są importowane. Oficjalna dokumantacja Angular Material znajdije się pod adresem: https://material.angular.io/components , Proponuje dodać tę stronę do ulubionych, będzie nam ona często potrzebna.

Teraz na szbyko wrzucimy coś z Material Design by zobaczyć jak to działa, w następnych wpisach będę po kolei wszystko tłumaczył.

W  pliku /src/styles.scss , który jest generowany przez Angular CLI, dodajmy:

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
padding: 50px 100px;
background:#e0e0e0;
}

.example-spacer {
  margin-right: 20px;
}

Plik : indigo-pink.css możemy podmienić na inny, lub napisać także swój, w którym dobierzemy odpowiedni kolor, krój fontów zmienić nazwy zmiennych używanych w scss i inne rzeczy które chcielibyśmy wystylizować po swojemu. O tym będzie mowa w dalsze części tego kursu.

Dodamy także 2 linie do  pliku /src/index.html  przed znacznikiem head:

<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" />

Dzięki temu zaimportujemy odpowiednie fonty jak i ikonki z Material Design. Natomiast nasz plik  /src/app/app.component.html  zastąpimy w całości kodem:

<mat-toolbar color="primary">
  <span>Kalkulator wartości odżywczych</span>
  <span class="example-spacer"></span>
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>menu</mat-icon> Menu
  </button>
  <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
</mat-toolbar>

Teraz w terminalu wpisujemy ng serve i cieszymy oczy pierwszą małą częścią naszej aplikacji:)

Serdecznie zapraszam do komentowania i dyskusji, gdyby było coś nie jasne czy występowały błędy, napisz a na pewno odpowiem:)

Niedługo następne lekcje.