Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Ako ste do sada razvijali Angular web aplikacije ili koristili tuđe mogli ste kod svih njih primijetiti jednu zajedničku stvar, a to je početni zaslon koji se prikazuje prije nego se učita Angular aplikacija i na kojemu u gornjem lijevom kutu ekrana piše “Loading…” (Angular 2) uz monotonu bijelu pozadinsku boju. Kasnije je to izbačeno te se prikazuje samo obična, prazna, bijela pozadina (>= Angular 4).

Išao sam malo istražiti kako najbolje to riješiti tako da i meni kao developeru, a i korisniku bude lijepo. Našao sam nekoliko mogućnosti od kojih sam odabrao jednu o kojoj ću nešto više napisati u nastavku.

Kreiranje novog Angular projekta

Koristeći Angular CLI pokrećem novi projekt

Početni zaslon je čisto bijele boje i to je dobar izbor ako nakon toga ide prikaz npr. stranice za prijavu korisnika s bijelom pozadinom. U tom će se slučaju te dvije bijele pozadinske boje lijepo stopiti i činiti cjelinu.

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Prilagođeni početni zaslon

Za promjenu prikaza početnog zaslona dovoljno je kreirati novi <div> s klasom loading.

Na kraju to izgleda ovako

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Zaključak

To bi bilo sve. Ovo se možda ne čini kao nešto vrijedno spomena, ali svakako daje onaj završni sjaj Angular web aplikaciji.

Angular CRUD aplikacija

U ovom ću blog postu napraviti jednostavnu Angular CRUD (create, read, update, delete) aplikaciju koja će se sastojati od forme za pregled podataka uz mogućnost dodavanja, uređivanja i brisanja podataka.

CRUD operacije nešto su s čime se svaki web developer najčešće susreće i zato bi ovaj primjer posebno mogao biti koristan novim developerima ili onima koji će to tek postati.

Uvod

Cilj ovog blog posta je pokazati:
– kako kreirati Angular projekt koristeći Angular CLI
– kako kreirati i koristiti servis pomoću kojega ću pozivati JSON API
– kako dodati Bootstrap za brže kreiranje forme za unos, pregled, uređivanje i brisanje sadržaja

Kreiranje Angular projekta

Pomoću Angular CLI-a kreirat ću novi projekt.

Ako projekt sada otvorim u web pregledniku na adresi http://localhost:4200/ dobit ću sljedeće

Angular CRUD aplikacija

S obzirom da umjesto toga želim imati formu za unos, pregled, uređivanje i brisanje sadržaja prvo ću dodati podršku za Bootstrap na način da u index.html dodam

. I sada mogu koristiti Bootstrap komponente.

Kasnije ću se vratiti na izgled forme, a sada idem postaviti glavni dio funkcionalnosti koji se tiče kreiranja servisa i pozivanja API-ja.

Kreiranje servisa za API

Servis pomoću kojega ću vršiti sve upite na API kreiram naredbom

Nakon čega dobijem korisnici-api.service.ts

Servis se može koristiti za različite svrhe, ali kako ću meni ovdje glavna svrha biti slanje upita na API znači da obavezno moram koristiti Http servis.

Konačan izgled servisa može se vidjeti u nastavku, a njime je pokriveno sve – od pregleda svih korisnika, dodavanja novih, uređivanja i brisanja postojećih.

Izgled forme (app.component.html)

Za izgled forme iskoristit ću Bootstrap komponente. Struktura forme nalazi se unutar app.component.html, a izgleda ovako:

Forma na početku i bez podataka izgleda ovako:

Angular CRUD aplikacija

Sada kada imam definiran izgled forme mogu kreirati opcije koje će joj dati funkcionalnost.

Dodavanje (POST)

Što se dodavanja sadržaja tiče nije ga moguće dodati dok sva obavezna polja nisu unesena. U ovom slučaju postoje dva polja, ime i prezime te broj telefona, i oba su obavezna. S obzirom da u formi za sada nema niti jednog korisnika *ngIf="ukupanbrojkorisnika < 1" prikezuje se poruka “Nema podataka”.

Nakon dodavanja korisnika popis se automatski osvježava i prikazuje sve dodane korisnike.

Angular CRUD aplikacija

Pregled (GET)

Kada se Angular web aplikacija pokrene automatski se dohvaća popis svih do tada unesenih korisnika. Za tu svrhu koristim ngOnInit() što je dio Angular Lifecycle Hook.

Također, odmah dohvaćam i dužinu niza this.ukupanbrojkorisnika = res.length; kako bi mogao prikazati ukupan broj korisnika.

Angular CRUD aplikacija

Uređivanje (PUT)

