Comment créer votre première application Angular 6 en moins de 5 minutes

Démarrez avec une simple application Web Angular 6 s'exécutant localement sur votre ordinateur en moins de 5 minutes.

introduction

Cela va être le début d'une série de billets de blog expliquant comment configurer l'authentification Azure B2C dans une application Angular 6.

Si vous ne savez pas ce qu'est Azure B2C, ne vous inquiétez pas. Je vais tout expliquer plus tard dans la série. Pour l'instant, si vous souhaitez apprendre à créer une application simple Angular 6 en moins de 5 minutes, continuez votre lecture.

Attendez, attendez… Avez-vous installé NODE?

Si vous ne savez pas de quel nœud se trouve et ne l’a pas installé sur votre machine, vous n’allez pas aller très loin.

Alors…

C'est le noeud

Voici comment installer node for mac

Si vous ne voulez pas être dérangé par la lecture de ces articles, exécutez brièvement les commandes suivantes (une après l’autre) pour installer Homebrew et node sur votre machine.

Désolé pour tous les utilisateurs non mac. Cette section suppose que vous êtes sur un Mac. L’alternative Windows pour Homebrew est Chocolatey. La documentation peut être trouvée ici.

Première commande (cela installe homebrew sur votre machine):

/ usr / bin / ruby ​​-e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Deuxième commande (cela utilise homebrew pour installer le noeud sur votre machine):

brassez le noeud d'installation

ok… maintenant nous sommes prêts à partir.

Étape 1: Installez le CLI angulaire

Vous utilisez l’interface de ligne de commande angulaire pour créer des projets, générer du code d’application et de bibliothèque et effectuer diverses tâches de développement en cours, telles que les tests, l’assemblage et le déploiement.

Pour installer la CLI à l'aide de npm (gestionnaire de package de noeud), ouvrez une fenêtre terminal / console et entrez la commande suivante:

npm install -g @ angular / cli

Cela vous demandera des informations sur les fonctionnalités à inclure dans le projet d'application initial, par exemple:

Souhaitez-vous ajouter un routage angulaire? (O / N): O
Quel format de feuille de style aimeriez-vous utiliser?: CSS

Acceptez les valeurs par défaut en appuyant sur la touche Entrée ou Retour.

Étape 2: Créer un espace de travail et une application initiale

Modifiez le répertoire dans un endroit où vous souhaitez installer votre application. Ensuite, exécutez la commande CLI ng new dans le même terminal et donnez un nom à votre application, par exemple, b2c-basic-app, comme indiqué ci-dessous:

Nouveau b2c-basic-app

Remarque: cela a maintenant créé une application appelée "b2c-basic-app" dans le répertoire dans lequel vous avez exécuté la commande. La CLI angulaire installe les packages npm angulaires nécessaires et d’autres dépendances. Cela peut prendre quelques minutes.

L’application initiale créée est un projet très simple contenant une ‘application de bienvenue’ prête à être exécutée.

Étape 3: servir votre application localement

Angular inclut un serveur, de sorte que vous puissiez facilement créer et servir votre application. Pour que votre application soit opérationnelle, suivez les étapes fournies:

  1. Changer de répertoire dans le dossier de l'espace de travail (b2c-basic-app).
  2. Lancez le serveur en exécutant la commande CLI ng serve --open

3. La commande ng serve lance le serveur, surveille vos fichiers et reconstruit l'application au fur et à mesure que vous modifiez ces fichiers.

4. L'option --open (ou just -o) ouvre automatiquement votre navigateur sur http: // localhost: 4200 /.

Vous devriez maintenant pouvoir voir une belle application jubbly Angular 6 s'exécuter localement sur votre ordinateur. Squeezy au citron facile à manger.

Étape facultative 4: Ajout d'un bouton de connexion et d'inscription à votre application

Je vais ajouter deux boutons à l’application. Un pour permettre aux utilisateurs de se connecter et un pour permettre aux utilisateurs de s'inscrire.

  1. Ouvrez le fichier app.component.html qui se trouve dans / app
  1. Collez le code suivant dans le fichier app.component.ts

2. Vous devez maintenant associer les méthodes de connexion et d'inscription du fichier .html à votre fichier .ts. Ouvrez le fichier app.component.ts et remplacez-le par le code suivant:

Remarquez comment j'ai ajouté deux méthodes, login () et signup (). Les deux méthodes déclenchent un simple message d'alerte à l'utilisateur.

Vous devriez maintenant pouvoir charger votre application et cliquer sur les deux boutons. Dont chacune déclenche les méthodes ci-dessus. Ne vous inquiétez pas, nous ajouterons la magie de l’authentification plus tard dans la série. Pour l'instant une alerte popup fera l'affaire.

Votre application devrait ressembler à cette bête sexy:

Page d'accueil de l'application

Voilà. Une application très simple Angular 6 prête à être construite. J'espère que vous avez tout travaillé.

Si vous avez aimé cet article, donnez-moi un coup, cela rend ma journée un peu meilleure.

Article suivant? Cliquez ici pour configurer votre service B2C Azure

Code GITHUB: https://github.com/sambowenhughes/5-minute-angular-app