Rövid útmutató az Angular 6 alkalmazások megértéséhez és létrehozásához

Ez a bejegyzés két részre oszlik:

Az első rész bemutatja, hogyan lehet egyszerű Angular 6 alkalmazást létrehozni az Angular CLI segítségével, és elmagyarázza a projekt felépítését.

A második rész elmagyarázza a GitHub-ban közzétett meglévő kódot. Ez a kód bemutatja az összetevők, szolgáltatások, HTTP kliens és az összetevők közötti kommunikáció használatát.

1. rész

Telepítse a Node.js fájlt, ha még nincs meg

Szüksége van a Node.js fájlra, mivel az Angular számára szükséges könyvtárakat a csomópont csomagkezelő (npm) segítségével töltjük le. A Node.js telepítéséhez olvassa el a //nodejs.org/en/ oldalt.

Telepítse a szögletes CLI-t

Az Angular CLI az Angular parancssori felülete, és nagyon hasznos egy Angular 6 projektsablon gyors létrehozásához. Telepítse az Angular CLI npm csomagot globálisan a következő paranccsal:

npm install -g @angular/cli

Hozza létre a projektet

A szögletes CLI nagyon könnyen segít a projekt létrehozásában. A projekt létrehozásához használja a következő parancsot.

ng new simple-angular6-app

simple-angular6-app a projekt neve. Most észreveszi, hogy lát egy egyszerű-angular6-app nevű mappát . A mappa a létrehozott projekt. Annak teszteléséhez, hogy minden megfelelően van-e beállítva, lépjen a projekt mappába, és futtassa az alkalmazást a következő parancsokkal:

cd simple-angular6-app npm start

Lépjen a böngészőjébe, és lépjen a következő URL-re: localhost: 4200. Látnia kell, hogy az alkalmazás fut.

Az alkalmazás így néz ki:

A mappa alapvető felépítése

A projekt létrehozásakor észreveszi, hogy egy csomó fájlt hoz létre. Itt felsorolok néhány fontos fájlt és mappát, amelyekről ismernie kell:

  1. package.json: Ez a fájl tartalmazza a szükséges csomópontfüggőségek listáját.
  2. src / styles.css : Ez a fájl az alkalmazásban elérhető globális CSS- sel rendelkezik.
  3. src / main.ts : Ez az a fő fájl, amely elindítja az Angular alkalmazást (az AppModule itt bootstrapped, ahogy a kódban látható). Itt a .ts kiterjesztés a TypeScript rövidítése.
  4. src / index.html : Ez az első fájl, amely a main.ts mellett futtatható az oldal betöltésekor.
  5. src / app / app.module.ts : Ez az a fájl, ahol az összes összetevő, szolgáltató és modul meg van határozva. Anélkül, hogy itt meghatározná őket, nem használhatók másutt a kódban.
  6. src / app / app.component.html: Ez a szögletes alkalmazás fő összetevője, és az összes többi összetevő általában jelen van ezen az összetevőn belül. Az src / app / app.component.ts az összetevő logikája, az src / app / app.component.css pedig az összetevő CSS- je . Ez az összetevő önmagában nem hajt végre fontos logikát, de más alkatrészek tárolójaként működik.
  7. dist : Ebben a mappában találhatók a beépített fájlok. A TypeScript alapvetően JavaScript-re konvertálódik, és a kapott fájlokat itt tárolja a kötegelés és a tömörítés után. (Ez a mappa csak akkor jelenik meg, ha az alkalmazás ki van építve. Egy egyszerű „npm start” nem fogja létrehozni ezt a mappát.) Mivel a webböngészők csak a JavaScriptet értik (legalábbis egyelőre), ezért a kód telepítése előtt meg kell konvertálni a TypeScript-t JavaScript-be. . A mappa megtekintéséhez írja be a következőket a parancssorba:
npm run build

Számos más fájl is létezik, de ezeknek az alapismereteknek a megismerése jó

Gépelt

Az Angular 6 a TypeScript-et használja a logika megvalósításához. Azok közületek, akik Java-ban dolgoztak, a TypeScript nagyon egyszerű lesz. A TypeScript egy olyan nyelv, amely a JavaScript tetejére épül, de amely típusbiztonságos, és a TypeScript viszont JavaScript-re fordít