Kod uređivanja korisnika imam dvije funkcije. Prva urediKorisnika(); dohvaća podatke odabranog korisnika i prikazuje ih u gornjoj formi za unos/uređivanje, a druga urediKorisnika2(); obavlja proces uređivanja odabranog korisnika tj. šalje nove podatke na API.

Nakon što su novi podaci poslani popis korisnika se automatski osvježava, a gumb ‘Uredi’ ponovno postaje ‘Spremi’.

Angular CRUD aplikacija

Brisanje (DELETE)

Brisanje korisnika zadnji je korak izrade ovog CRUD primjera. Nakon što je odabrani korisnik obrisan popis se automatski osvježava.

Angular CRUD aplikacija

Zaključak

Ovo je bio jednostavan primjer Angular CRUD forme. Mogao sam ovdje dodatno uljepšati izgled forme ili na drugačiji način slati upite na API, ali mislim da je ovo sasvim dovoljno za početak jer kako god bilo korištenjem ovog primjera može se napraviti funkcionalna forma za unos, pregled, uređivanje i brisanje sadržaja.

I za kraj, NPM paketi korišteni u ovom primjeru:

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

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

Angular Material dizajn - početna stranica

Instalacija Angular Material paketa

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

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

Zadane Material teme

Uvod u Angular Material

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

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.

Angular Material ikone

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

Podrška za geste

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

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.

Angular Material kartica

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:

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

Uvod u Angular Material dizajn

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.

Uvod u Angular CLI

Kada želite razvijati aplikacije koristeći Angular imate tri mogućnosti, kreirati projekt ručno, preuzeti predložak projekta ili koristiti Angular CLI.

Prva opcija je spora i nema potrebe započinjati svaki novi projekt na taj način, iako je korisno barem jednom proći kroz taj postupak čisto iz razloga da se bolje upoznate s dijelovima od kojih se sastoji jedan Angular projekt. Druga opcija je automatizirana verzija prve opcije i vrlo brzo imate spremnu početnu strukturu Angular projekta. Treća opcija je koristeći Angular CLI i to je definitivno najbolja i najbrža opcija jer osim kreiranja Angular projekta nudi još puno toga, više o tome u nastavku.

Angular CLI – postavljanje

P.S. Kako bi mogli postaviti Angular CLI potrebno je prvo instalirati Node >= 6.9.0 i NPM >= 3.

Angular CLI instalira se jednostavnom naredbom:

I to je sve! Spremni ste za kreiranje prvog Angular projekta koristeći CLI.

P.S.2 Preporuka je da odmah instalirate i TypeScript. Typescript je superset od JavaScripta i koristite ga u kombinaciji sa Angularom.

Kreiranje Angular projekta

Novi se projekt kreira naredbom:

Angular CLI novi projekt

Struktura projekta izgleda ovako:

Pokretanje projekta

Projekt možete pokrenuti koristeći naredbu:

Projekt možete otvoriti u web pregledniku na adresi http://localhost:4200

Angular Demo CLI projekt localhost

Ako želite da projekt za vrijeme razvoja mogu vidjeti i drugi korisnici u vašoj lokalnoj mreži pokrenite ga naredbom u kojoj navodite IP adresu vašeg računala npr.:

https://192.168.1.11:4202

U ovom slučaju projekt se nalazi na adresi http://192.168.1.11:4202

Kreiranje dijelova aplikacije

Sve do sada je bilo samo uvod u najveću snagu koju Angular CLI ima, a to je

što vam omogućava kreiranje drugih gradivnih elemenata potrebnih za razvoj cjelovite Angular aplikacije.

Koristeći ng generate možete kreirati:

  • Componentng g component my-new-component
  • Directiveng g directive my-new-directive
  • Pipeng g pipe my-new-pipe
  • Serviceng g service my-new-service
  • Classng g class my-new-class
  • Guardng g guard my-new-guard
  • Interfaceng g interface my-new-interface
  • Enumng g enum my-new-enum
  • Moduleng g module my-new-module

Prilikom kreiranja elemenata kao što su component, directive ili pipe referenca na novi element će se automatski dodati u datoteku app.module.ts.

Verzija aplikacije za produkciju

Kada ste spremni vašu Angular aplikaciju pustiti u produkciju dovoljno je pokrenuti naredbu:

$ ng build tj. $ ng build --prod

Angular CLI: ng build --prod

U ovom se koraku kreira ranije spomenuta dist mapa u kojoj se nalazi produkcijska verzija vaše Angular aplikacije.

Zaključak

Angular CLI je svakim danom sve popularniji. Iz ranije viđenog nije teško zaključiti zašto je to tako.

Ionic 3 – Korištenje, napredne, reaktivne forme

Objavio sam već nekoliko blog postova u kojima sam koristio obične, template-driven, forme dok ću u ovom blog postu pokazati primjer korištenja reaktivne forme tzv. reactive forms.

Postavljanje aplikacije

