Configuració bàsica d’estructures angulars i de components (creació d’una aplicació de comerç electrònic mitjançant Angular i Firebase Cloud Firestore): primera part

Angular és una plataforma d'aplicacions web de codi obert basada en TypeScript, liderada per l'equip Angular de Google.

Angular JS i Angular són completament diferents. Si no sou Angular JS (o Angular 1.x), no us preocupeu, tampoc no hi he treballat mai. Angular 2 i les versions anteriors són bastant senzilles com Angular 1.x.

El que probablement necessiteu:

  • Node.js

Comproveu si Node.js està instal·lat.

  • NPM

Verifiqueu que NPM (Node Package Manager) estigui instal·lat

Comproveu la versió de Node.js i NPM:

Node -v
npm -v
  • Instal·leu CLI angular (interfície de línia d'ordres):
npm i -g @ angular / cli

Assegureu-vos que obteniu la versió més recent. Obteniu més informació sobre Angular CLI aquí.

  • Conceptes bàsics de JavaScript.
  • Fonaments bàsics de Bootstrap.

Angular és un marc construït completament en TypeScript. L’ús de TypeScript amb Angular és una experiència perfecta. A la documentació Angular, TypeScript no només s'admet com a ciutadà principal, sinó que també s'utilitza com a idioma principal.

Però no us preocupeu, TypeScript és molt similar a JavaScript. Si coneixeu JavaScript, heu arribat al lloc adequat.

Ara que tenim el nostre entorn llest, podem continuar.

Comencem

La CLI angular s’utilitza per generar components, serveis, canonades, rutes i instruccions.

Com es crea un nou tipus d'aplicació angular sota l'ordre:

nou ngCart --routing

Aquí ngCart és el nom de la nostra aplicació. L'ordre anterior crearà una carpeta anomenada ngCart i crearà tots els fitxers que necessitem.

- el senyalador d’encaminament s’utilitza per generar el fitxer app-routing.module.ts que conté tota la informació sobre les rutes.

L'extensió ".ts" s'utilitza per als fitxers TypeScript.

Aquesta és l’estructura de fitxers que obtenim després d’executar l’ordre anterior

No us espanteu, sé que hi ha molts fitxers. Però sobretot treballarem al directori src / app /.

app.component.css conté tot el CSS del component de l'aplicació.

app.component.html conté tot l'HTML del component de l'aplicació.

app.component.ts conté tota la lògica del component de l'aplicació.

app.module.ts s’encarrega de tots els paquets que s’utilitzen a la nostra aplicació.

Per obtenir un aspecte fantàstic utilitzarem Bootstrap 4.

Prepareu Bootstrap CDN per a CSS al fitxer index.html