Maintenant que vous êtes familier avec la notion de Component, j’imagine que vous désirez, vous aussi, créer vos propres Components. Avec Angular, vous pouvez développer vos applications avec TypeScript comme nous l’avez vu dans le précédent article, mais également en « Vanilla JavaScript ».

Vanilla JavaScript ? Ce que l’on appelle communément Vanilla signifie que l’on n’utilise pas de framework tiers pour son développement. Dans notre cas, il faut comprendre que l’on peut faire de l’Angular, non pas sans Angular, mais sans les librairies additionnelles type TypeScript.

Ce choix influe directement sur les dépendances NPM à tirer. Dans la suite de ce chapitre, je ne vais pas traiter le cas du « Vanilla JavaScript », mais je vous redirige vers le Quickstart du site Angular.io si cela vous intéresse. Cela étant dit, nous allons pouvoir créer notre premier projet Angular.

 

L’outil Angular CLI

 

Google nous propose un outil clé en main pour réaliser les tâches de développement les plus courantes. Ce projet est basé sur le projet Open Source ember CLI, qui a maintenant plus de trois ans. Grâce à notre Angular Cli, il est possible de :

• créer une application « from scratch » via un scaffolding
• Générer des squelettes des composants type Component, …
• Builder un projet
• Lancer des tests de type « End-to-End » ou « unitaire »
• Proxyfier le back end
• Et beaucoup d’autres choses …

 

 

Installation de l’outil Angular Cli

 

Avant de pouvoir installer Angular Cli, il faut, en prérequis, installer une version de Node 4.x.x minimum avec un NPM 3.x.x. L’installer est simple, il faut juste faire : suivant, suivant, suivant…

Passons maintenant à l’installation proprement dite du package NPM Angular CLI. Nous allons installer la dernière version qui est à ce jour la rc.0 en lançant votre console préférée et en tapant ceci :

 

PS : « sudo » est à utiliser uniquement sur les systèmes MACOS, 

 

Et c’est tout, vous pouvez maintenant créer votre premier projet Angular

 

 

Angular CLI en Action

Angular CLI est un outil en ligne de commande puissant qui va vous permettre de créer un projet contenant un ensemble plus que complet d’outils en vogue dans le monde JavaScript. Commençons par créer notre premier projet nommé, de façon très originale je vous l’accorde, « mon-premier-projet ». Vous pouvez vous placer à l’endroit que vous désirez pour exécuter cette commande :

 

   

Angular CLI utilise l’exécutable nommé ng pour réaliser ses différentes fonctionnalités offertes. Le paramètre new indique que l’on va créer un nouveau projet qui est déclaré à la suite de « mon-premier-projet ». La capture suivante nous montre l’arborescence du projet proposée par Angular CLI.

 

À la racine du projet, on retrouve un ensemble de fichiers de configuration :

• package.json : fichier déclarant les dépendances NPM tirées lors de l’installation du projet et nécessaire à la compilation et les tests.

• .editorconfig : ce fichier est issu du projet EditorConfig. Il a pour but de maintenir une cohérence dans le code entre l’ensemble des éditeurs et IDE du marché. Le fichier fonctionne nativement sur certains éditeurs alors qu’un plugin sera nécessaire pour d’autres. Très peu d’éditeurs/IDE ne connaissent pas ce fichier ; c’est donc un standard de fait.

• README.md : fichier de présentation du projet au format Markdown utilisé notamment sur Github.

• .gitignore : fichier permettant de déclarer les fichiers qui ne doivent pas être commités sur le repository Git.

• karma.conf.js : fichier de paramétrage du Test runner Karma. Karma est un outil permettant de lancer des tests sur une série de browser/device automatiquement. Il est déjà configuré pour être lancé sur le navigateur Chrome avec le framework de test Jasmine.

• protractor.conf.js : fichier de paramétrage de l’outil de e2e Protractor. E2E, ou end-to-end, est une discipline permettant de réaliser des tests d’intégration ; il est ainsi possible de réaliser des tests simulant un utilisateur final utilisant l’application dans un browser type Chrome.

• tslint.json : fichier définissant les règles de codage TypeScript. Tout comme le fichier .editorconfig, il est reconnu par la majorité des éditeurs de code.

• .angular-cli.json : fichier de paramétrage central utilisé par Angular CLI. Ce fichier permet de définir où sont placées les sources de l’application, les différents fichiers de configuration, les scripts js et css tiers… Ce fichier est largement utilisé par la librairie webpack nouvellement ajoutée à Angular CLI.

• src : à la racine du répertoire src, on retrouve les fichiers classiques index.html, favicon.ico, styles.css, mais également le main.ts (bootstrap d’Angular 2), le fichier de configuration de la compilation TypeScript tsconfig.json, un fichier de définition TypeScrit typings.d.ts, et un ensemble de polyfills utiles à Angular 2.

• src/app : on retrouve les sources de notre premier projet, dont notre nouveau component : AppComponent.

• src/assets : cet espace permet d’y placer tous les assets tels que les images. Lors de la compilation de l’application via Angular CLI, un dossier dist va être créé. Le contenu de ce dossier sera placé à la racine de dist.

• src/environments : on retrouve les différents fichiers de configuration spécifiques aux environnements d’exécution.

• src/environments : les fichiers contenus dans ce dossier permettent de définir les variables spécifiques à chaque environnement d’exécution (prod, dev, integration). Par défaut, l’environnement de dev sera utilisé (fichier environment.ts). Si l’on souhaite utiliser le fichier de production, il est nécessaire d’ajouter le paramètre -env=prod lors de l’appel de la commande ng build.

Sans rien toucher, nous pouvons déjà lancer notre première application Angular CLI, en nous plaçant dans notre dossier mon-premier-projet, à l’aide de la commande :

 

Sans rien toucher, nous pouvons déjà lancer notre première application Angular-Cli, en nous plaçant dans notre dossier mon-premier-projet, à l’aide de la commande : 

 

 

Angular CLI va alors s’occuper de compiler l’ensemble du projet et de lancer un serveur web sur le port 4200. Vous pouvez maintenant lancer votre navigateur préféré sur l’URL http://localhost:4200 ; vous obtenez ainsi votre première application Angular :

 

 

 

Pour aller plus loin avec le scaffolding …

 

Angular CLI propose de nombreuses commandes pour générer du code, ou comme on le nomme outre-Atlantique, le scaffolding. Il est ainsi possible de créer de nouveaux Components, Directives…

 

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

 

La fonction eject

Angular CLI propose, depuis la dernière version beta, la commande eject. Cette commande va vous permettre d’extraire la configuration webpack de votre projet et de revenir à un projet beaucoup moins adhérent au Angular CLI. Voici comment lancer cette commande :

 

 

Cette commande a donc extrait le ficher de configuration Webpack et a modifié le fichier package.json pour utiliser Webpack de façon directe. Grâce à cette commande, Angular CLI devient moins obscure et vous donne la main sur la configuration de vos projets.