Premier pas avec Angular

Alors de quoi allons-nous avoir besoin ? Eh bien je vous conseille de lancer votre éditeur de texte favori et de commencer à faire chauffer votre cerveau.

Retenez que ces outils vous simplifient la vie, mais qu'ils ne sont pas indispensables. Choisissez l'environnement de développement avec lequel vous êtes le plus à l'aise, et ne vous embêtez pas avec un nouvel IDE si vous êtes satisfait du vôtre. Retenez simplement que le support de TypeScript est appréciable.

Pour ma part j'utilise Atom dans ce cours, mais vous êtes libre de travailler avec l'outil que préférez.

On va commencer par créer un dossier vide, qui sera le dossier racine de notre projet. Sachez que ce que nous allons développer maintenant, est à la base de toute les applications Angular.

Créons donc un dossier nommé hello-world.

Il y a plusieurs moyens de démarrer un projet Angular, certains sont plus rapides que d'autres. Par exemple, le projet angular CLI vous permet de mettre en place un projet avec une seule ligne de commande ! Cependant, je préfère partir d'un dossier vide, pour que vous puissiez voir le processus de création en entier.

Pour commencer, nous allons avoir besoin d'ajouter trois fichiers de configuration dans le dossier racine de notre projet. Je vais détailler le rôle de chacun d'entre eux.

I-B-1. Le fichier package.json▲

{
    "name": "ng2-pokemon-app",
    "version": "1.0.0",
    "description": "An awesome Angular app for managing pokemons !",
    "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
        "lint": "tslint ./app/**/*.ts -t verbose",
        "lite": "lite-server",
        "pree2e": "webdriver-manager update",
        "test":
        "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
        "test-once": "tsc && karma start karma.conf.js --single-run",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
        "@angular/common": "~4.3.4",
        "@angular/compiler": "~4.3.4",
        "@angular/core": "~4.3.4",
        "@angular/forms": "~4.3.4",
        "@angular/http": "~4.3.4",
        "@angular/platform-browser": "~4.3.4",
        "@angular/platform-browser-dynamic": "~4.3.4",
        "@angular/router": "~4.3.4", 
        "angular-in-memory-web-api": "~0.3.0",
        "systemjs": "0.19.40",
        "core-js": "^2.4.1",
        "rxjs": "5.0.1",
        "zone.js": "^0.8.4"
    },
        "devDependencies": {
        "concurrently": "^3.2.0",
        "lite-server": "^2.2.2",
        "typescript": "~2.1.5",
        "canonical-path": "0.0.2",
        "http-server": "^0.9.0",
        "tslint": "^3.15.1",
        "lodash": "^4.16.4",
        "jasmine-core": "~2.4.1",
        "karma": "^1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~4.0.14",
        "rimraf": "^2.5.4",
        "@types/node": "^6.0.46",
        "@types/jasmine": "2.5.36"
    },
    "repository": {}
}

I-B-2. Le fichier systemjs.config.js▲

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

