Angular CRUD aplikacija

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:

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

2 misli o “Angular CRUD aplikacija”

  1. Pozdrav,

    u skripti korisnici-api.service.ts exporta se klasa
    export class KorisniciApiService
    a nadalje se u primjerima poziva
    this._korisniciService.uredi(korisnik),
    this._korisniciService.obrisi(id)

    Da li je to ispravan poziv ili se mora pozivati
    this._KorisniciApiService.uredi(korisnik),
    this._KorisniciApiService.obrisi(id)
    ?

    Ako ne, gdje se definira ovaj poziv this._korisniciService.uredi?
    Hvala

    1. Pozdrav Jadranko,

      this._korisniciService se definira u konstruktoru na sljedeći način:

      import { KorisniciApiService } from from './korisnici-api.service';

      constructor(public _korisniciService: KorisniciApiService) {}

      i onda se koristi kako je gore u primjeru navedeno. Moja je greška što to nisam ubacio u blog post.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *