Uvod u Angular Material

Prilikom pokretanja Angular projekta dobijemo dobru osnovu za razvoj web aplikacija. S obzirom da to podrazumijeva i dobar dizajn važno je odmah na početku odabrati kojim putem će se krenuti. U velikom broju slučajeva dobar izbor je Bootstrap, ali ako želimo nešto u skladu s trenutnim trendovima možemo koristiti još i Angular Material.

Kreiranje Angular projekta

Novi projekt kreiramo koristeći Angular CLI i pokrećemo naredbom

$ ng new AngularMaterial
$ cd AngularMaterial
$ ng serve

$ ng new AngularMaterial

$ cd AngularMaterial

$ ng serve

Sada na adresi http://localhost:4200 možemo vidjeti sljedeće

Instalacija Angular Material paketa

U mapi ranije kreiranog projekta pokrećemo sljedeću naredbu

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

1	$ npm install --save @angular/material @angular/cdk @angular/animations

Instalirali smo tri nova NPM paketa:
– @angular/material – službeni Material paket za Angular
– @angular/cdk – CDK (Component Development Kit) pruža mogućnost razvoja prilagođenih Angular Material komponenti
– @angular/animations – neke komponente ovise o ovome kako bi mogle prikazivati napredne tranzicije

I sada unutar package.json možemo vidjeti sljedeće

  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },

"dependencies": {

"@angular/animations": "^4.4.6",

"@angular/cdk": "^2.0.0-beta.12",

"@angular/common": "^4.2.4",

"@angular/compiler": "^4.2.4",

"@angular/core": "^4.2.4",

"@angular/forms": "^4.2.4",

"@angular/http": "^4.2.4",

"@angular/material": "^2.0.0-beta.12",

"@angular/platform-browser": "^4.2.4",

"@angular/platform-browser-dynamic": "^4.2.4",

"@angular/router": "^4.2.4",

"core-js": "^2.4.1",

"rxjs": "^5.4.2",

"zone.js": "^0.8.14"

Zadane Material teme

Angular Material nudi nam mogućnost biranja između nekoliko zadanih tema koje u projekt možemo dodati jednostavnim uvozom unutar datoteke src/styles.css

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

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

– deeppurple-amber.css – @import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;
– indigo-pink.css – @import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;
– pink-bluegrey.css – @import ‘~@angular/material/prebuilt-themes/pink-bluegrey.css’;
– purple-green.css – @import ‘~@angular/material/prebuilt-themes/purple-green.css’;

Material ikone i tipografija

Osim tema imamo mogućnost korištenja i Angular Material ikona kao i tipografije.

To postižemo dodavanjem sljedeće poveznice unutar src/index.html

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

1 2	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Podrška za geste

$ npm install --save hammerjs

1	$ npm install --save hammerjs

U službenoj dokumentaciji spominje se još u Hammer.JS paket kojega je potrebno dodati u Angular projekt ako se planiraju koristiti komponente kao što su npr. Tooltip i Slider, kako bi se iz njih dobila maksimalna funkcionalnost.

Nakon instalacije potrebno je unutar src/main.ts dodati

import 'hammerjs';

1	import 'hammerjs';

Angular Material komponente

Instalacijom ranije navedenih paketa još uvijek nismo sve riješili i naš Angular projekt i dalje nema podršku za korištenje svih Angular Material komponenti.

Ako npr. želimo u projekt dodati npr. Card komponentu moramo unutar njene dokumentacije pronaći API referencu koja će nam to omogućiti.

Za svaku komponentu koju želimo koristiti moramo pronaći pripadajuću API referencu i navesti ju unutar naše app.module.ts datoteke što na kraju može izgledati i ovako:

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

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatSelectModule,
    MatMenuModule,
    MatToolbarModule,
    MatButtonToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule,

MatCardModule,

MatInputModule,

MatSelectModule,

MatMenuModule,

MatToolbarModule,

MatButtonToggleModule } from '@angular/material';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

BrowserAnimationsModule,

MatButtonModule,

MatCardModule,

MatInputModule,

MatSelectModule,

MatMenuModule,

MatToolbarModule,

MatButtonToggleModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ako sada usporedimo sliku izgleda Angular aplikacije s početka ovog blog posta i nakon dodavanja Angular Materiala razlika je jasno vidljiva.

Zaključak

I to je sve. Ovo čak može djelovati i previše jednostavno da bi bilo istinito, ali to je zapravo i cilj korištenja Angular Materiala.