Nurga seadistamine ja komponendi põhistruktuur (kuidas luua nurga- ja Firebase-pilverestoreid kasutades e-kaubanduse rakendus) - 1. osa

Angular on TypeScriptil põhinev avatud lähtekoodiga esiotsa veebirakenduste platvorm, mida juhib Google'i Angular Team.

Nurk JS ja Nurk on täiesti erinevad. Kui teil pole ideed nurga JS (või nurga 1.x) kohta, siis ärge muretsege, et ma ka pole sellega kunagi töötanud. Nurk 2 ja endised versioonid on üsna lihtsamad kui nurk 1.x, meil on hea minna.

Mida te tõenäoliselt vajate:

  • Node.js

Kontrollige, kas Node.js on installitud.

  • NPM

Kontrollige, kas NPM (Node Package Manager) on installitud

Kontrollige Node.js ja NPM-i versiooni:

sõlm -v
npm -v
  • Installige nurk CLI (käsurea liides):
npm i -g @ nurk / kl

Veenduge, et saaksite selle uusima versiooni. Lisateavet nurga CLI kohta leiate siit.

  • JavaScripti põhitõed.
  • Bootstrap'i põhitõed.

Nurga all on täielikult TypeScripti sisseehitatud raamistik. TypeScripti kasutamine nurga all pakub sujuvat kogemust. Nurgadokumentatsioon mitte ainult ei toeta TypeScripti kui esimese klassi kodanikku, vaid kasutab seda ka oma peamise keelena.

Kuid ärge muretsege, et TypeScript sarnaneb suuresti JavaScriptiga. Kui olete JavaScriptiga tuttav, olete kuldne.

Nüüd, kui meie keskkond on valmis, jätkakem.

Alustame

Nurga CLI-d kasutatakse komponentide, teenuste, torude, marsruutide ja direktiivide genereerimiseks.

uue nurgarakenduse tüübi loomiseks käsu alt:

uus ngCart - marsruut

Siin on ngCart meie rakenduste nimi, ülaltoodud käsk loob kausta nimega ngCart ja teeb meile kõik vajalikud failid.

- marsruutimislippu kasutatakse faili app-routing.module.ts genereerimiseks, mis sisaldab kogu teavet marsruutide kohta.

„.Ts” on laiend, mida kasutatakse TypeScripti failide jaoks.

See on failistruktuur, mille saame pärast käsu kohal käimist

Ära väri, ma tean, et faile on palju. Kuid enamasti töötame src / app / kataloogis.

app.component.css sisaldab kõiki rakenduse komponendi CSS-e.

app.component.html sisaldab kogu rakenduse komponendi HTML-i.

app.component.ts sisaldab kogu rakenduse komponendiga seotud loogikat.

app.module.ts hoolitseb kõigi meie rakenduses kasutatavate pakettide eest.

Suurepärase väljanägemise saavutamiseks kasutame Bootstrap 4.

Lisage CSS-i alglaadimiste CDN enne faili index.html

 

Nüüd astuge oma rakenduse juurkataloogi ja rakenduse käivitamiseks tippige käsk allpool.

ng s -o

Lipp „- o” avab brauseris meie rakenduse.

Põhirakendus on valmis

Kui näete, et brauseris avanes midagi sellist, siis õnnitlesite, et lõite just nurgarakenduse.

Kuid see pole see, mida me tahame.

Teeme siis mõned projekti jaoks vajalikud komponendid.

Meie komponentide struktuur on näidatud alloleval pildil

Komponendi struktuur

Komponentide genereerimiseks täitke allpool olevad käsud.

Veenduge, et olete rakenduse juurkataloogis (/ ngCart)

n g g administraator

See käsk loob 4 faili ja värskendab faili app.module.ts

ng g c komponent

Alamkomponentide genereerimiseks sattuge vanemate komponentide kausta ja käivitage käsud, nagu allpool näidatud.

Nüüd genereerime ka kataloogi / teenused, milles allpool oleva käsu abil genereerime ostukorvi teenuse.

