Intermédiaire

AngularJS 2

A_2.0AngularJS est un framework Javascript créé par Google, permettant de développer des applications web en HTML, dont nous avions fait une rapide présentation sur le blog, suite au Devoxx 2012.

La version 2 du framework est prévue pour la fin de l’année 2015 et déjà nous avons l’opportunité d’accéder à la version alpha afin de nous préparer. Cette nouvelle version adopte de tous nouveaux concepts et une syntaxe complètement retravaillée. En gros, il n’y aura presque plus rien à voir avec les versions 1.x.

TypeScript

 

« TypeScript est un langage de programmation libre et open-source développé par Microsoft qui a pour but de simplifier la création d’applications web »

Oui je sais, « libre » et « open-source » dans la même phrase que « Microsoft » ça sonne bizarre… En gros, le code TypeScript sera compilé pour donner du code Javascript qui pourra être interprété par n’importe quel navigateur. La force de TypeScript est qu’il permet de typer les variables et les fonctions, de structurer son code comme la plupart des langages orientés objet, et qu’il est 100% ECMAScript 6 ready. On a donc la possibilité de créer des classes, des interfaces ou des énumérations de la même manière que si on les avait créées en C# ou en JAVA.

Mais c’est quoi le rapport avec Angular 2 ?

Je n’irai pas jusqu’à dire qu’Angular 2 est basé sur TypeScript (on peut en faire avec du JS basique) mais il est vivement conseillé de démarrer ses projets avec TypeScript. Il a été choisi par l’équipe AngularJS pour plusieurs raisons, entre autres parce que le typage permet d’éviter les erreurs lors de l’exécution du script (runtime errors).

Voici un exemple de code en Type Script :

class Greeter {
 constructor(public greeting: string) { }

 greet() {
 return ‘<p>’ + this.greeting + ‘</p>’;
 }
};

var greeter = new Greeter(‘Hello world!’);
var str = greeter.greet();

document.body.innerHTML = str;

Dans ce code nous avons une classe Greeter avec un constructeur qui attend en paramètre une string. Le mot clé public permet de définir la portée de l’attribut et de définir/initialiser  automatiquement une propriété de la classe. Greeter contient aussi une méthode greet() qui retourne une string avec la valeur de notre propriété greeting. Le code va donc instancier la classe Greeter avec en paramètre ‘Hello world!’, puis insérer le contenu de l’appel de la méthode greet() dans notre body.

 

Les principes de base

 

Les components

Le component est l’équivalent de la directive en Angular 1.x. Ce principe est basé sur le web component, une fonctionnalité HTML 5 permettant de créer soi-même ses éléments HTML et de leur attribuer un comportement.

Désormais, les controllers seront exclusivement réservés à ces components, qui comprennent aussi des annotations définissant leur configuration, comme par exemple le template, les dépendances, etc.

@Component({
 selector: ‘mon-composant’,
 template: ‘<h1>Mon premier composant Angular 2</h1>’
});

class MonComposant{}

@Component dit à Angular que MonComposant est un composant.

L’attribut selector détermine le nom de l’élément HTML qui aura le comportement de MonComposant.

L’attribut template va dire à Angular avec quoi on va remplir notre component.

Le component est la fonctionnalité la plus importante dans Angular 2 : toute application démarrera avec et contiendra des components.

 

Plus de $scope

Le $scope d’Angular 1.x a été retiré, donc plus de cycle Digest et plus besoin de faire des appels $scope.apply() pour mettre à jour le scope en dehors de notre environnement Angular. Désormais, nous utiliserons simplement des classes ES6.

Créons une classe Article :

class Article { 
 constructor(
 public title: string,
 public content: string
 ) {}
};

Les variables title et content restent accessibles de la même manière que sur Angular 1.x :

<h1>{{title}}</h1>
<p>{{content}}</p>

 

Double data binding oui, mais pas systématique

Le double data binding dans Angular nous permet d’avoir une synchronisation en temps réel entre un model et le DOM. C’est bien, mais cela implique une vérification du model, et pour cela une boucle de $digest tourne dans le code et c’est assez gourmand. Dans Angular 2, la mise à jour du model par la view devra passer par des événements et une syntaxe assez particulière.

<input type=‘text’ [value]=‘title’ (input)=‘title=$event.target.value’/>

ou

<input [(ng-model)]=‘model.title’/>

la syntaxe [] permet de synchroniser les données depuis le model vers la view.

La syntaxe () permet de synchroniser un événement depuis la view vers le model.

On pourra donc en conclure que la combinaison des deux [()] nous permet de faire un double data binding.

Il y a aussi une syntaxe particulière pour déclarer une variable dans le code HTML : il suffit de précéder le nom de la variable par un #

<input #title [(ng-model)]='title' />

