Kratki vodič koji će vam pomoći da razumijete i napravite kutne 6 aplikacije

Programiranje

Ovaj je post podijeljen u dva dijela:

Prvi dio pokazuje kako stvoriti jednostavnu aplikaciju Angular 6 pomoću Angular CLI-a i objašnjava strukturu projekta.

Drugi dio objašnjava postojeći kôd koji sam objavio na GitHubu. Ovaj kôd prikazuje upotrebu komponenata, usluga, HTTP klijenta i komunikaciju između komponenata.

1. dio

Instalirajte Node.js ako već nije prisutan

Treba vam Node.js, jer se knjižnice potrebne za Angular preuzimaju pomoću upravitelja paketa čvorova (npm). Pogledajte //nodejs.org/en/ kako biste instalirali Node.js.

Instalirajte kutni CLI

Angular CLI sučelje je naredbenog retka za Angular i vrlo je koristan u brzom stvaranju predloška projekta Angular 6. Instalirajte Angular CLI npm paket globalno pomoću sljedeće naredbe:

npm install -g @angular/cli

Stvorite projekt

Kutni CLI pomaže u stvaranju projekta vrlo jednostavno. Da biste stvorili projekt, upotrijebite sljedeću naredbu.

ng new simple-angular6-app

simple-angular6-app naziv je projekta. Sad ćete primijetiti da vidite mapu nazvanu simple-angular6-app. Mapa je projekt koji je stvoren. Da biste testirali je li sve ispravno postavljeno, idite u mapu projekta i pokrenite aplikaciju pomoću sljedećih naredbi:

cd simple-angular6-app npm start

Idite na svoj preglednik i idite na sljedeći URL: localhost: 4200. Trebali biste biti u mogućnosti vidjeti da je vaša aplikacija pokrenuta.

Aplikacija bi izgledala ovako:

Objašnjena osnovna struktura mape

Kada kreirate projekt, primijetit ćete da on stvara hrpu datoteka. Ovdje ću navesti neke važne datoteke i mape kojih biste trebali biti svjesni:

  1. package.json: Ova datoteka sadrži popis potrebnih ovisnosti o čvorovima.
  2. src / styles.css : Ova datoteka ima globalni CSS dostupan u cijeloj aplikaciji.
  3. src / main.ts : Ovo je glavna datoteka koja pokreće kutnu aplikaciju (AppModule se ovdje pokreće, kao što se vidi u kodu). Ovdje je Extension .ts kratica za TypeScript.
  4. src / index.html : Ovo je prva datoteka koja se izvršava zajedno s main.ts kada se stranica učita.
  5. src / app / app.module.ts : Ovo je datoteka u kojoj su definirane sve komponente, dobavljači i moduli. Bez da ih ovdje definiramo, ne mogu se koristiti drugdje u kodu.
  6. src / app / app.component.html: Ovo je glavna komponenta kutne aplikacije, a sve ostale komponente obično su prisutne u ovoj komponenti. src / app / app.component.ts je logika za ovu komponentu, a src / app / app.component.css je CSS za ovu komponentu. Ova komponenta sama po sebi ne čini nikakvu važnu logiku, već djeluje kao spremnik za druge komponente.
  7. dist : U ovoj se mapi nalaze ugrađene datoteke. TypeScript se u osnovi pretvara u JavaScript i rezultirajuće datoteke ovdje se pohranjuju nakon grupiranja i minifikacije. (Ova se mapa pojavljuje samo ako je aplikacija izgrađena. Jednostavni "npm start" neće stvoriti ovu mapu.) Budući da web preglednici razumiju samo JavaScript (barem za sada), stoga je potrebno pretvoriti TypeScript u JavaScript prije postavljanja koda . Da biste vidjeli ovu mapu, u naredbeni redak možete upisati sljedeće:
npm run build

Postoji i nekoliko drugih datoteka, ali za početak je dobro znati ove osnovne

TypeScript