Komponensek és szolgáltatások létrehozása

  1. Komponens : Az Angular komponense egy adott funkciót végez. A szögletes alkalmazás különféle komponensek felhasználásával készül. A szögletes CLI felhasználható komponensek egyszerű létrehozására. A szintaxis ng generálja a [name] komponenst. A következő paranccsal hozzon létre egy „ügyfelek” nevű összetevőt.
ng generate component customers

2. A fenti parancs létrehoz egy mappát, amelynek neve ügyfelek az src / app belsejében . A létrehozott komponens a következőkkel rendelkezik:

  • egy customers.component.html fájl a sablon eldöntésére (az összetevő felhasználói felületének hogyan kell kinéznie)
  • egy customers.component.ts fájl, ahol a logika jelen van
  • egy customers.component.css fájl, amely CSS-tartalommal rendelkezik
  • és a customers.component.spec.ts fájlt, amelyet az egység tesztelésére használnak (a specifikációt ebben a bejegyzésben nem szokták elmagyarázni).

3. Szolgáltatás : A szolgáltatás alapvetően olyan funkciókat biztosít, amelyeket bármelyik komponens használhat. A szolgáltatás megosztható az összes összetevő között, vagy korlátozható egy adott összetevőre (bármilyen újrafelhasználható logika beilleszthető a szolgáltatásba). A szögletes CLI használható szolgáltatások létrehozására is. A szintaxis a ng generál szolgáltatás [név]. A következő paranccsal hozzon létre egy „data” nevű szolgáltatást:

ng generate service data

4. A szolgáltatás az src / app belsejében jön létre . A létrehozott szolgáltatásnak van egy data.service.ts fájlja, amely rendelkezik a logikával, és egy data.service.spec.ts fájl az egység teszteléséhez.

Gratulálok ?

Sikeresen létrehozta első Angular 6 alkalmazását, és megtanulta az összetevők és szolgáltatások létrehozását is. Most is megtanulta az Angular 6 projekt alapmappájának felépítését. A következő rész elmagyarázza a meglévő GitHub kódot, hogy bemutassa az összetevők, szolgáltatások, HTTP kliens és az összetevők közötti kommunikáció használatát.

2. rész

Kód

Ezt a kódot itt magyarázzák, ezért klónozza a repót a helyi gépére. A repónak utasításai vannak a klónozásról és a beállításról.

Az alkalmazás URL-je

Erre az URL-re kattintva megtekintheti a végleges alkalmazás megjelenését. Ez jó ötletet nyújt arra vonatkozóan, hogy az alkalmazás mit próbál csinálni.

Az alkalmazás így nézne ki egy mobil képernyőn:

Mit csinál ez az alkalmazás?

Az alkalmazás célja az ügyfelek listájának megjelenítése kártyák formájában. Ha rákattint az ügyféladatokra, az alkalmazás egy új oldalra vált, ahol megjelenik a kiválasztott ügyfél részletei.

Az alkalmazás felépítése elmagyarázva

A létrehozott összetevők a következők:

  1. CustomersComponent : Ez megfelel az src / app / customers mappának. Ez a komponens az ügyfelek listájának megjelenítésére szolgál. Az ügyfelek.komponens.tsa fájlnak van egy ngOnInit () nevű függvénye . Ezt a funkciót akkor hívják meg, amikor az alkatrész betöltődik. Tehát ez a funkció felhasználható az összetevő adatainak betöltésére. Ezeket az adatokat a getCustomerList () függvény meghívásával töltjük be . A getCustomerList () viszont felhívja az adatszolgáltatást, hogy megszerezze a szükséges adatokat.
  2. CustomerdetailsComponent : Ez megfelel az src / app / customerdetails mappának. Ez az összetevő egyetlen kiválasztott ügyfél részleteit jeleníti meg. A customerdetails.component.ts fájl rendelkezik az ngOnInit () függvénnyel, amely felhasználható az adatok betöltésére. Adatok betöltéséhez a getCustomerDetails () függvény meghívásra kerül. Ez a funkció felhívja az adatszolgáltatást a szükséges adatok megszerzéséhez. De itt észreveszi a routeParams.id használatát is, amelyet elküld a szolgáltatásnak. A routeParams paraméterek lekérésére szolgál az alkalmazás URL- jéből és az azonosítóbólparaméter segítségével megtudhatjuk, melyik ügyfél számára kell betölteni a részleteket. Ez egyértelműbbé válik, amikor az útválasztási részhez érek.
  3. DisplayComponent : Ez megfelel az src / app / display mappának. Ez az összetevő megjeleníti az ügyfél nevét, amelyre a CustomersComponent elemre kattintott . (Ennek az összetevőnek az a lényege, hogy bemutassa a szülő és a gyermek közötti kommunikációt.) Ez a CustomersComponent gyermek alkotóeleme . Az customers.component.html fájlbanezt észreveszi .Ezáltal a DisplayComponent a CustomersComponent gyermekkomponensévé válik . Az adatokat az [Customer] attribútum segítségével továbbítják a CustomerComponent- ról a DisplayComponent- re .

