Osnovne kotne nastavitve in struktura komponent (Kako ustvariti aplikacijo za e-trgovino z uporabo kotne in Firebase Cloud Firestore) - 1. del

Angular je odprtokodna platforma za spletne aplikacije, ki temelji na TypeScript, ki jo pri Googlu vodi Angular Team.

Kotni JS in kotni sta si povsem različni. Če nimate nobene ideje o kotni JS (ali kotni 1.x), ne skrbite, tudi jaz z njo nikoli nisem sodeloval. Angular 2 in prejšnje različice so precej enostavnejši kot Angular 1.x, dobro nam gre.

Kaj verjetno potrebujete:

  • Node.js

Preverite, ali je nameščen Node.js.

  • NPM

Preverite, ali je nameščen NPM (Node Package Manager)

Preverite različico Node.js in NPM:

vozlišče -v
npm -v
  • Namestite kotni CLI (vmesnik ukazne vrstice):
npm i -g @ kotni / cli

Poskrbite, da boste dobili zadnjo različico. Več o kotnem CLI-ju najdete tukaj.

  • Osnove JavaScript.
  • Osnove zagonske kopice.

Angular je okvir, ki je v celoti vgrajen v TypeScript. Uporaba TypeScript z Angularjem zagotavlja brezhibno izkušnjo. Angularna dokumentacija ne samo da podpira TypeScript kot prvovrstnega državljana, ampak ga uporablja kot svoj primarni jezik.

Toda ne skrbite, TypeScript je podoben JavaScript. Če poznate JavaScript, ste zlati.

Zdaj, ko imamo pripravljeno okolje, nadaljujmo.

Začnimo

Kotni CLI se uporablja za ustvarjanje komponent, storitev, cevi, poti in direktiv.

ustvarite novo kotno vrsto aplikacije pod ukazom:

ng nov ngCart - usmerjanje

Tu je ngCart ime naše aplikacije, zgoraj ukaz bo ustvaril mapo z imenom ngCart in naredil vse potrebne datoteke za nas.

- zastava za usmerjanje se uporablja za ustvarjanje datoteke app-routing.module.ts, ki bo vsebovala vse informacije o poteh.

".Ts" je razširitev, ki se uporablja za datoteke TypeScript.

To je struktura datotek, ki jo dobimo po zagonu nad ukazom

Ne čudite se, vem, da obstaja veliko datotek. A večinoma bomo delali v src / app / directory.

app.component.css bo vseboval vse CSS za komponento aplikacije.

app.component.html bo vseboval vse HTML za komponento aplikacije.

app.component.ts bo vseboval vso logiko, povezano s komponento aplikacije.

app.module.ts bo poskrbel za vse pakete, ki se uporabljajo v naši aplikaciji.

Za odličen videz bomo uporabili Bootstrap 4.

Pred datoteko index.html vključite zagonski CDN za CSS v datoteko index.html

V datoteko index.html vključite zagonski CDN za JS pred