Introduction à Angular 2

angular2

C’est quoi Angular 2 ?

Si vous connaissez AngularJS (Angular 1.x), vous pensez peut-être qu’Angular2 est une upgrade d’AngularJS. En réalité, Angular2 a été totalement réécrit par Google, ce qui en fait un nouveau framework à part entière, avec une philosophie et des concepts propres à lui.

AngularJS nous a fourni beaucoup de fonctionnalités, comme la gestion des routes, interaction entre client et serveur, interpolation, directives, filtres, …, le tout sous une architecture MVW.

Certaines de ses fonctionnalités telles que le data-binding et les filters ont été reprises et modifiées dans Angular 2. Nous allons voir une liste de comparaisons, côté HTML et script.

Comparaisons entre AngularJS et Angular2

Interpolation

AngularJs:

Dans notre controlleur :

app.controller("HelloWorldController", ["$scope"], function(_scope) {
    _scope.name = "John" ;
})

Dans la vue :

<div ng-controller= "HelloWorldController as ctrl">
     <p>Hello {{ctrl.name}}</p>
</div>

Ici, ctrl représente le scope de la vue possédant une propriété nom. Le nom de ce scope est défini grâce à la syntaxe controllerAs. Plus d’informations à ce sujet ici.

Angular 2

Dans notre composant (component)

// … import des dépendances
@Component({
    moduleId : module.id
    Selector :  "app-hello-world",
    templateUrl : "app-hello-world.component.html"
})
export class HelloWorldComponent {
    name = "John" ;
}

Dans la vue (app-hello-world.component.html)

<div><p>Hello {{name}}</p></div>

Avec Angular2, nous pouvons directement appeler la propriété nom qui est définie dans un composant.

Pour avoir plus d’information : cliquez ici.

Filter/Pipes

AngularJs

Dans la vue:

{{ ctrl.name | uppercase }}

Les Filters permettent de filtrer ou de transformer les données affichées. Le Filter uppercase fait partie de ceux fournis par le framework (tout comme lowercase, date, limitTo, orderBy, …). Il est néanmoins possible d’en créer des personnalisés.

Angular 2

Dans la vue:

{{ name | uppercase }}

Les Pipes agissent globalement de la même manière que les Filters d’AngularJS : ils prennent en entrée des données, les transforment et les retournent en sortie.

Pour la création d’un filter personnalisé cliquez ici.

Pour la création d’un pipe personnalisé cliquez ici.

Les attribues directifs

Modification de l’attribut class

AngularJs

<p class="alert" ng-class="{myClass : condition}">Message de succès</p>

La classe myClass sera affectée à l’élément si condition est évaluée à true.

Angular 2

<p class="alert" [ngClass]="{myClass: condition}"></p>
<p [attr.class]="condition ? 'myClass' : 'defaultClass'"></p>
<p class="alert" [class.myClass]="condition"></p>

Il faut noter qu’avec Angular 2 on utilise le terme Input et Output  pour les attributs personnalisés (à part les attribues directifs @Directive ). La modification des attributs se passe alors dans les Input. Il en existe déjà, comme [ngClass], [attr.<htmlAttribute>], [value], [class.<className>]…

Cacher ou afficher un élément

AngularJS

<div ng-if="isHidden"></div>

L’élément div ne sera affiché que si isHidden retourne true.

Angular 2

<div *ngIf="isHidden"></div>

Même principe qu’en AngularJS, sauf que ng-if est remplacé par *ngIf.

Boucler un tableau Javascript et dans la vue

Supposons que nous avons une variable users qui a pour valeur:

[{ id : 1, name : "John", lastname : "Doe" }, {id : 2, name : "James", lastname : "Doe"}]

et on veut récupérer name et lastname dans notre vue.

AngularJs

Dans la vue :

<ul>
    <li ng-repeat="user in ctrl.users">{{user.name}} {{user.lastname}}</li>
</ul>

Le résultat est :

  • John Doe
  • James Doe

Angular 2

Dans la vue

<ul>
    <li *ngFor="let user of users">{{user.name}} {{user.lastname}}</li>
</ul>

Le ng-repeat a été remplacé par *ngFor. Le but est le même, c’est de parcourir un tableau Javascript. On remarque que la variable user est déclarée localement.

Note important : Avec ng-repeat de la version 1.x on peut parcourir un objet clé valeur, tandis que, avec *ngFor d’Angular 2, il faut que le type de la variable est un tableau Javascript.

Prenons l’exemple de cet objet :

var user = {
    id : 1,
    name : "John",
    lastname : "Doe"
}

On peut parcourir cet objet avec la version prédécesseur d’angular 2 en utilisant ng-repeat, mais avec celle-ci, c’est impossible avec *ngFor. Quelle est la solution ? Pour que ça soit possible, nous devrions créer une pipe personnalisée qui ajoute la valeur et la clé dans un tableau ; ou de recréer l’objet et l’ajouter dans un tableau lors de la récupération de la valeur dans le composant.

