Angular CRUD aplikacija

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

   Odgovori

   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

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.

   Odgovori

   1. Pozdrav Darko,

      sve navedene funkcije nalaze se u app.component.ts. Servis za upravljanje korisnicima postoji pod imenom KorisniciApiService.

      Kako bi se podaci spremali potrebno je napraviti servis i bazu putem kojih će se upravljati podacima. Više o tome na https://www.tomislavstankovic.com/blog/rest-api-json-server/ ili https://www.tomislavstankovic.com/blog/jednostavan-nodejs-expressjs-rest-api/

      Odgovori

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

   Odgovori

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

      Odgovori

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

   Odgovori

   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.

      Odgovori

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.

   Odgovori

   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.

      Odgovori

6. Hvala ti puno na pomoci sad mi je jasnije

   Odgovori

7. Izvini,ali sta da radim moram jos nesto da te pitam meni sada ispada ova greska pogledaj bice ti jasno sve hvala ti na pomoci.

   https://i.postimg.cc/PrMK2cLz/Greska.jpg

   Odgovori

   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.

      Odgovori

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

   Odgovori

   1. Višak ti je HeroFormComponent, osim ako sam nisi kreirao tu komponentu.

      Odgovori

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

   Odgovori

   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.

      Odgovori

10. Vazi hvala ti puno pogledacu

    Odgovori

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

    1. Možeš kao temelj iskoristiti projekt https://github.com/tomislavstankovic/api-sudskog-registra. Temeljen je na Angular 10, dok je ovaj iz blog posta Angular 4. Imaš u njemu HTML formu, samo si prilagodi polja.

       Na GitHubu se nalazi i API https://github.com/tomislavstankovic/SImple-NodeJS-ExpressJS-Starter-API

       Odgovori

       1. Hvala ti pokusacu bitno mi je da dobijem samo taj imenik

          Odgovori

12. Evo opet mene samo da te pitam sada mi javlja ovu gresku neznam zasto sve odradim kako si mi rekao gledo sam ponovo sta si mi do sada pisao i sada mi ovo izbaca

    https://i.postimg.cc/wxCJx8jg/Greska.png

    Odgovori

    1. Odgovorio sam u komentaru ispod. Postoji višak koda u app.module.ts koji uzrokuje tu grešku.

       Odgovori

13. Evo sta sam dodavao pa mi to kada sam dodao ovo javlja

    https://i.postimg.cc/MZQMFPb4/greska-2.png

    Odgovori

    1. Višak ti je prvih pet linija tj. dva puta imaš import BrowserModule. Nisi trebao taj dio na vrhu kopirati ako ga već imaš u app.module.ts

       Odgovori