Tout tourne autour du concept de component.
Tous les components ont au moins trois parties :
- le decorator qui handles information about the controller
- une vue qui est le template de ce que l'on veut montrer
- la partie controller qui est le javascript qui va ajouter des fonctionnalités à la vue
Mais avant de s'occuper de cela il faut importer les librairies avec lesquels ont souhaite travailler :
→ angular.io/docs/ts/latest/api : liste complète des modules et librairies auxquelles ils appartiennent
- Pour commencer à créer des components il faut importer la définition des component depuis angular2/core
- il faut aussi un moyen de démarrer l'application, le bootstrap module de angular2/platform/browser
Quand angular créé un component, il créé un “shadow-dom element” pour le component et charge les templates dans cet élément. Cela nous permet de créer nos propres tags HTML et de définir ce que ces tags vont faire via javaScript
Un décorateur est un concept de TypeScript (présent dans javascript 7), c'est une expression qui retourne une fonction.
À reteni : on ne met pas de ; à la fin d'une définition de décorateur. Ça génère une erreur.
// boot.ts
/* On importe la définition d'un component */
import {Component} from 'angular2/core';
/* On importe le bootstrap depuis angular2/platform/browser*/
import {bootstrap} from 'angular2/platform/browser';
/* décorateur
va permettre de setup le composant component */
@Component({
selector: 'my-app', // on cible <my-app>
template: '<h1>Bonjour</1>', // template pour <my-app>
})
/* contrôleur pour le module
c'est une classe qui va définir les fonctionnalités.
Là ne fait rien mais permet le bootstrap de l'application */
class AppComponent {
}
/* bootstrap
va chercher dans le html le sélecteur défini dans le décorateur */
bootstrap(AppComponent);