Apprendre à programmer avec le framework Angular

Démarrer avec Angular-CLI

William KOZA

Première introduction au framework Angular. Après une rétrospective des technologies Web ayant marqué l'univers JavaScript, l'accent est mis sur la notion de Web Component et son implémentation dans le framework Angular.

Commentez

- Titre : Apprendre à programmer avec le framework Angular

- Auteur : William KOZA

- Parution : 27 novembre 2016

- Mise à jour : 27 novembre 2016

- Public visé :

- Licence : Copyright ® 2016 William KOZA. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Démarrer avec Angular-CLI

- I-A. L'outil Angular CLI

- I-B. Installation de l'outil Angular Cli

- I-C. Angular-Cli en Action

- I-D. Pour aller plus loin avec le scaffolding…

- II. Pour aller plus loin …

I - Démarrer avec Angular-CLI

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 vous l'avez vu dans le précédent article, mais également avec Dart ou encore 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 l'article, je ne vais pas traiter le cas de Dart ou « 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.

I-A - 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 Components… ;

- Builder un projet ;

- Lancer des tests de type « End-to-End » ou « unitaire » ;

- Proxyfier le back end ;

- Et beaucoup d'autres choses…

I-B - 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 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 2.

I-C - 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é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 :

I-D - 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

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

II - Pour aller plus loin …

Vous pouvez consulter mes autres tutoriels à partir de ma Home Page https://wkoza.developpez.com.