Welcome

Angular-Tuto.com

Angular-Tuto.com

Installation Angular 7

Installation & Premier exemple Angular 7

Introduction

Dans ce Tutoriel on va installer l’environnement de travail et démarrer notre première application hello world. On va se limiter sur des outils et des framework open source seulement. Donc pas besoin d’acheter des licences ou cracker des outils.

Dans cet article on va suivre une approche détaillée pour comprendre la structure d'un projet Angular.

TypeScript

Comme on a vu dans le tutorial précédent: il est nécessaire d’installer TypeScript avant de commencer le codage. Car TypeScript a besoin d’un compilateur installé. Le lien de télechargement de TypeScript est: Site officiel TypeScript

Visual Studio Code

Pour travailler avec Angular2 il est possible de travailler sur plusieurs IDE (Comme Visual studio 2015, 2017 ou autre ou autre), mais dans notre cas on va travailler avec Visual Studio Code qui est à son tour un environnement de développement open source et gratuit. Oui c’est un produit Microsoft mais Open Source : La plus grande surprise que c’est un produit qui travaille sur Windows, Linux et MacOS.
Lien de télechargement VS Code.

NodeJS

Selon Wikipedia Node.js est une plateforme logicielle libre et événementielle en JavaScript. Tout simplement, en l’utilise pour créer un serveur web côté serveur qui permet d'exécuter du Code TypeScript. Il est utilisé pour créer des applications web I/O Intensives comme les sites de Streaming et SinglePage Sites. Donc on a pas besoin d’un langage serveur comme C# ou Java. Il suffit du code TypeScript qui va être compilé et exécuté par NodeJS. Vous pouvez télécharger et installer NodeJS à partir de ce lien: Site officiel NodeJS.
Pour vérifier que NodeJS est bien installé il suffit de lancer cette commande à partir de votre Terminal Command (cmd).
NodeJS -V

Répertoire du travail

NPM ou “Node Packaged Modules” est un outil qui permet d’installer les dépendances. c.a.d pour lancer une application angular 2 on a besoin de plusieurs modules qui font la conversion, la compilation ou autres actions. NPM a le rôle de trouver les packages nécessaires et il les installes dans le répertoire de l’application. Aussi il permet de lancer l’application. Donc si NodeJS est bien installé, il est moment d’installer NPM en suivant les étapes suivantes:

Positionnez-vous sur le répertoire de travail exemple Bureau/MonProjet
> cd /.../Bureau/MonProjet
> npm install
NB. Il faut installer NPM sur le répertoire de l’application
Dès que NPM est installé sur votre répertoire de travail, il va lancer l’application sur votre navigateur par défaut.

Etape 0: Structure du Projet.

Il faut avoir une structure du projet bien définie pour que l’application angular 2 tourne correctement. Cette structure est basée sur un ensemble des fichiers de configuration et du code.

La structure finale des fichiers et des dossiers peut être comme suivant:

Installation Angular 7 Installation Angular 7

avec (D1) et (D2) sont deux répertoire et le reste (F1 → F8) sont des fichiers à créer.
Commençons, maintenant avec les fichiers de configuration:

Etape1: Fichiers de configuration:

Dans Angular2, nous avons plusieurs fichiers de configuration à savoir:

  • Package.json: C’est un fichier de configuration NPM. Il contient des configuration Angular 2. Ces configurations permettent d’installer les autres packages en relation, en utilisant NPM.
  • tsconfig.json: Tous les fichiers TypeScript (*.ts) seront compilés et convertis vers des fichiers JavaScript(*.js). Ce que permet, aux différents navigateurs, de lire ces fichiers. Pour assurer cette action on fait appel au fichier tsconfig.json.

Etape2: Fichiers de l’application

  • Styles.css: est un simple fichier css permettant de créer des styles pour notre application Angular 2.
  • Index.html: c’est notre page de démarrage. Elle contient les appels vers les components Angular 2. Notez bien que le nom par défaut de la page de démarrage est index.html ce nom peut être changé.

Etape3: Dossier généré

Le dossier (D2) nommé “node_modules” est un dossier généré automatiquement. en fait après l'exécution de deux commandes dont on a parlé précédemment
> cd /.../Bureau/MonProjet
> npm install
le dossier (D2) sera généré. Ainsi (D2) est un dossier qui contient un ensemble des fichiers des configurations qui sont utilisés par NPM pour gérer les dépendances nécessaires.

