Débuter avec Angular

Installation d’Angular en utilisant angular-cli

Cet exemple est une configuration rapide d’Angular et explique comment générer un exemple de projet rapide.

Conditions préalables:

  • [Node.js 6.9.0][1] ou supérieur.
  • [npm][2] v3 ou supérieur ou yarn.
  • [Typings][typings] v1 ou supérieur.

Ouvrez un terminal et exécutez les commandes une par une :

npm install -g typings ou yarn global add typings

npm install -g @angular/cli ou yarn global add @angular/cli

La première commande installe la [bibliothèque de typages][typings] globalement (et ajoute l’exécutable typings à PATH). Le second installe @angular/cli globalement, en ajoutant l’exécutable ng à PATH.

Pour configurer un nouveau projet

Naviguez avec le terminal vers un dossier dans lequel vous souhaitez configurer le nouveau projet.

Exécutez les commandes :

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Voilà, vous avez maintenant un exemple de projet simple réalisé avec Angular. Vous pouvez maintenant accéder au lien affiché dans le terminal et voir ce qu’il exécute.

A ajouter à un projet existant

Accédez à la racine de votre projet actuel.

Exécutez la commande :

ng init

Cela ajoutera l’échafaudage nécessaire à votre projet. Les fichiers seront créés dans le répertoire courant, assurez-vous donc de l’exécuter dans un répertoire vide.

Exécuter le projet localement

Pour voir et interagir avec votre application pendant son exécution dans le navigateur, vous devez démarrer un serveur de développement local hébergeant les fichiers de votre projet.

ng serve

Si le serveur a démarré avec succès, il doit afficher une adresse à laquelle le serveur s’exécute. Généralement c’est ça :

http://localhost:4200

Prêt à l’emploi, ce serveur de développement local est connecté à Hot Module Reloading, de sorte que toute modification apportée au html, au tapuscrit ou au css déclenchera le rechargement automatique du navigateur (mais peut être désactivé si vous le souhaitez).

Génération de composants, directives, tuyaux et services

La commande ng generate <scaffold-type> <name> (ou simplement ng g <scaffold-type> <name>) vous permet de générer automatiquement des composants Angular :

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false

Il existe plusieurs types d’échafaudages possibles que angular-cli peut générer :

Type d’échafaudage Usage
module ng g module mon-nouveau-module
Composant ng g component mon-nouveau-composant
directive ng g directive ma-nouvelle-directive
Tuyau ng g pipe mon-nouveau-pipe
Services ng g service mon-nouveau-service
Classe ng g classe ma-nouvelle-classe
Interface ng g interface ma-nouvelle-interface
Énumération ng g enum mon-nouveau-enum

Vous pouvez également remplacer le nom du type par sa première lettre. Par exemple:

ng g m my-new-module pour générer un nouveau module ou ng g c my-new-component pour créer un composant.

Construction/Regroupement

Lorsque vous avez terminé de créer votre application Web Angular et que vous souhaitez l’installer sur un serveur Web tel qu’Apache Tomcat, il vous suffit d’exécuter la commande de construction avec ou sans l’indicateur de production défini. La production minimisera le code et l’optimisera pour un environnement de production.

ng build

ou

ng build --prod

Ensuite, recherchez dans le répertoire racine des projets un dossier /dist, qui contient le fichier build.

Si vous souhaitez bénéficier des avantages d’un bundle de production plus petit, vous pouvez également utiliser la compilation de modèles Ahead-of-Time, qui supprime le compilateur de modèles de la version finale :

ng build --prod --aot

Tests unitaires

Angular fournit des tests unitaires intégrés, et chaque élément créé par angular-cli génère un test unitaire de base, qui peut être étendu. Les tests unitaires sont écrits avec du jasmin et exécutés via Karma. Pour commencer le test, exécutez la commande suivante :

ng test

Cette commande exécutera tous les tests du projet, et les ré-exécutera à chaque fois qu’un fichier source change, qu’il s’agisse d’un test ou du code de l’application.

Pour plus d’informations, visitez également : [page github angulaire-cli] [3]

[1] : https://nodejs.org [2] : https://www.npmjs.com/ [3] : https://github.com/angular/angular-cli [typings] : https://github.com/typings/typings

Programme angulaire “Hello World”

Conditions préalables:

Configuration de l’environnement de développement

Avant de commencer, nous devons configurer notre environnement.

  • Installez [Node.js et npm][1] s’ils ne sont pas déjà sur votre machine.

    Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

  • Installez la [Angular CLI][2] globalement en utilisant npm install -g @angular/cli.


Étape 1 : Créer un nouveau projet

Ouvrez une fenêtre de terminal (ou une invite de commande Node.js dans Windows).

Nous créons un nouveau projet et une application squelette à l’aide de la commande :

ng new my-app

Ici, le ng est pour Angular. Nous obtenons une structure de fichier quelque chose comme ça.

[![Structure du fichier_1][3]][3]

[![Structure de fichier_2][4]][4]

Il y a beaucoup de fichiers. Nous n’avons pas besoin de nous soucier de tous maintenant.

Étape 2 : Servir l’application

Nous lançons notre application en utilisant la commande suivante :

ng serve

Nous pouvons utiliser un drapeau -open( ou simplement -o) qui ouvrira automatiquement notre navigateur sur http://localhost:4200/

ng serve --open

Naviguez dans le navigateur jusqu’à l’adresse http://localhost:4200/. Cela ressemble à ceci :

[![Bienvenue dans l’application][5]][5]

Étape 3 : Édition de notre premier composant Angular

La CLI a créé le composant angulaire par défaut pour nous. C’est le composant racine et il s’appelle app-root. On peut le trouver dans ./src/app/app.component.ts.

Ouvrez le fichier du composant et modifiez la propriété du titre de Welcome to app!! à Hello World. Le navigateur se recharge automatiquement avec le titre révisé.

Code d’origine : Notez le title = 'app';

[![Code d’origine][6]][6]

Code modifié : la valeur de title est modifiée.

[![Code modifié][7]][7]

De même, il y a un changement dans ./src/app/app.component.html.

HTML d’origine

[![entrez la description de l’image ici][8]][8]

HTML modifié

[![entrez la description de l’image ici][9]][9]

Notez que la valeur de title de ./src/app/app.component.ts sera affichée. Le navigateur se recharge automatiquement lorsque les modifications sont effectuées. Cela ressemble à quelque chose comme ça.

[![Bonjour le monde][10]][10]

Pour en savoir plus sur le sujet, visitez ce lien [ici][11].

[1] : https://nodejs.org/en/download/ [2] : https://cli.angular.io/ [3] : https://i.stack.imgur.com/0crAT.jpg [4] : https://i.stack.imgur.com/zEtsK.jpg [5] : https://i.stack.imgur.com/Ssupw.jpg [6] : https://i.stack.imgur.com/fVVWw.jpg [7] : https://i.stack.imgur.com/ycTba.jpg [8] : https://i.stack.imgur.com/gwEFE.jpg [9] : https://i.stack.imgur.com/Sgpwj.jpg [10] : https://i.stack.imgur.com/4MWP9.jpg [11] : https://angular.io/guide/quickstart#whats-next