1 - Introduction Angular
AngularJS est un framework JavaScript qui étend le HTML pour le rendre dynamique, et permet de développer ses propres balises et attributs HTML. C’est un framework qui se veut extensible et qui pousse vers un développement structuré, en couches, le but n’étant pas d’ajouter de simples animations au DOM, mais bien d’apporter un aspect applicatif au front-office.
Pourquoi Angular ?
- Angular est géré par Google — il y a donc peu de chances qu’il disparaisse, et l’équipe de développement du framework est excellente.
- Le TypeScript — ce langage permet un développement beaucoup plus stable, rapide et facile.
- Le framework Ionic — le framework permettant le développement d’applications mobiles multi-plateformes à partir d’une seule base de code — utilise Angular
TypeScript
TypeScript est un langage de programmation gratuit et open source développé et maintenu par Mycrosoft. C’est une sur-couche de JavaScript qui permet un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces, l'import de modules, tout en conservant l'approche non-contraignante de JavaScript. Le code TypeScript est transcompilé en JavaScript, pouvant ainsi être interprété par n'importe quel navigateur web.
Avoir des connaissances en JavaScript est un avantage pour comprendre la syntaxe, en revanche, il faut réapprendre les concepts de base du langage. Il existe des exemples très simples sur le site officiel qui permettent de comprendre et tester les possibilités.
La documentation officielle : https://www.typescriptlang.org/
2-LES NOUVEAUTÉS D’ANGULAR 7
La nouvelle version 7 d’Angular est sortie officiellement le 18 octobre 2018. Sortie à peine 5 mois après la version 6, Angular 7 apporte quelques nouveautés que nous allons vous présenter, sans pour autant révolutionner ce déjà fabuleux framework Web proposé par l’équipe de Google.
MISE À JOUR DES PRINCIPALES DÉPENDANCES
L’équipe a mis à jour les dépendances sur les principaux projets tiers :
- TypeScript 3.1 — Le langage principal utilisé par Angular guidé par Anders Hejlsberg de chez Microsoft
- RxJS 6.3 — L’implémentation de la programmation réactive également proposée par Microsoft
- Node 10 — Ajout de la prise en charge de NodeJS 10 & 8
SUPPRESSION DES MÉTADONNÉES DE POLYFILL EN PROD
De nombreux développeurs intégraient les reflect-metadata de polyfill en production, qui est nécessaire uniquement dans vos cycles de développement comme vous le savez !
Pour résoudre ce fâcheux problème, causant des ralentissements inutiles, l’équipe Core a donc décidé de les supprimer automatiquement de polyfills.ts. En créant une nouvelle étape au niveau de la génération de votre application en mode JIT et en supprimant par défaut ces metadata de l’output en production .
LE PROJET IVY
L’équipe de développement poursuit les travaux sur une nouvelle librairie appelée Ivy – le pipeline de rendu de nouvelle génération. Ivy est en cours de développement et ne fait pas partie de la version v7. La team commence à valider la compatibilité avec les applications existantes et ils annonceront dans les mois à venir un aperçu optionnel dès qu’Ivy sera exploitable.
Le projet Ivy est donc toujours en cours cependant il ne sera malheureusement pas encore utilisable bien qu’une bonne partie du travail soit effectué.
Ivy se décompose en plusieurs parties :
- ngtscun compilateur qui génère du code JavaScript à partir d’un template en HTML
- ngccun outil qui convertit le code existant en code compatible pour Ivy (c’est la partie la moins avancée du projet)
- unnouveau moteur de rendu qui est en bonne voie.
NOUVELLE BALISE SLOT
Angular intègre désormais le nouvel élément HTML <slot>
Un nouveau warning a été ajouté si on tente de naviguer en dehors de la zone Angular ce qui peut poser des problèmes au niveau de certains tests unitaires
voici un exemple de ce nouveau warning:
3-Les outils
Visual Studio Code
En environnement de développement, je conseille Visual Studio Code de Microsoft qui propose de nombreuses fonctionnalités et qui est gratuit. Une des fonctionnalités qui va être très utile dans notre cas est l’intégration d’un terminal dans l’éditeur. Vous pouvez le télécharger ici : https://code.visualstudio.com/
Petite astuce pour la suite, en utilisant le raccourci CMD + P, un petit menu va apparaître en haut et il va nous permettre de trouver un fichier en tapant son nom, ce qui s’avère très pratique pour trouver rapidement un fichier dans une nouvelle architecture.
angular-cli
angular-cli est une interface en ligne de commande (CLI) pour automatiser votre flux de travail. Il vous permet donc de :
- Créer une nouvelle application Angular
- Exécutez un serveur de développement avec support LiveReload pour pré visualiser votre application en temps réel pendant le développement
- Ajoutez des composants à votre application en ligne de commande
- Exécutez les tests unitaires
- Créez une configuration pour votre application pour le déploiement à la production
4-Installez les outils et créez votre projet
Avant toute chose, vous devez avoir installé Node et npm.
Ensuite pour installer angular CLI, il suffit de taper la commande suivante dans votre bash :
npm install -g @angular/cli
Démarrage de votre projet
Pour démarrer une nouvelle application, il suffit d’exécuter la commande suivante :
ng new agenceIT-project
Bien entendu, vous pouvez remplacer agenceIT-project par votre nom de projet.
Voilà ce qui doit s’afficher dans votre console :
5 -Lancer l’application :
cd agence-it
ng serve
La commande ng serve lance le serveur, surveille vos fichiers et reconstruit l'application au fur et à mesure que vous modifiez ces fichiers. L'option --open (ou simplement -o) ouvre automatiquement votre navigateur à http: // localhost: 4200 /. Votre application vous accueille avec un message:
6-Les composants
Nous utiliserons cet exemple minimaliste commenté pour expliquer ce qu’est un composant
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
// Le décorateur @Component avec des métadonnées
@Component({
// Le sélecteur utilisé -> voir dans index.html
selector: 'my-app',
// Le template, ici 'inline' c'est à dire dans le même fichier
template: `
<div>
<h2>Bonjour {{nom}} :)</h2>
</div>
`,
})
// La classe portant le nom du composant
export class App {
nom:string;
// Affectation de la variable nom qui est interpolée
constructor() {
this.nom = `Angular`;
}
}
// Module que nous verrons dans une prochaine leçon :)
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Un composant ( component ) contrôle une partie de l’écran appelée une vue.
Dans le composant, la logique -ce qu’il fait pour contrôler la vue- est réalisée dans une classe.
Dans l’exemple, la logique se situe donc dans la classe class App : nous déclarons d’abord une variable nom qui est de type string.
Puis dans le constructor() (que nous étudierons plus tard), nous affectons Angular à cette variable.
6- Les templates
Un template est une forme d’HTML qui dit à Angular comment doit être effectué le rendu du composant.
Dans l’exemple, il s’agit d’un inline template : en effet, le HTML est directement inséré à la suite d’où cette dénomination.
Ce bout de HTML contient notamment une interpolation{{ nom }}. Une interpolation est simplement, comme son nom l’indique, un remplacement de la variable par sa valeur, de manière dynamique. Ainsi, si la valeur de la variable nom est modifiée, le HTML sera mis à jour automatiquement. Cela permet de rendre le HTML réactif ! (Nous l’étudierons plus en détail dans une leçon).
7 Les métadonnées
Elles permettent de dire à Angular comment traiter la classe. La classe App ne se distingue d’une classe classique que parce qu’elle comporte juste au dessus d’elle un décorateur @Component.
Ce décorateur permet donc :
Premièrement, de dire à Angular que cette classe est un composant.
Deuxièmement de lui attribuer des métadonnées, qui sont des options de configurations :
- selector : il s’agit d’un sélecteur CSS qui dit à Angular de créer et d’insérer une instance de ce composant où elle trouve une balise <my-app>. Angular l’insérera entre les deux balises <my-app></my-app>.
- templateUrl ou template : contient l’adresse du template associé au composant (templateUrl) ou alors le template directement (template)
- styleUrl ou style : contient l’adresse de la feuille de style (CSS ou SCSS) associée au composant (styleUrl) ou alors les styles directement (style)
Dans l’exemple, nous utilisons template et nous n’utilisons pas de style car nous d’appliquons pas de CSS.