Etape4: Dossier de l’application

  • Le dossier (D1) peut être nommé comme vous voulez. Dans notre cas on a choisi de le nommé app. “app” aussi est le nom que nous l’avons choisi pour notre application.
  • app.component.ts On commence par créer un fichier pour notre component. Il faut mettre en consideration que parmi les règles d’art dans Angular2 il faut créer chaque component dans un fichier séparé. Aussi chaque composant doit être nommé comme suivant NomComponent.component.ts. Comme notre component est app donc il fallait créer un fichier app.component.ts
  • app.module.ts: Angular2 est modulaire. Tout est créé sous forme des modules. Chaque module est composé par un ensemble des components. Dans chaque module on déclare les components qui sont exposables. cette exposition se produit à l’aide de l’instruction declarations: [ app.AppComponent ],
  • main.ts : est le fichier de démarrage. Il permet de définir les modules avec l’application va démarrer. On les appelles les modules “Bootstrap”. L’instruction .bootstrapModule(app.AppModule);
    permet de dire que le module app.AppModule, qu’on a créé précédemment, est un module à charger (Bootstrap) au moment de démarrage de l’application.

Etape5:Lancer votre application

Après la préparation de tous les fichiers nécessaires. Il est temps de faire appel à NPM pour lancer l’application. Donc il suffit, en utilisant l’invite des commande, de se positionner sur l’emplacement de l’application puis NPM start

Installation Angular 7

Angular CLI

Dans la partie précédente, on a vu les outils et frameworks nécessaires pour travailler sur un projet Angular. Et on a parlé de l'architecture du projet Angular.

Ne vous inquietez pas car on vous allez voir une méthode plus rapide et plus simple pour créer et lancer votre application Angular. C'est en utilisant Angular CLI

Angulaire CLI c'est Interface de ligne de commande angulaire. Comme son nom l'indique, il s'agit d'un outil de ligne de commande permettant de créer des applications angulaires.

Il est très recommandé d'utiliser angular cli pour créer des applications angular, car vous n'avez pas besoin de passer du temps à installer et à configurer toutes les dépendances requises et à tout câbler ensemble.

Pour travailler avec ANGULAR CLI, rien n'est plus simple.

  • Il faut commencer par télécharger et installer NodeJS. Voir partie précédentes.
    Node.js est côté serveur, il permet de compiler et exécuter le Code JavaScript dans le serveur au lieu du navigateur du client
    Dans angular, node.js est utilisé en arrière-plan pour faire le Bundle et l'optimisation du projet
  • Nous allons utiliser NPM (node package manager) pour gérer les dépendances des projets ainsi que de NodeJS. NPM sera installer avec AngularCLI, donc pas besoin de l'installer pour l'instant.
  • Pour installer Angular CLI (Merci de visiter l’URL :Site officiel) Installation Angular CLI

Par la suite il faut suivre les étapes suivantes :

Etape 1

Après l’installation de NodeJS, lancer une cmd avec le mode administrateur et taper la commande suivante:
npm install -g @angular/cli@latest
Cette commande installera la dernière version de Angular CLI Installation Angular CLI

Etape 2

En utilisant la ligne de commande positionnez-vous dans la racine du dossier dans lequel vous souhaitez créer votre nouveau projet. Dans mon cas j’ai créer un dossier C:\AngularTuto\PremierProjet. et j’ai lancé la commande :
cd C:\AngularTuto\PremierProjet

Installation Angular CLI

Etape 3

Le but de cette étape est de créer un nouveau projet Angular. Dans le répertoire choisi créer un nouveau projet en lançant la commande 'ng new suivi' par le nom de l'application ou du projet choisi.

Insta

Angular CLI va vous poser deux petites questions
La première voulez-vous gérer le routage (On va parler du rotage dans un temps futur) répondez non en utilisant la lettre N suivi par entrée.

Insta

La deuxième question concerne le style taper directement entrée.

Insta

Résultat, final, vous trouvez que tout les fichiers sont créés dans le répertoire mentionné.

Insta

Lancer l'application

Pour lancer l’application, il suffit d’utiliser la cmd et se positionner dans le bon répertoire puis taper “ng serve” puis Enter.

Insta

Si tout va bien, vous recevez un message de confirmation

Insta

Lancez votre navigateur et allez sur l’adresse par défaut localhost:4200. Félicitation votre premier projet tourne

Insta

Conclusion

On a vu la structure d'un projet Angular. Puis on a rencontré Angular CLI que je recommande pour installer et lancer des projets Angular.

L'article suivant sera dédié pour comprendre le lien entre les différentes parties et fichier d'un projet Angular


Commentaires (0)

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)