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 - JavaScript, TypeScript, Angular, Ionic Framework, ExpressJS

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

  2. Pozdrav, interesira me kamo idu, odnosno gdje se spremaju CRUD funkcije dodajKorisnika, dohvatiSveKorisnike, urediKorisnika, urediKorisnika2 i obrisiKorisnika. Pretpostavljam da treba još dodatni servis napraviti po imenom korisnici.

  3. mozes li postaviti gotov projekat na github i podelit link da moze da se skine probao sam i nemogu da se snadjem da mi sve to funkcionise , hvala

    1. Pozdrav Gorane,

      nažalost više nemam kopiju projekta. Možeš mi reći do kojeg dijela si stigao i gdje je zapelo pa ti mogu pomoći.

      Prema ovom blog postu možeš vidjeti kako se kreira servis i kako se koristi unutar komponente.

      Navodim to jer Angular u novim verzijama koristi import { HttpClient, HttpHeaders } from '@angular/common/http'; umjesto import { Http } from '@angular/http';.

  4. Pre svega Tomislave hvala ti puno na odgovoru,imam problem ocu da dobijem istu formu imenika kao ti ali nerazumem uputstvo instalirao sam angular kreiram projekat na pocetku ali od dela

    Kreiranje servisa za API

    Neznam da upisem ove kodove.Recimo kad kreiram —–

    korisnici-api.service.ts

    tu krenem da upisujem kod to zavrsim i onda kada dodjem do ovog dela

    Izgled forme (app.component.html)

    To kad otvorim tu vec ima dosta toga upisanog neznam gde da postavim kod koji si ti naveo,prvi put se susrecem sa angular pa mi bas tesko ide ja kad ovo odradim kako mislim sve mi se raspadne.Molim te pomozi hvala ti unapred

    1. Kada kreiraš novi projekt unutar app.component.html se nalazi početni sadržaj čisto iz razloga da ti se nešto prikaže na ekranu kada pokreneš projekt sa “ng serve”. Znači, možeš sve unutar app.component.html obrisati i kopirati ono što sam ja napravio tj. formu.

  5. Ako si me razumeo ,mislim ovo nerazumem gde da postavim tvoj kod od ovog dela pa na dalje

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

    rekao si kako izgleda neznam kako to da sredim ja od tog dela upisem tvoj kod ispo tog teksta sto si stavio znaci editujem app.component.html

    ali onda mi se sve raspadne negde gresim neznam gde.

    1. Pretpostavljam da ti se forma raspadne zbog Bootstrapa. Možeš ga importati i unutar “.angular-cli.json”.

      Instaliraj Bootstrap koristeći “npm i bootstrap” i onda unutar “.angular-cli.json” napravi sljedeće:

      "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      ...
      "./assets/css/main.css"
      ],

      Također, iz HTML forme izbaci sve gdje se spominje ng-class, *ngIf, {{xx}}, *ngFor, (click), [(ngModel)], [ngModelOptions], ="ngModel" i [disabled]=. To ćeš kasnije sve vratiti nakon što se forma ispravno prikaže.

      Cilj ovoga je da ti se na ekranu prikaže forma. A tek nakon toga možemo prijeći na funkcionalnosti.

    1. Provjeri imaš li import {FormsModule} from '@angular/forms'; u app.module.ts. Primjer možeš pronaći u službenoj dokumentaciji https://angular.io/guide/forms

      Nakon što to ubaciš više nećeš imati te greške i forma bi ti se trebala prikazati, ali ćeš imati drugih grešaka koje se tiču app.component.ts datoteke ako unaprijed nisi definirao sve varijable i metode koje koristiš u HTML-u. Ako zapneš javi.

  6. Dodao sam ovo u app.module.ts

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

    import { AppComponent } from './app.component';
    import { HeroFormComponent } from './hero-form/hero-form.component';

    @NgModule({
    imports: [
    BrowserModule,
    FormsModule
    ],
    declarations: [
    AppComponent,
    HeroFormComponent
    ],
    providers: [],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }

    I Sada mi javlja ovu gresku

    https://i.postimg.cc/MZh3H4Nz/Greska-2.jpg

    A kada otvorim stranicu pise mi Cannot GET /

    nema get metode.

  7. Evo odradih sada da samo dodam
    {FormsModule} from ‘@angular/forms’;

    u app.module.ts tako sam te razumeo
    onda mi javlja ovu gresku

    https://i.postimg.cc/VNqmZntC/greska-3.jpg

    Sta da radim oprosti sto ovoliko pisem al mi je bitno da ovo uspijem da napravim,ucim javascript skolu pocinjem sa svim tim pa mi treba vise rada hvala ti puno jos jednom na pomoci.

    1. To ti se može dogoditi ako si dodao BrowserModule pod imports, a nisi na vrhu dokumenta naveo na kojoj ga je putanji moguće pronaći.

      import { BrowserModule } from '@angular/platform-browser';
      ...
      imports: [
      BrowserModule,
      ...
      ],

      P.S. Ako želiš naučiti JavaScript preporučio bi ti da, prije nego dublje uđeš u Angular, prođeš knjigu “A Smarter Way to Learn JavaScript” i online vježbe na adresi http://www.asmarterwaytolearn.com/js/index-of-exercises.html.

  8. Mogu li te pitati nesto postoji li sansa da odradis ovo i postavis projekat da se skine preko githuba puno bi mi znacilo nikako nemogu da se snadjem sta god da odradim javlja mi gresku molim za tu pomoc ako mozes to da uradis,pokusavam sve sto mogu ali mi nikako neide a ti bi to odma odradio.Hvala ti unapred za svu pomoc do sada a i za ovo sto ces nadam se moci da mi uradis.

Odgovori

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