Ažuriranje Angular projekta sa angular-cli na @angular/cli

U ovom ću blog postu pokazati postupak ažuriranja Angular CLI-a sa verzije angular-cli (1.0.0-beta.28.3) na verziju @angular/cli (1.7.4).

Zašto ažuriranje?

Angular ima mnogo značajki kao što su TypeScript i Ahead of Time (AOT) koje pomažu kod prepoznavanja pogrešaka prilikom ‘buildanjaAngular aplikacije. Tim koji stoji iza Angulara trudi se svakom novom verzijom te značajke poboljšavati kako bi prepoznale još više grešaka i radile brže.

Zbog toga se zna dogoditi da kod ažuriranja na noviju verziju budu prepoznate neke greške koje ranije nisu bile uočene.

Uz to, ne treba zaboraviti niti dosta novih značajki koje dolaze s novijim verzijama kao što su Service Worker za progresivne web aplikacije (PWA) i mnoge druge.

Sve to su razlozi za ažuriranje.

Kako ažurirati?

Ažuriranje je potrebno napraviti na dvije razine. Globalno na računalu i lokalno tj. unutar svakog projekta.

Globalna razina

Za početak, provjeravam trenutnu globalnu verziju CLI-a i vidim da je u pitanju angular-cli 1.0.0-beta.28.3 što znači da je ažuriranje potrebno.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Pokretanjem sljedeće naredbe uklanjam trenutnu verziju s računala

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Odmah ću očistiti i cache

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Sada ću instalirati novi @angular/cli

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je sve što se tiče globalne razine.

Lokalna razina

Sada se prebacujem unutar lokalnog projekta i ako ga pokušam pokrenuti koristeći $ ng serve dobit ću sljedeću poruku

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Uzrok tome nalazi se unutar package.json datoteke, a znači da se globalna i lokalna verzija CLI-a ne slažu i da zato nije moguće pokrenuti projekt.

Ako želim postojeći projekt prilagoditi da radi sa novim Angular CLI-em trebam napraviti više izmjena. S druge strane, imam i sljedeću opciju, a to je kreirati novi projekt i onda u njega prebaciti dijelove postojećeg projekta što ću sada i napraviti.

Novi projekt kreiram naredbom

Iz postojećeg projekta u novi prebaciti ću sljedeće:

– mapu src/assets
– mapu src/app
– datoteku src/index.html
– datoteku src/styles.css
– datoteku src/favicon.ico

Osim toga, unutar nove datoteke package.json trebam dodati i module iz postojećeg projekta.

package.json sada izgleda ovako. Označio sam module koje sam dodao iz ‘stare’ package.json datoteke

Nakon toga pokrećem sljedeću naredbu kako bi se ti moduli instalirali u projekt.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je to! Projekt je sada temeljen na novom Angular CLI-u i moguće ga je pokrenuti naredbom $ ng serve

CSS i JS se nisu učitali!

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U slučaju da nisu učitane sve JS tj. CSS datoteke potrebno ih je iz src/index.html prebaciti unutar src/angular-cli.json na sljedeći način:

Iz index.html-a uzimam

i stavljam ih unutar angular-cli.json

Zaključak

Iako na prvu ovaj proces može djelovati komplicirano zapravo je vrlo logičan i jednostavan. Ovisno od projekta do projekta može se dogoditi da je potrebno napraviti još dodatne prilagodbe. O svemu tome obavijesti će se nalaziti unutar CMD prozora.

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 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.

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.