image/svg+xml $ $ ing$ ing$ ces$ ces$ Res Res ea ea Res->ea ou ou Res->ou r r ea->r ch ch ea->ch r->ces$ r->ch ch->$ ch->ing$ T T T->ea ou->r

Débuts avec Angular

  1. Editeur pour Angular
  2. Installation d'Angular
  3. Création d'un nouveau projet avec le CLI
  4. Création d'un composant
  5. Déploiement de l'application
  6. En cas de problèmes

Angular est un framework de réalisation d'interfaces graphiques HTML5/JavaScript utilisables dans un navigateur web.

Cette page a pour objectif d'introduire à l'utilisation d'Angular. Pour des informations plus exhaustives, on pourra se référer :

Editeur pour Angular

Il est tout d'abord requis de disposer d'un navigateur web pour tester ses créations ainsi qu'un éditeur de texte afin de développer son application. Parmi les éditeurs, outre les vénérables Vi(m) et Emacs, mais aussi des environnements de développement spécialisés parmi lesquels :

L'intérêt de l'utilisation d'un environnement de développement intégré (IDE) réside dans les fonctionnalités d'autocompletion, d'exploration de code, de génération de code idiomatique ainsi que de consultation de la documentation. Un éditeur de texte classique se contente généralement d'assurer des fonctions de coloration syntaxique pour les langages supportés.

Installation d'Angular

L'utilisation d'Angular requiert le gestionnaire de paquetages npm de Node.js. Il est possible de le télécharger depuis la page d'accueil du projet Node.js. Si vous utilisez une distribution Linux, il est possible que des paquetages adaptés soient déjà préconstruits pour celle-ci.

Nous installons ensuite globalement la Commande-Line Interface d'Angular avec cette commande :

npm install -g @angular/cli

Nous pouvons ensuite vérifier qu'Angular est bien installé en demandant l'aide de la CLI pour afficher toutes les commandes supportées :

ng help

Remarque : si NodeJS et npm sont installés globalement, on peut installer Angular dans son répertoire utilisateur (sans être administrateur) en suivant les conseils de cette page.

Création d'un nouveau projet avec le CLI

Un nouveau projet Angular se créé avec la commande :

ng new nameOfTheProject

La CLI peut nous poser des questions sur la configuration du projet. Souhaitons-nous activer le module de routage ? Il est possible aussi de sélectionner une feuille de style CSS à utiliser par défaut (modifiable par la suite).

Observons le répertoire généré qui contient différents fichiers et répertoires :

Création d'un composant

La brique fondamentale d'une application Angular est le composant. Il s'agit d'un composant graphique élémentaire potentiellement réutilisable dans différents contextes qui nous sert à afficher et interagir avec des données. Un bon découpage en composants nous permet de réaliser une application modulaire.

Par défaut, tout projet Angular nouveau contient un composant app présent dans le répertoire src/app. Il s'agit du composant principal d'accueil qui sera affiché à l'ouverture de notre application. Ce composant hébergera d'autres composants que nous réaliserons ensuite.

Chaque composant est présent dans son propre répertoire. Il est typiquement constitué des fichiers suivants :

Pour créer un nouveau composant nous pouvons copier le répertoire d'un composant existant qui nous servira de base ou alors demander la création d'un composant vierge avec la commande (à la racine du projet) :

ng generate component helloWorld

Le répertoire est généré (normalement dans le répertoire src/app/my-component comme sous-composant de app) et nous pouvons observer le composant vide :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

L'annotation @Component indique les propriétés essentielles du composant :

Un composant comporte un constructeur comme toute classe TypeScript qui se respecte. Celui-ci peut avoir des paramètres qui seront utilisés par le composant : si ces paramètres sont préfixés par un mot-clé de visibilité (private ou public), ils sont considérés comme des champs de la classe (l'initialisation avec this.fieldName = fieldName devient donc inutile).

Pour débuter, nous pouvons réaliser un composant affichant un message de bienvenue personnalisé avec un nom en paramètre. Le template étant assez concis, nous l'intégrons dans l'entrée template de l'annotation @Component :

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: '<p>Hello World for {{ userName }}</p>',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  @Input() userName: string; // tous les champs utilisés avec les templates Angular doivent être publics (c'est le cas par défaut) !

  constructor() { }

  ngOnInit() {
  }

}

Nous intégrons ensuite ce composant dans le template app.component.html du composant principal app :

<div>
        Here is our Hello World component:
        <app-hello-world userName="fooBar"></app-hello-world>
</div>

Il est possible aussi de modifier directement le fichier src/index.html qui est le fichier HTML racine de notre application (qui par défaut affiche le composant principal app).

Nous pouvons ensuite compiler les sources et lancer le serveur de test d'Angular avec la commande suivante :

ng serve

Par défaut, le serveur HTTP de test est démarré sur le port 4200 de la boucle locale. On peut donc y accéder depuis l'adresse http://localhost:4200. Lorsque des fichiers sont modifiés alors que le serveur de test est actif, une retranspilation des sources est automatiquement réalisée.

Déploiement de l'application

Le serveur de test n'a pas vocation à être utilisé en production. Pour publier notre application (après s'être assuré qu'elle fonctionne correctement), nous demandons sa construction avec la commande ng build. Le compilateur détermine tous les objets et fonctions utiles pour le fonctionnement de notre application et les réunit dans des fichiers JavaScript écrits (ainsi que les styles dans un fichier css) dans le répertoire dist. Le contenu de ce répertoire pourra être rendu accessible par le serveur web de notre choix (Apache, Nginx, Lighttpd...).

Par défaut, ng build génère des fichiers js.map qui permet de faire le lien entre le code JavaScript transpilé et le code source original (ce qui facilite le débuggage). Avec ng build --prod, ces fichiers d'aide au débuggage ne sont pas générés.

Pour en savoir plus sur le déploiement, on pourra consulter cette page de la documentation Angular.

En cas de problèmes