Vous trouverez plus d’exemples ici et .

 

Plus de jqLite

jqLite aussi s’en va, si nous avons besoin de jQuery il faudra l’ajouter.

 

Le module Forms

Le nouveau module Forms va nous permettre de gérer de manière plus performante nos formulaires. Construisons la base de notre application app.js :

import {bootstrap, Component} from ‘angular2/angular2’
import {ArticleFormComponent} from ‘./article-form.component’

@Component({
 selector: ‘mon-app’,
 template: ‘<article-form></article-form>’,
 directive: [ArticleFormComponent]
});

class AppComponent {}

bootstrap(AppComponent);

L’attribut directive de notre annotation @Component va dire à Angular que ce component dépend d’un autre composant.

La méthode bootstrap va dire à Angular de démarrer l’application avec ce component en tant que root. Ensuite, reprenons notre classe Article article.js :

class Article { 
 constructor(
 public title: string,
 public content: string
 ) {}
};

Puis, construisons un composant de type formulaire article-form.component.js :

@Component({
 selector: ‘article-form’,
 templateUrl: ‘article-form.component.html’,
 directive: [CORE_DIRECTIVE, FORM_DIRECTIVE]
});

export class ArticleFormComponent {
 model = new Article(‘’, ‘’);
 submitted = false;
 onSubmit() { this.submitted = true; }
}

Enfin voici notre code HTML article-form.component.html :

<form (ng-submit)=‘onSubmit()’>
 <label>
 Titre :
 <input type=‘text’ [(ng-model)]=‘model.title’ ng-control=‘title’ required/>
 </label>
 <div [hidden]=‘title.valid’>Le titre est un champ obligatoire</div>
 
 <label>
 Contenu :
 <textarea [(ng-model)]=‘model.content’ required></textarea>
 </label>
 <div [hidden]=‘!content.valid’>Le contenu est un champ obligatoire</div>
 
 <button type=‘submit’ >Envoyer</button>

 <p [hidden]=‘!submitted’>Formulaire valide et envoyé</p>
</form>

Et voilà ! (Comme diraient les Américains)

Nous venons de créer notre première application en Angular 2. Elle ne fait pas grand-chose, mais nous avons une bonne base pour commencer à coder.

 

Mais pourquoi devrais-je passer à la 2.0 ?

 

Angular 2 est en avance !

Et oui, cette nouvelle version écrite avec TypeScript est donc 100% compatible avec les specs d’ECMAScript 6 et nous permet en plus de coder plus proprement avec des annotations ou de faire du typage. TypeScript nous permet de profiter pleinement de Javascript tout en ayant du code propre. Après, si vous voulez rester sur du JS simple, c’est tout à fait possible.

 

Encore plus vite !

D’après les tests, Angular 2 est 5 fois plus rapide que les versions antérieures. La manière de fonctionner y est pour quelque chose, mais c’est aussi grâce aux nouveaux moteurs JS de plus en plus performants.

 

“La simplicité est le principe de l’art” Léonard De Vinci

Angular 2 se veut plus simple et plus lisible, ça sera d’autant plus apprécié par les équipes qui travaillent sur un même projet.

 

Web Component

Je me suis tellement pris la tête pour intégrer des composant venant d’autres librairies comme Polymer sur Angular 1.x. Sur la 2.0 c’est comme si vos web components faisaient partie intégrante d’Angular.

Si vous en voulez encore plus, je vous invite à jeter un œil par ici.

 

Conclusion

 

Comme vous pouvez le voir, Angular 2 a été retravaillé et propose des concepts et une approche différente. Beaucoup sont frustrés d’avoir appris à utiliser Angular 1 pour, au final, devoir presque tout oublier pour la version 2. Personnellement, de ce que j’ai pu voir, j’aime plutôt cette nouvelle approche et le fait de pouvoir coder de manière propre avec TypeScript.

Cet article n’est qu’une introduction sur les grandes nouveautés qu’Angular 2 propose. Si vous voulez en savoir plus, je vous invite à aller sur la documentation officielle qui est plutôt bien faite. Il y a même des tutoriels, si vous avez envie de pratiquer !

© SOAT
Toute reproduction interdite sans autorisation de la société SOAT

Nombre de vue : 2835

COMMENTAIRES 3 commentaires

  1. Fabien CORTIAL dit :

    Très bon article, je partage avec notre équipe projet ça pourrait nous servir très vite. Connais tu la date de sortie ?

  2. Nicolas GARIN dit :

    Salut ! Merci pour ton commentaire 🙂

    Pour le moment il n’y a pas de date de sortie à ma connaissance, par contre la béta est sortie, preuve que ça avance bien 😉

  3. Houda MEZNI dit :

    Très bon article merci beaucoup 🙂

AJOUTER UN COMMENTAIRE