Apprendre à programmer avec le framework Angular

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 Components… ;
• Builder un projet ;
• Lancer des tests de type « End-to-End » ou « unitaire » ;
• Proxyfier le back end ;
• Et beaucoup d'autres choses…

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 en lançant votre console préférée et en tapant ceci :

Et c'est tout, vous pouvez maintenant créer votre premier projet Angular 2.

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és 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 à Anguar-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), 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,
• 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 : 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 : 

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 :

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…

Il est possible de faire bien d'autres choses avec Angular-Cli, mais cela fera l'objet d'un autre tutoriel…