Za početak je potrebno kreirati novu Ionic aplikaciju.

S obzirom da ćemo ovdje koristiti reaktivne forme u module moramo dodati ReactiveFormsModule. To ćemo učiniti na način da u app.module.ts dodamo import { ReactiveFormsModule } from '@angular/forms'; .

Kreiranje reaktivne forme

Sada smo spremni za kreiranje reaktivne forme na stranici home.html tj. home.ts.

Forma će se sastojati od tri polja (korisničko ime, e-mail i lozinka). Sada možemo kreirati izgled reaktivne forme.

Logika će se nalaziti unutar home.ts. Ovdje imamo objekt korisnik i funkciju posaljiPodatke(korisnik){};.

Ako sada pokrenemo aplikaciju dobit ćemo sljedeće

Ionic 3 - Reaktivna forma (primjer 1)

Iako se ovo još uvijek puno ne razlikuje od primjera formi koje smo koristili u prijašnjim blog postovima ipak se kreće u smjeru onoga što s reaktivnim formama možemo i želimo postići. Više o tome u nastavku.

Napredne mogućnosti (FormBuilder)

Kako bi unutar naše forme kasnije mogli koristiti napredne mogućnosti dodatno ćemo prilagoditi logiku unutar home.ts datoteke na način da ćemo dodati FormBuilder klasu. Ako sada pokrenemo aplikaciju rezultat će biti isti kao na slici iznad.

Proširivanje mogućnosti forme (FormArray)

Dodatna funkcionalnost naše forme stižu u obliku FormArray klase.

FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Sada ćemo proširiti funkcionalnost naše forme iz primjera iznad na način da ćemo dodati mogućnost unosa adrese i kućnog broja. Posebno zanimljiva će biti mogućnost dodavanja više adresa unutar iste forme tj. kreiranje niza adresa.

Unutar postojećeg objekta korisnik dodajemo niz adrese. Također, dodajemo i funkcije za dodavanje nove adrese dodajAdresu(); tj. brisanje adrese obrisiAdresu(i);.

Prema tome i izgled forme smo morali prilagoditi. Ovdje nikako se smijemo zaboraviti dodati type="button" za gumbe za dodavanje i brisanje adrese jer ćemo u suprotnom dobiti vrlo zanimljive nuspojave, a to ne želimo.

Ako sada pokrenemo aplikaciju forma će izgledati ovako

Ionic 3 - Reaktivna forma (primjer 2)

Validacija forme

U našoj trenutnoj formi možemo u bilo koje polje unijeti bilo koju vrijednost jer nemamo nikakvu vrstu provjere tih vrijednosti. Sada ćemo to omogućiti koristeći Validators klasu.

Korisničko ime mora biti duže od 3 znaka, email mora imati ispravan oblik tj. mora sadržavati znak ‘@’, a lozinka ne smije biti duža od 9 znakova.

U našoj komponenti to izgleda ovako:

Dok forma nije validna korisnik ne smije imati mogućnost slanja podataka tj. mora mu se onemogućiti klik na gumb za slanje/spremanje podatka [disabled]="korisnik.invalid".

Forma sada izgleda ovako

Ionic 3 - Reaktivna forma (primjer 3)

Kreiranje prilagođenog validatora

Ovisno o potrebama moguće je napraviti i prilagođene validatore. Npr. ako pogledate validator za e-mail adresu iz gornjeg primjera možete vidjeti da on dopušta unos e-mail adrese sa nastavkom (.com) koji ima više od 3 znaka. Zato ćemo mi sada napraviti prilagođeni validator koji će takvu adresu označiti kao neispravnu.

Unutar mape Ionic3ReaktivnaForma\src\ kreirati ćemo novu mapu \validators\ sa datotekom email.ts

Prema tome možemo prilagoditi i home.ts datoteku

Validacija e-mail polja sada izgleda ovako

Validacija e-mail polja

Bonus – provjera tijekom unosa

Još jedna od mogućnosti koju možete koristiti je i provjera unešenih podataka u polje forme u trenutku unosa. U ovom ćemo primjeru provjeravati samo polje koje se tiče unosa korisničkog imena.

Na formi ćemo to prikazati na sljedeći način:

Na kraju to izgleda ovako:

Ionic 3 -Reaktivna forma (primjer 5)

Zaključak

Ovisno o potrebama koristiti ćete reactive ili template-driven forme. Ne postoji bolje ili lošije rješenje jer sve ovisi što vam u kojem trenutku treba.

Ako trebate napraviti jednostavniju tj. manju formu možete bez problema koristiti template-driven formu. To su forme koje sadržavaju [(ngModel)]="objekt".

Kada počnete raditi veće i kompleksnije forme svakako se prebacite na reactive forme. Jednostavnije ih je održavati i testirati plus što se sva logika nalazi na jednom mjestu.