Enhance Web Development

Angular 2

 

Les concepts fondamentaux

Les concepts fondamentaux

  • Les classes
  • Les composants
  • Les imports/exports
  • Les décorateurs
  • L'amélioration (composition)
  • La répétition
  • Le cycle de vie Angular 2

Class !== inheritance

 

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

Les composants

  • Créer un composant (class ES6)
  • Les attributs & méthodes de la classe seront accessible dans le template associé
export class UsersComponent() { }

export class AboutComponent implements OnInit {
  title: string = 'About Page'
  body:  string = 'This is the about page body'
  message: string

  constructor(public _stateService: StateService) { }

  ngOnInit() {
    this.message = this._stateService.getMessage()
  }

  updateMessage(m: string): void {
    this._stateService.setMessage(m)
  }
}

Composant

Import / export

  • Importer les dépendances angular
  • Importer les dépendances 3rd party
  • Importer les dépendances du projet
  • Très utile d'ordonner ses imports pour améliorer la lecture du code source
import (Component) from 'angular/core';

export class UsersComponent() { }

Import / export

Decorate

  • Pour transformer une classes ES6 en un artefact angular 2, on la décore (annotate) avec les metadata spécifiques Angular 2.
  • On utilise la syntaxe @<decorator>
  • Les plus utilisés sont : @Component, @Injectable, @Directive et @Pipe
  • On peut également décorer les propriétés d'une classe : @Input et @Output
import (Component) from 'angular/core';

@Component({
  selector: 'users',
  templateUrl: './users.component.html'
})
export class UsersComponent() {
  @Input() name: String;
}

  Le décorateur @Component

Ameliorer (Enhance)

  • L'idée est d'écrire une version minimale du composant puis de l'améliorer de façon itérative
  • Améliorer par composition = ajout de méthodes, d'input, d'output, injecter des services, etc.
  • un composant = simple et spécifique
import (Component) from 'angular/core';

export interface User {
    firstname: string
    lastname: string
}

@Component({
    selector: 'users',
    templateUrl: './users.component.html'
})
export class UsersComponent() {
    users: User[]
    defaultUser: User = {
        firstname: 'Default Firstname',
        lastname: 'Default Lastname',
    }
    constructor(
        private _userService: UserService
    ) {
    updateUser(index:number, user: User) {
        this.users = this._userService.update(index, user)
    }
}

  Ajout de fonctionnalité à notre composant

Répéter

  • La plateforme Angular 2 permet de créer très facilement un composant
  • Découper un composant en plusieurs composant est très vivement recommandé
import (Component) from 'angular/core';

import {UserComponent} from './user/user.component'

export interface User {
    firstname: string
    lastname: string
}

@Component({
    selector: 'users',
    templateUrl: './users.component.html',
    directives: [UserComponent]
})
export class UsersComponent() {
    users: User[]
    defaultUser: User = {
        firstname: 'Default Firstname',
        lastname: 'Default Lastname',
    }
    constructor(
        private _userService: UserService
    ) {
    updateUser(index:number, user: User) {
        this.users = this._userService.update(index, user)
    }
}

  Inclusion d'un sous-composant

Cycle de vie Angular 2

  • Ils permettent d'exécuter de la logique personnalisé à chaque étape de vie d'un composant
  • Pourquoi ? Les données ne sont pas toujours disponible immédiatement dans le constructeur
  • Utilisable seulement avec TypeScript
  • Les interfaces des hooks sont optionnels (comme tout typage) mais fortement recommandé
  • Hooks = methodes de notre composant

Les hooks

  • ngOnInit - Appeler directement après la mise en place du binding
  • ngOnChanges(changes) - Appeler quand un Input change
  • ngDoCheck - Permet d'effectuer du code personnalisé
  • ngAfterContentInit - Après que le contenu soit initialisé
  • ngAfterContentChecked - Après chaque vérification du composant par Angular
  • ngAfterViewInit - Après que la vue soit initialisé
  • ngAfterViewChecked - Après vérification de la vue
  • ngOnDestroy - Juste avant la suppression de ce composant

Liste des hooks

import (Component, OnInit) from 'angular/core';

import {UserComponent} from './user/user.component'

@Component({
    selector: 'users',
    templateUrl: './users.component.html',
    directives: [UserComponent]
})
export class UsersComponent implements OnInit () {
    users: User[]
    defaultUser: User = {
        firstname: 'Default Firstname',
        lastname: 'Default Lastname',
    }
    constructor(
        private _userService: UserService
    ) {
    ngOnInit() {
        this.users = this._userService.get()
    }
    updateUser(index:number, user: User) {
        this.users = this._userService.update(index, user)
    }
}

  onInit hook

Demo time !

Défi

  • Créer la structure de fichier pour un composant widget
  • Créer la classe ES6 widget
  • Importer les dépendances
  • Décorer la classe widget pour utiliser un template & un sélecteur
  • Afficher le composant widget dans le composant home
  • BONUS : Créer une simple route pour se rendre sur le composant widget

Linalis - 05 - Les concepts fondamentaux

By Benjamin LONGEARET

Made with Slides.com

Linalis - 05 - Les concepts fondamentaux

  • 875

More from Benjamin LONGEARET