Voir : Comment parcourir un objet clé valeur avec AngularJs?

Voir: Comment parcourir un objet clé valeur avec Angular 2 ?

Si vous voulez basculer vers Angular 2, mais votre application utilise la version 1, veuillez lire la documentation.

Vous trouverez plus de comparaisons en visitant la page de référencement.

Comment débuter avec angular 2 ?

Il faut comprendre 3 points importants sur Angular2.

Pour coder une application avec angular 2, il faut avoir au minimum une bonne base sur ce langage de programmation. Mais pourquoi un autre langage de programmation ?

Dans un site web, la sécurité passe avant tout, et typescript a pour but d’améliorer et de sécuriser la production de code JavaScript. En fait, ce langage est un sur-ensemble de javascript, c’est-à-dire, que toutes les syntaxes javascript peuvent être utilisées dans typescript.  Le code TypeScript est transpilé en JavaScript et c’est le javascript qui sera interprété par n’importe quel navigateur.

L’avantage dans l’utilisation de typescript, c’est qu’il 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. Il supporte la spécification ECMAScript 6. En d’autres termes, nous pouvons adapter facilement le design pattern MVC.

Voici un aperçu d’un code typescript avec un argument optionnel passé au constructeur et un export d’une classe (module):

Dans l’export de la classe (helloyou.ts):

export class HelloYou {
    constructor(public _name ?: string) {}
    public name() {
	console.log("Hello ", this._name ? this._name: "Joe" )
    }
}

Et l’import de notre classe (sayHello.ts)

import { HelloYou } from "helloyou.ts";
Let sayHelloJames = new HelloYou("James") ;
Let sayHellowJoe = new HelloYou();
sayHello.name(); // Hello Joe
sayHello.name() ; // Hello James

L’operateur ? (Elvis Operateur) veut dire  que _name n’est pas obligatoire.

Si nous avons écrit : public name : string ,  nous devrions préciser le paramètre _name sinon, typescript génèrera une erreur parce que _name est obligatoire.

NodeJS  est un interpréteur JavaScript côté serveur (basé sur le moteur V8 de Google). Il permet de gérer facilement les paquets de notre application grâce à NPM. De plus, NodeJS rend possible l’installation et l’utilisation d’Angular CLI (Command Line Interface) afin de créer rapidement une application fonctionnelle. (Plus d’information ici : https://cli.angular.io/).

II est donc fortement recommandé d’utiliser NodeJS pour développer une application avec Angular2.

Comme nous le savons, Angular 2 est un framework Javascript, il est alors préférable que nous ayons une bonne compréhension des objets javascript, car Angular 2 est un framework orienté objet. L’objet en javascript n’est pas si difficile à comprendre, il faut juste qu’on s’y habitue. A force de pratiquer, et de faire des recherches, il est aisé d’acquérir une bonne maîtrise de JavaScript.

Avantages et inconvénients d’angular 2.

Avantage

  1. Application très rapide comparé aux autres framework javascript qui font la même chose qu’angular 2.
  2. Application plus sécurisé, parce qu’on ne peut pas injecter la balise <script> n’importe où. (Angular n’autorise pas l’usage de cette balise dans la balise de nos composants)
  3. Façon de coder plus claire (On utilise, les classe, les constants, interface, …) grâce à typescript. Ce qui améliore la maintenabilité du code.
  1. Si nous avons utilisé un élément qui n’existe pas dans le DOM ou la syntaxe utilisée n’est pas correcte, alors Angular 2 nous préviens.
  2. Une application modulaire, c’est-à-dire une application divisée en components. Chaque component est affecté à une partie de l’application spécifique, et doit pouvoir être réutilisable dans une autre application.
  3. Utilisation de SystemJS ou Webpack, pour la gestion asynchrone des modules.

Inconvénients

  1. Si l’interprétation du JavaScript est désactivée sur le navigateur, l’application ne fonctionnera pas.
  2. L’utilisation de TypeScript dans l’application requiert une transpilation du code vers le JavaScript pour que le navigateur puisse l’interpréter. La  transpilation du Typescript peut s’effectuer soit lors du build de l’application (Ahead-of-Time Compilation), soit lors de l’ouverture de cette dernière dans un navigateur (Just-in-Time Compilation). Plus d’information à ce sujet ici : http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation.

Site de référence

Enregistrer

Enregistrer

4 commentaires

  1. Bonjour,
    J’ai lu votre article qui parle de l’angular, mais je ne comprends pas bien son importance. Lorsqu’on l’utilise, quels sont les avantages qu’on peut en tirer pour un site?

  2. @SociéteWoxup,
    Le but de cette article est de faire un petit aperçu sur le framework Javascript maintenu par google. Pour plus d’information, vous pouvez visiter les sites mentionnés.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

8 − = quatre