/**
* La configuration de SystemJS pour notre application.
* On peut modifier ce fichier par la suite selon nos besoins.
*/
(function (global) {
    System.config({
        paths: {
            // définition d'un raccourci, 'npm' pointera vers 'node_modules'
            'npm:': 'node_modules/'
        },
        // L'option map permet d'indiquer à SystemJS l'emplacement
        // des éléments à charger
        map: {
            // notre application se trouve dans le dossier 'app'
            app: 'app',
            // packets angular
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler':'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic':'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // autres librairies
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api':'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // L'option 'packages' indique à SystemJS comment charger
        // les paquets qui n'ont pas de fichiers et/ou extensions renseignés
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

I-B-3. Le fichier tsconfig.json▲

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "removeComments": false
    }
}

I-B-4. Installer les dépendances▲

Nous allons créer notre premier composant, enfin !

Cependant, nous allons organiser un peu notre code en mettant nos fichiers sources dans un dossier app, plutôt qu'avec nos fichiers de configuration à la racine de notre projet. Donc, créer un dossier app, et placer à l'intérieur un fichier app.component.ts, qui contiendra notre premier composant :

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

@Component({
    selector: 'pokemon-app',
    template: `<h1>Hello, Angular 4 !</h1>`,
})
export class AppComponent { }

Nous allons prendre un peu de temps pour décrire ce fichier, car malgré sa taille réduite, il est est composé de trois parties différentes.

D'abord, on importe les éléments dont on va avoir besoin dans notre fichier. À la ligne 1, on importe l'annotation Component depuis le cœur d'Angular : @angular/core. Retenez donc simplement la syntaxe suivante :

import { unElement } from { quelquePart }

Ensuite, de la ligne 3 à la ligne 6, on aperçoit l'annotation @Component qui nous permet de définir un composant. L'annotation d'un composant doit au minimum comprendre deux éléments : selector et template.

• Selector permet de donner un nom à notre composant afin de l'identifier par la suite. Par exemple, notre composant se nomme ici pokemon-app, ce qui signifie que dans notre page web, c'est la balise qui sera insérée. Et ce code sera parfaitement valide. Vous vous rappelez du chapitre sur les Web Components ?
• Quant à l'instruction template, elle permet de définir le code HTML du component (On peut bien sûr définir notre template dans un fichier séparé avec l'instruction templateUrl à la place de template, afin d'avoir un code plus découpé et plus lisible).

Enfin, à la ligne 7, on retrouve le code de la classe de notre composant. C'est cette classe qui contiendra la logique de notre composant. Le mot-clef export permet de rendre le composant accessible pour d'autres fichiers.

Pour l'instant nous n'avons qu'un unique composant dans notre application, mais imaginez que notre application soit composée de 100 pages, avec 100 composants différents, comment ferions-nous pour nous y retrouver ?

L'idéal serait de pouvoir regrouper nos composants par fonctionnalité : par exemple, regrouper tous les composants dédiés à l'authentification, tous ceux qui servent à construire un blog, etc.

Eh bien, Angular permet cela, grâce aux modules ! Tous nos composants seront regroupés au sein de modules.

Mais du coup ? … Il nous faut au moins un module pour notre composant, non ?

Bravo ! Vous avez compris !

Au minimum, votre application doit contenir un module : le module racine. Au fur et à mesure que votre application se développera, vous rajouterez d'autres modules pour couvrir de nouvelles fonctionnalités.

Voici le code du module racine de notre application, app.module.ts, à placer dans notre dossier app :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Je vais présenter ce code rapidement. D'abord, on retrouve des importations en haut du fichier. Pour déclarer un module, on importe l'annotation NgModule contenue dans le cœur d'Angular lui-même, à la ligne 1.

Ensuite on importe le BrowserModule, qui est un module qui fournit des éléments essentiels pour le fonctionnement de l'application, comme les directives ngIf et ngFor dans tous nos templates, nous reviendrons dessus plus tard.

Ensuite on importe le seul composant AppComponent de notre application, que nous allons rattacher à ce module.

Mais le plus important ici est l'annotation NgModule, car c'est elle qui permet de déclarer un module :

• imports : permet de déclarer tous les éléments que l'on a besoin d'importer dans notre module. Les modules racines ont besoin d'importer le BrowserModule (contrairement aux autres modules que nous ajouterons par la suite dans notre application) ;
• declarations : une liste de tous les composants et directives qui appartiennent à ce module. Nous avons donc ajouté notre unique composant AppComponent ;
• bootstrap : permet d'identifier le composant racine, qu'Angular appelle au démarrage de l'application. Comme le module racine est lancé automatiquement par Angular au démarrage de l'application, et qu'AppComponent est le composant racine du module racine, c'est donc AppComponent qui apparaîtra au démarrage de l'application. Ça va, rien de compliqué si on prend le temps de bien comprendre.

Lors de ce cours, nous commencerons à travailler avec une application monomodule, puis nous ajouterons d'autres modules pour que vous voyiez comment se passe le développement d'une application plus complexe.

Vous vous rappelez que dans le fichier de configuration de SystemJS, nous avons indiqué à Angular que le point d'entrée de notre application serait le fichier main.ts ? Eh bien, c'est maintenant que nous allons le créer !

Créez donc un fichier main.ts avec le contenu suivant, dans le dossier app :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Nous devons préciser dans ce fichier que notre application démarre dans un navigateur web et pas ailleurs : en effet, nous pourrions choisir d'utiliser Angular pour du développement mobile hybride avec NativeScript ou du développement cross-plateform avec Electron.js. Nous précisons donc que notre application est destinée aux navigateurs web, et que l'on désigne l'AppModule comme module racine, qui lui-même lancera l'AppComponent.

Heu ! Pourquoi créer main.ts, app.module.ts et app.component.ts dans trois fichiers différents, tout ça pour lancer une application qui affiche un « Hello, World » ?

Votre question est légitime. Pour l'instant, ces trois fichiers sont assez simples et contiennent relativement peu de code.

Sachez pourtant que ces efforts supplémentaires nous ont permis de mettre en place notre application de la bonne manière ; son démarrage est indépendant de la description de notre module, qui est également indépendant des composants qui le constituent. Ces trois éléments doivent donc être séparés !

Il ne nous reste plus qu'un seul fichier pour pouvoir démarrer notre application, promis !

Vous vous rappelez ce que nous sommes en train de développer en termes d'architecture ? Une SPA (Single Page Application), c'est-à-dire que notre application ne sera composée que d'une page HTML avec beaucoup de code JavaScript pour dynamiser la page, récupérer des informations d'un serveur distant, etc. Eh bien, il nous manque cette fameuse page HTML. Créons-la tout de suite avec un fichier index.html, à la racine du projet (et non dans le dossier app !) :

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Chargement des librairies -->
    <!-- Polyfill(s) pour les anciens navigateurs -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configuration de SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Afficher l'application -->
  <body>
    <pokemon-app>Loading AppComponent content here ...</pokemon-app>
  </body>
</html>

Ce fichier est une page HTML classique, qui contiendra toute notre application. J'ai essayé de tout décrire dans les commentaires. Remarquez la ligne 22, c'est à cet endroit que notre application va vivre, et que les templates de nos composants seront injectés !

Voici l'architecture de notre projet, à ce stade :

Bon, je vous rassure, on a fini ! Il ne nous reste plus qu'à démarrer notre application.

Démarrer l'application va être un jeu d'enfant. Il y a déjà une commande disponible pour nous permettre cela. Ouvrez donc un terminal qui pointe vers le dossier de votre projet et tapez la commande suivante :

npm start

Vous devriez voir des choses qui s'affichent dans la console, puis après un délai de quelques secondes, votre navigateur s'ouvre tout seul, et vous voyez affiché le message « Hello, Angular 4 ! » dans votre navigateur !

Ça y est, nous y sommes arrivés !

Alors je sais, tout ça pour ça !

Mais rassurez-vous, vous venez de faire quelque chose propre à beaucoup de frameworks : installer le socle de notre application. Vous avez fait plus qu'afficher un message à vos utilisateurs, vous venez de mettre en place la base de votre application, et ça, ça n'a pas de prix !

Mais revenons à la commande npm start, car sous des airs modestes, cette petite commande accomplit un travail important :

• elle compile tous nos fichiers TypeScript vers du JavaScript ES5 ;
• elle lance l'application dans un navigateur et la met automatiquement à jour si nous modifions notre code !

Dans les bibliothèques que nous avons installées au début de ce chapitre, BrowserSync s'occupe de mettre à jour notre application à chaque fois que nous modifions son code source, sans avoir à appuyer sur F5 !

Testez ça tout de suite, ouvrez le fichier de votre composant app.component.ts, et modifiez son code comme ceci :

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

@Component({
    selector: 'pokemon-app',
    template: '<h1>Bonjour, Angular 4 !</h1>'
})
export class AppComponent {}

Si maintenant vous retournez dans le navigateur ou tourne votre application, vous verrez alors le message « Bonjour, Angular 4 ! » s'afficher, à la place de « Hello, Angular 4 ! », le tout sans avoir à appuyer sur F5 !

Si vous ouvrez votre IDE (le logiciel que vous utilisez pour effectuer vos développements), vous constatez qu'un certain nombre de fichiers se sont ajoutés dans le dossier app. Il s'agit de fichier *.js et *.js.map. Ce sont des fichiers compilés par TypeScript et ce sont eux qui sont interprétés par le navigateur. Jusque-là tout va bien.

Le problème est que ces fichiers nous gênent : ils polluent notre dossier de développement app et le rendent moins lisible. Je vous propose de mettre tous les fichiers destinés au navigateur dans un dossier à part, le dossier /dist. Les fichiers que nous utilisons pour nos développements (les fichiers TypeScript) resterons dans notre dossier de développement /app.

Pour cela, nous allons dire à SystemJS de ne pas chercher à démarrer l'application depuis le dossier app, mais depuis le dossier dist. Mais avant, nous allons dire à TypeScript de compiler les fichiers vers ce nouveau répertoire, sinon il restera désespérément vide.

Premièrement, créons un dossier dist à la racine de notre application.

Ensuite, nous allons dire à TypeScript de pointer vers dist. Ouvrez le fichier de configuration tsconfig.json et ajoutez la ligne de configuration outDir, à la ligne 11 :

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "dist"
    }
}

Maintenant, il ne nous reste plus qu'à dire à System.js de démarrer notre application par rapport aux fichiers JavaScript qui se trouvent dans le nouveau dossier dist. Ouvrez le fichier de configuration de System.js nommé system.config.js et modifiez la ligne 5 ci-dessous :

(function (global) {
    System.config({
        // ...
        map: {
            app: 'dist', // <-- remplacez 'app' par 'dist' comme ceci !

Désormais relancez la commande npm start. Maintenant, tout fonctionne comme avant (sinon reprenez les étapes ci-dessus). Si vous ouvrez à nouveau votre IDE, vous constaterez que le dossier dist contient de nouveaux fichiers générés par TypeScript :

Parfait, les fichiers destinés au navigateur ne polluent plus notre dossier de développement app. Il ne nous reste plus qu'à supprimer les fichiers suivants dans app, car nous n'en avons plus besoin :

• app.component.js ;
• app.component.js.map ;
• app.module.js ;
• app.module.js.map ;
• main.js ;
• main.js.map.

Ne vous inquiétez, l'application fonctionnera toujours !

D'ailleurs si vous ne me croyez pas, aller hop, un petit npm start !

/dist
/node_modules

Voilà, vous l'avez fait, votre premier « Hello, World ! » avec Angular ! Vous pouvez être fier de vous.

Mine de rien, ce modeste exemple a nécessité d'utiliser les Web Components, ES6 et TypeScript ! C'est pourquoi il n'est pas inutile de s'y intéresser.

I-I-1. En résumé▲