Angular 6 koristi TypeScript za implementaciju logike. Onima koji su radili na Javi TypeScript će biti vrlo lak. TypeScript je jezik izgrađen na vrhu JavaScript-a, ali koji je siguran za tip, a TypeScript se pak kompajlira u JavaScript

Izrada komponenata i usluga

  1. Komponenta : Komponenta u Angularu obavlja određenu funkciju. Kutna aplikacija izrađuje se pomoću različitih komponenata. Kutni CLI može se koristiti za jednostavno stvaranje komponenata. Sintaksa je ng generirajuća komponenta [ime]. Upotrijebite sljedeću naredbu za stvaranje komponente koja se naziva "kupci".
ng generate component customers

2. Gornja naredba stvara mapu koja se zove kupci unutar src / app . Stvorena komponenta sadrži:

  • customers.component.html datoteka odlučiti predložak (kako je komponenta korisničkog sučelja treba izgledati)
  • customers.component.ts datoteka koja je, gdje je prisutna logika
  • customers.component.css datoteka koja ima CSS sadržaj
  • i datoteku customers.component.spec.ts koja se koristi za jedinstveno testiranje (specifikacije neće biti objašnjene u ovom postu).

3. Usluga : Usluga u osnovi pruža funkcionalnost koju može koristiti bilo koja komponenta. Usluga se može dijeliti između svih komponenata ili može biti ograničena na određenu komponentu (u uslugu se može staviti bilo koja logika za višekratnu upotrebu). Kutni CLI može se koristiti i za stvaranje usluga. Sintaksa je ng generira uslugu [ime]. Koristite sljedeću naredbu za stvaranje usluge koja se naziva "podaci":

ng generate service data

4. Usluga se kreira u src / aplikaciji. Stvorena usluga ima datoteku data.service.ts koja ima logiku i datoteku data.service.spec.ts za jedinstveno testiranje.

Čestitamo ?

Uspješno ste stvorili svoju prvu aplikaciju Angular 6, a naučili ste i kako stvoriti komponente i usluge. Također ste sada naučili osnovnu strukturu mapa projekta Angular 6. Sljedeći će dio objasniti postojeći GitHub kôd kako bi pokazao kako se koriste komponente, usluge, HTTP klijent i komunikacija između komponenata.

2. dio

Kodirati

Ovdje se objašnjava ovaj kôd, zato klonirajte repo na svoj lokalni stroj. Repo sadrži upute za kloniranje i postavljanje.

URL aplikacije

Da biste vidjeli kako izgleda konačna prijava, možete kliknuti na ovaj URL. To će vam dati dobru ideju o tome što aplikacija pokušava učiniti.

Aplikacija bi na mobilnom zaslonu izgledala ovako:

Što radi ova aplikacija?

Cilj aplikacije je prikazati popis kupaca u obliku kartica. Kada se klikne na podatke o kupcu, aplikacija se prebacuje na novu stranicu koja zatim prikazuje detalje o odabranom kupcu.

Objašnjena struktura primjene

