Introduction à AngularJS 2

14 Avr Introduction à AngularJS 2

1- INSTALLATION

Pour installer AngularJS il faut premièrement installer NodeJS

Pour tester si Node est installé sur votre machine , vous pouvez exécuter la commande

node -v

/* l'invite de commande */

• Téléchargement du dossier d’Angular situé dans le site officiel d’Angular
• L’installation des indépendances

Rendez vous sur le dossier d’Angular et ouvrir une invite de commande puis tapé

npm install

• Maintenant pour lancer le serveur vous devez taper

npm start

Vous devez avoir une fenêtre sur votre navigateur , la page d’accueil du votre projet.

2- LES COMPONENTS

Le component par défaut d’AngularJS 2 est app.component

La structure d’un component :

• Il existe 3 partie

/* La partie d'importation d'Angular */
import { Component } from '@angular/core';

/* La partie décorateur component il contient deux metadata le `selector
` et `template` */
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

/* La partie d'export pour être utiliser ailleur */
export class AppComponent  { name = 'Utilisateur'; }

• On va créer notre propre component

/* Dans le même répertoire que app.component nommé blog.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'blog',
  template: `<h1>Partie du blog</h1>`,
})

/* La partie d'export pour être utiliser ailleur */
export class BlogComponent  {  }

• Pour l’intégrer dans le component par defaut:

/* Le component par defaut app.component */
import { Component } from '@angular/core';
/*
On ajoute ici notre component
*/
import { BlogComponent } from './blog.component';
/*
Description:
import { Le Nom De La Class qu'on a crée } from ' Le Fichier De La Class ';

Pour écrire plusieurs ligne dans la metadata template 
il faut changer les simple '' par les ``  
*/
@Component({
  selector: 'my-app',
  template: `
             <h1>Hello</h1>
             <blog></blog>
            `,
  directives:[BlogComponent]
})

3- DATA BINDING

Le Data Binding est d’intégrer des variables du notre class dans le template

Voici un exemple:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})


export class AppComponent  { name = 'Utilisateur'; }

/*
On intégre notre variable avec les {{  NOM_DU_VARIABLE }}
*/

4- LA DIFFERENCE ENTRE TEMPLATE ET TEMPLATEURL

• Template : est de mettre du code dans le même répertoire que la class
• TemplateUrl : est d’intégrer une page html qui contient une partie du code.