A minta adatok

A mintaadatok az src / asset / samplejson mappában vannak.

A létrehozott szolgáltatások a következők:

  1. DataService : Ez megfelel az src / app / data.service.ts fájlnak . Az alkalmazásban használt összes JSON az src / asset / samplejson mappában van tárolva . A DataService segít a JSON lekérésében az src / assets / samplejson mappából egy HTTP-kérés segítségével. Valódi alkalmazásokban a szolgáltatás HTTP-kérelem készítésével segít az adatoknak a Rest API-ból vagy bármely más API-ból való megszerzésében. Ezt a szolgáltatást mind a CustomersComponent használjaés a CustomerdetailsComponent.

Használt modellosztályok:

  1. Ügyfél : Ez megfelel az src / app / customer.ts fájlnak . Ez az a modellosztály, amelyet a CustomersComponent használ, hogy meghatározza az egyes vevők struktúráját a listában.
  2. CustomerDetails : Ez megfelel az src / app / customerdetails.ts fájlnak . Ez a modellosztály használható a CustomerdetailsComponent számára, hogy meghatározza a vevő összes adatait tartalmazó struktúrát.

Útválasztó modul

Az útválasztási modult az src / app / app-routing.module.ts fájlban definiáljuk . Ezt a modult ezután alkalmazza az alkalmazás az app.component.html fájlban.

2 útvonal van jelen az alkalmazásban:

  1. / ügyfelek : Ez az URL megjeleníti az ügyfelek listáját, és rámutat a CustomersComponent elemre.
  2. / customerdetails /: id : Ez az URL megjeleníti az egyes ügyfelek adatait, és rámutat a CustomerdetailsComponent elemre . Az id amely jelen van ez az URL a routeParam. Ez az idviszont a CustomerdetailsComponent használja, hogy megtudja, melyik ügyfél adatait jelenítse meg. Például az / customerdetails / 1 megjeleníti az első vásárló adatait, az / customerdetails / 3 a 3. ügyfél adatait és így tovább.

Még egyszer gratulálok ?

Most már tudja, hogyan kell használni az alkatrészeket és szolgáltatásokat. Azt is tudja, hogyan kell HTTP-hívásokat kezdeményezni, hogyan kell használni az útválasztást és hogyan kell átadni az routeParams-t.

Az alapfogalmakkal ez a bejegyzés foglalkozott, és remélem, hogy hasznos volt.

Referenciák:

  1. Ha többet szeretne megtudni az Angularról, nézze meg a //angular.io/guide/quickstart dokumentációt. A dokumentáció nagyon jó a szög további fogalmainak megértéséhez

A szerzőről

Szeretem a technológiát, és követem a technika fejlődését. Szeretem másoknak is segítséget nyújtani a technológiai tér bármely tudásával.

Lépjen kapcsolatba velem nyugodtan a LinkdIn-fiókomon //www.linkedin.com/in/aditya1811/

Kövess engem a twitteren //twitter.com/adityasridhar18

Webhelyem: //adityasridhar.com/

Egyéb kapcsolódó hozzászólásaim

Gyors útmutató a ReactJS alkalmazások megértéséhez és létrehozásához

A Vue.js gyors bemutatása