Configuración básica angular y estructura de componentes (Cómo crear una aplicación de comercio electrónico usando Angular y Firebase Cloud Firestore) - Parte 1

Angular es una plataforma de aplicaciones web front-end de código abierto basada en TypeScript dirigida por el Equipo Angular de Google.

Angular JS y Angular son totalmente diferentes. Si no tiene ninguna idea sobre Angular JS (o Angular 1.x), no se preocupe, yo tampoco trabajé con ella. Angular 2 y las versiones anteriores son bastante más simples que Angular 1.x, estamos listos para comenzar.

Lo que probablemente necesites:

  • Node.js

Compruebe si Node.js está instalado.

  • NPM

Compruebe si NPM (Node Package Manager) está instalado

Verifique las versiones Node.js y NPM:

nodo -v
npm -v
  • Instalar CLI angular (interfaz de línea de comandos):
npm i -g @ angular / cli

Asegúrese de obtener su última versión. Obtenga más información sobre CLI angular aquí.

  • Conceptos básicos de JavaScript.
  • Conceptos básicos de Bootstrap.

Angular es un marco construido completamente en TypeScript. Usar TypeScript con Angular proporciona una experiencia perfecta. La documentación angular no solo es compatible con TypeScript como ciudadano de primera clase, sino que también lo utiliza como su idioma principal.

Pero no se preocupe, TypeScript es bastante similar a JavaScript. Si estás familiarizado con JavaScript, eres dorado.

Ahora que tenemos nuestro entorno listo, procedamos.

Empecemos

La CLI angular se utiliza para generar componentes, servicios, tuberías, rutas y directivas.

para crear un nuevo tipo de aplicación angular debajo del comando:

ng new ngCart - enrutamiento

Aquí ngCart es el nombre de nuestras aplicaciones, el comando anterior creará una carpeta con el nombre ngCart y creará todos los archivos necesarios para nosotros.

- el indicador de enrutamiento se utiliza para generar el archivo app-routing.module.ts que contendrá toda la información sobre las rutas.

".Ts" es una extensión utilizada para archivos TypeScript.

Esta es la estructura de archivos que obtenemos después de ejecutar el comando anterior

No te asustes, sé que hay muchos archivos. Pero principalmente trabajaremos en el directorio src / app /.

app.component.css contendrá todo el CSS para el componente de la aplicación.

app.component.html contendrá todo el HTML para el componente de la aplicación.

app.component.ts contendrá toda la lógica relacionada con el componente de la aplicación.

app.module.ts se encargará de todos los paquetes utilizados en nuestra aplicación.

Para lograr una excelente apariencia usaremos Bootstrap 4.

Incluya Bootstrap CDN para CSS en el archivo index.html antes

Incluya Bootstrap CDN for JS en el archivo index.html antes de