Osnovne kutne postavke i struktura komponenata (Kako stvoriti aplikaciju za e-trgovinu pomoću Angularne i Firebase Cloud Firestore) - 1. dio

Angular je platforma za web-programe otvorenog koda zasnovana na TypeScript platformi koju vodi Googleov tim Angular.

Kutni JS i Kutni su potpuno različiti. Ako nemate ideju o kutnom JS-u (ili kutnom 1.x), ne brinite, ja se nikad nisam suočio s tim. Angular 2 i ranije verzije prilično su jednostavniji od Angular 1.x, dobro je ići.

Ono što vam vjerojatno treba:

  • Node.js

Provjerite je li instaliran Node.js.

  • NPM

Provjerite je li instaliran NPM (Node Package Manager)

Provjerite verziju Node.js i NPM:

čvor -v
npm -v
  • Instalirajte kutni CLI (sučelje naredbenog retka):
npm i -g @ kutni / cli

Obavezno nabavite njegovu najnoviju verziju. Saznajte više o kutnom CLI-u ovdje.

  • Osnove JavaScript-a.
  • Osnove pokretanja

Angular je okvir u potpunosti izgrađen u TypeScript-u. Upotreba TypeScript-a sa Angularom pruža besprijekoran doživljaj. Angularna dokumentacija ne samo da podržava TypeScript kao prvorazrednog građanina, već ga koristi kao svoj primarni jezik.

Ali ne brinite, TypeScript je sličan JavaScript-u. Ako ste upoznati sa JavaScriptom, zlatni ste.

Sada kada smo spremili svoje okruženje, nastavimo.

Započnimo

Kutni CLI koristi se za generiranje komponenti, usluga, cijevi, ruta i direktiva.

za stvaranje nove kutne vrste aplikacije ispod naredbe:

ng new ngCart - usmjeravanje

Ovdje je ngCart naziv naše aplikacije, iznad naredbe će se stvoriti mapa s imenom ngCart i napraviti sve potrebne datoteke za nas.

- zastava usmjeravanja koristi se za generiranje datoteke app-routing.module.ts koja će sadržavati sve informacije o rutama.

".Ts" je proširenje koje se koristi za TypeScript datoteke.

Ovo je struktura datoteke koju dobivamo nakon što trčimo iznad naredbe

Ne brani se, znam da ima puno datoteka. Ali uglavnom ćemo raditi u src / app / directory.

app.component.css sadržavat će sve CSS za komponentu aplikacije.

app.component.html sadrži sav HTML za komponentu aplikacije.

app.component.ts će sadržavati svu logiku vezanu za komponentu aplikacije.

app.module.ts pobrinut će se za sve pakete koji se koriste u našoj aplikaciji.

Za postizanje sjajnog izgleda upotrijebit ćemo Bootstrap 4.

Uključite Bootstrap CDN za CSS u datoteku index.html prije

Uključite Bootstrap CDN za JS u datoteku index.html prije