ng teenusekäru

Nüüd looge UserComponent, nagu on näidatud alloleval pildil.

Nüüd oleme komponentide genereerimisega lõpetanud, impordime need faili 'app.module.ts'. Nagu näeme, et Nurk-CLI juba impordib meile kõik komponendid, peame importima ainult teenuseid.

Ja ärge unustage lisada teenusepakkujate massiivi ka teenuste nimesid.

Teeme nüüd mõned marsruudid, selleks peame värskendama rakendust-routing.module.ts. Kopeerige lihtsalt failide 'app.module.ts' kõik komponentide impordi avaldused faili 'app-routing.module.ts'.

importige {AppComponent} saidist './app.component';
importige {AdminComponent} saidist './admin/admin.component';
importige {AdminProductsComponent} saidist './admin/admin-products/admin-products.component';
importige {AdminUsersComponent} saidist './admin/admin-users/admin-users.component';
impordi {ProductsComponent} saidist './products/products.component';
importige {CartComponent} saidist './products/cart/cart.component';
impordi {UserComponent} saidist './user/user.component';
importige {SignInComponent} saidist './user/sign-in/sign-in.component';
importige {SignUpComponent} saidist './user/sign-up/sign-up.component';

Kleepige allpool kood enne märksõna „@NgModule”.

const marsruudid: marsruudid = [
{tee: '', komponent: UserComponent},
 {tee: 'kasutaja', komponent: UserComponent,
     lapsed: [
       {tee: '', komponent: SignInComponent},
       {tee: 'sisselogimine', komponent: SignInComponent},
       {tee: 'registreerumine', komponent: SignUpComponent}
     ]
 },
 {tee: 'tooted', komponent: ProductsComponent,
  lapsed: [
       {tee: 'ostukorv', komponent: CartComponent}]
 },
 {tee: 'admin', komponent: AdminComponent,
  lapsed: [
       {tee: 'tooted', komponent: AdminProductsComponent},
       {tee: 'kasutajad', komponent: AdminUsersComponent}
     ]
 }
];

Eespool olev kood on üsna lihtne, saate idee marsruutide kohta.

Emakomponendid on siin UserComponent, ProductsComponent ja AdminComponent.

Muutke faile user.component.html, products.component.html ja admin.component.html ja lisage kood allpool.

 

Muutke ka rakendust app.component.html, kustutage kogu kood ja kleepige selle alla kood.

 

Nüüd on lõpuks tehtud kõik seadistused, mida meil rakenduse tegemiseks vaja on.

Proovime külastada meie rakenduse kaudu mõnda marsruuti.

lihtsalt kirjutage CMD-s või terminalis käsu alla.

ng s -o

Avaneb brauseriaken ja saate midagi sellist.

Proovige kõiki võimalikke marsruute nagu allpool.

/ kasutaja/ kasutaja / sisselogimine/ kasutaja / registreerumine/ admin/ admin / tooted/ admin / kasutajad/tooted/ käru

See on see;) Selle osa jaoks kujundame järgmises osas meie rakenduse alglaadimise 4 abil stiili. Seniks saate oma rakenduse üles ja töötama.

Nurga all on lihtsam kui arvate. Angular on üks parimatest JavaScripti teekidest ning sellel on suur tugi ja tore kogukond. Sellel on ka tööriistu, mis muudavad töötamise nurgaga kiireks ja lihtsaks, nagu see, mida kasutasime nurga CLI abil.

Jagage seda postitust neile, kes on hädas nurgaga 2 ja aidake neil alustada, see on neile suur abi.

Õnnelik kodeerimine.

Täname huvi eest Andke mulle oma mõtetest teada. Mul on alati hea meel tagasisidet saada. Ja kommenteerige ka siis, kui teil on küsimusi.

Siin on link nurga 2.X kursusele:

  • õppida nurga2 (kursuse)

Jälgi mind Instagramis (@_whatifi) Mulle meeldib teha ka võluvideoid.