Configuration angulaire de base et structure des composants (Comment créer une application de commerce électronique à l'aide de Firestore Cloud Angular et Firebase) - Partie 1

Angular est une plate-forme d’application Web frontale open-source basée sur TypeScript, dirigée par l’équipe Angular de Google.

Angular JS et Angular sont totalement différents. Si vous n'avez pas d’idée sur Angular JS (ou Angular 1.x), ne vous inquiétez pas, je n’ai jamais travaillé avec. Angular 2 et les versions précédentes sont plus simples que Angular 1.x, nous sommes prêts à partir.

Ce dont vous avez probablement besoin:

  • Node.js

Vérifiez si Node.js est installé.

  • MNP

Vérifier si NPM (Node Package Manager) est installé

Vérifiez la version de Node.js et NPM:

noeud -v
npm -v
  • Installer une interface de ligne de commande (Angular CLI):
npm i -g @ angular / cli

Assurez-vous que vous obtenez sa dernière version. En savoir plus sur la CLI angulaire ici.

  • Bases de JavaScript.
  • Notions de base sur le bootstrap.

Angular est un framework construit entièrement en TypeScript. L'utilisation de TypeScript avec Angular offre une expérience transparente. La documentation Angular prend non seulement en charge TypeScript en tant que citoyen de première classe, mais l’utilise comme langue principale.

Mais ne vous inquiétez pas, TypeScript est assez similaire à JavaScript. Si vous connaissez JavaScript, vous êtes en or.

Maintenant que notre environnement est prêt, commençons.

Commençons

La CLI angulaire est utilisée pour générer des composants, des services, des tuyaux, des itinéraires et des directives.

pour créer un nouveau type d'application angulaire sous la commande:

ng new ngCart --routing

NgCart correspond au nom de nos applications. La commande ci-dessus crée un dossier avec le nom ngCart et crée tous les fichiers nécessaires.

- indicateur de routage utilisé pour générer le fichier app-routing.module.ts qui contiendra toutes les informations sur les itinéraires.

«.Ts» est une extension utilisée pour les fichiers TypeScript.

Ceci est la structure de fichier que nous obtenons après avoir exécuté la commande ci-dessus

Ne paniquez pas, je sais qu'il y a beaucoup de fichiers. Mais nous travaillerons principalement dans le répertoire src / app /.

app.component.css contiendra toute la CSS pour le composant d'application.

app.component.html contiendra tout le code HTML du composant d'application.

app.component.ts contiendra toute la logique liée au composant de l'application.

app.module.ts prendra soin de tous les paquets utilisés dans notre application.

Pour obtenir un look superbe, nous utiliserons Bootstrap 4.

Incluez CDN Bootstrap pour CSS dans le fichier index.html avant

Inclure CDN Bootstrap pour JS dans le fichier index.html avant