Stvorene komponente su:

  1. CustomersComponent : Ovo odgovara mapi src / app / customers . Ova komponenta služi za prikaz popisa kupaca. U customers.component.tsdatoteka ima funkciju koja se naziva ngOnInit () . Ova se funkcija poziva kad god se komponenta učita. Tako se ova funkcija može koristiti za učitavanje podataka za komponentu. Ti se podaci učitavaju pozivanjem funkcije getCustomerList () . getCustomerList () zauzvrat poziva podatkovnu uslugu da bi dobio potrebne podatke.
  2. CustomerdetailsComponent : Ovo odgovara mapi src / app / customerdetails . Ova komponenta prikazuje detalje za pojedinog odabranog kupca. Datoteka customerdetails.component.ts ima funkciju ngOnInit () koja se može koristiti za učitavanje podataka. Za učitavanje podataka poziva se funkcija getCustomerDetails () . Ova funkcija upućuje poziv podatkovnoj službi kako bi dobila potrebne podatke. Ali ovdje ćete primijetiti i upotrebu routeParams.id koji se šalje usluzi. routeParams koristi se za dobivanje parametara iz URL-a aplikacije i id-aparametar se koristi za otkrivanje za kojeg kupca trebaju biti učitani detalji. To će postati jasnije kad prijeđem na dio usmjeravanja.
  3. DisplayComponent : Ovo odgovara mapi src / app / display . Ova komponenta prikazuje ime kupca kliknuto u CustomersComponent. (Cijela poanta ove komponente je demonstriranje komunikacije roditelj-dijete-komponenta.) Ovo je podređena komponenta CustomersComponent . U kupcima.component.htmlprimijetit ćete to .To čini DisplayComponent podređenom komponentom CustomersComponent . Podaci se prenose iz CustomerComponent u DisplayComponent pomoću atributa [customer] .

Uzorak podataka

Podaci uzorka prisutni su u mapi src / assets / samplejson .

Stvorene usluge su:

  1. DataService : Ovo odgovara src / app / data.service.ts . Sav JSON korišten u aplikaciji pohranjen je u mapu src / assets / samplejson . DataService pomaže u dobivanju JSON-a iz mape src / assets / samplejson pomoću HTTP zahtjeva. U stvarnim aplikacijama usluga pomaže u dobivanju podataka s API-ja za odmor ili bilo kojeg drugog API-ja postavljanjem HTTP zahtjeva. Ovu uslugu koriste obje komponente CustomersComponenti CustomerdetailsComponent.

Klase modela koje se koriste su:

  1. Kupac : Ovo odgovara src / app / customer.ts . Ovo je klasa modela koja se koristi za CustomersComponent za definiranje strukture svakog kupca na popisu.
  2. CustomerDetails : Ovo odgovara src / app / customerdetails.ts . Ovo je klasa modela koja se koristi za CustomerdetailsComponent za definiranje strukture koja sadrži sve pojedinosti o kupcu.

Modul usmjeravanja

Modul usmjeravanja definiran je u src / app / app-routing.module.ts . Ovaj se modul zatim primjenjuje na aplikaciju dodavanjem u app.component.html.

U aplikaciji su prisutne 2 rute:

  1. / kupci : Ovaj URL prikazuje popis kupaca i usmjerava na CustomersComponent.
  2. / customerdetails /: id : Ovaj URL prikazuje detalje za svakog kupca i usmjerava na CustomerdetailsComponent . ID koji je prisutan u ovom URL-u je routeParam. Ovaj idzauzvrat se koristi CustomerdetailsComponent da bi znao koje podatke o kupcu treba prikazati. Za primjer / customerdetails / 1 prikazat će detalje prvog kupca, / customerdetails / 3 prikazat će detalje 3. kupca, i tako dalje.

Opet čestitke ?

Sada znate koristiti komponente i usluge. Također znate kako upućivati ​​HTTP pozive, kako koristiti usmjeravanje i kako proći routeParams.

Osnovni koncepti obrađeni su u ovom postu i nadam se da je bio koristan.

Reference:

  1. Da biste saznali više o Angulu, možete provjeriti dokumentaciju //angular.io/guide/quickstart. Dokumentacija je vrlo dobra za razumijevanje daljnjih koncepata kutnih

O autoru

Volim tehnologiju i pratim tehnološki napredak. Također volim pomagati drugima bilo kojim znanjem koje imam u tehnološkom prostoru.

Slobodno se povežite sa mnom na svom LinkdIn računu //www.linkedin.com/in/aditya1811/

Možete me pratiti i na twitteru //twitter.com/adityasridhar18

Moja web stranica: //adityasridhar.com/

Ostali srodni postovi od mene

Kratki vodič koji će vam pomoći da razumijete i izradite ReactJS aplikacije

Kratki uvod u Vue.js