Scribd Logo
Importer

Bienvenue sur Scribd !

  • 25 vues

    Angular

    Transféré par

    Dyno Parantsa

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    Angular

    Transféré par

    Dyno Parantsa
    25 vues18 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    25 vues18 pages

    Angular

    Transféré par

    Dyno Parantsa

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 18

    ANGULAR

    Installation de l’environnement
    Prérequis
    JDK 8
    JAVA_HOME
    • https://nodejs.org/en/
    • Installation: typescript, angular -cli, gulp

    • Désinstallation d’une ancienne version de angular-cli (ligne de commande en


    mode administrateur)
    Typescript
    • Langage de programmation open source développé par Microsoft en 2012 qui
    génère du Javascript
    • Types de données suppotés: number, string, boolean
    • Décorateurs: depuis ES2017
    Javascript Typescript
    var num = 455; var num: number = 455;
    var nom = "Javascript"; var nom: string = "Javascript";
    var test = true; var test: boolean = true;
    var data = "155abc"; var data: any = "155abc";
    var liste = [1, 3, 5]; var liste: Array<number> = [1, 3, 5];
    function somme(a, b) { function somme(a:number, b:number) :number{
    return a + b; return a + b;
    } }
    Angular
    • Le design pattern component
    • MVC
    • Type Script
    • Le standard web component (webcomponents.org)
    • Éléments personnalisés
    • Html imports
    • Templates: blocs de code html qui peuvent être insérés dynamiquement par code javascript
    • Shadow DOM: une zone masquée dans une page qui peut contenir des scripts, css, html non
    accessible dans la page mais utilisable par les composants
    • Une application angular est composée de modules, chaque module peut contenir un ou plusieurs
    composants
    • Une application angular doit posséder au moins un module racine.
    • NgModule permet de définir un module
    Angular 1 vs Angular 2
    • Angular 1 • Angular 2
    • Framework MVC • UI basée sur les composants
    • Templates côté client • Plus de modularité
    • Supporte le code Angular 1
    • Typescript
    • Plus rapide.
    Navigation
    • Le module RouterModule
    (@angular/router) est un mécanisme Configuration:
    de navigation entre vues. • Dans app.module.ts:importer RouterModule

    • Configuration: import {RouterModule } from '@angular/router’;


    • Routes • Dans la section imports:
    RouterModule.forRoot([
    • Directives:
    {
    • RouterLink
    path: ‘user',
    • RouterOutlet
    component: UserComponent
    • RouterLinkActive
    },
    {
    path: ‘ressources',
    component: RessourceComponent
    }
    ])
    ],
    Directives structurelles
    *ngSwitch
    *ngFor
    <ul> • [ngSwitch]="expression«
    <li *ngFor="let user of users"> • *ngSwitchCase=« val_expression«

    {{user.nom}} • *ngSwitchDefault
    </li>
    </ul>
    *ngIf
    <p *ngIf=« users.length <
    1">La liste est vide!</p>

    *ngIf/Else
    <div *ngIf="condition;then contenu else elseContenu">Cette partie est
    ignorée</div>
    <ng-template #contenu>contenu </ng-template>
    <ng-template #elseContenu>else contenu</ng-template>
    Liaison aux données

    Liaison dans une seule direction

    Liaison dans les deux direction:


    [(ngModel)="t1" est équivalent à
    [(ngModel)="t1"
    ngModelChange="t1=$event"
    Liaison aux données
    1- le modèle: Dans le dossier app créer models/res.models.ts 2- dans le composant Angular contenant le formulaire, importer
    le modèle Ressource

    3- dans le code Javascript du composant, définissez votre modèle


    Modèle de l’application

    Modèle Angular attaché au formulaire


    • Les directives ngFor et ngIf sont définies dans BrowserModule importé par
    AppModule
    Atelier 1: une première application
    • exécuter la commande
    • Angular-cli créer un dossier nommé app1 contenant la structure suivante:
    Validation des champs d’un formulaires
    • Classes css
    • ng-untouched ng-pristine ng-valid
    • ng-touched (lostfocus) ng-dirty ng-invalid

    • Propriétés ngModel attachées


    • untouched pristine valid
    • touched dirty invalid

    • Attributs html5: required, minlength, maxlength, pattern


    Les services
    • Le premier composant
    • UI dans une vue
    • Le comportement dans une classe
    Routage et navigation
    1. Importer RouterModule et Routes ( app/app.module.ts)
    import { RouterModule, Routes } from '@angular/router';

    Une application angular possède une seule instance singleton Router,lorsque l’url dans le navigateur change,
    cette instance cherche la route correspondante à partir de laquelle elle cherche le composant à afficher
    2 Ajout des liens
    export const appRoutes:Routes=[ {path:'tasks',component:TasksComponent}];
    3 Configuration des routes

    @NgModule({
    imports: [ BrowserModule,FormsModule, RouterModule.forRoot (appRoutes)]

    4- dans le template
    <a routerLink='/tasks' routerLinkActive='active'>Tasks</a>
    <router-outlet></router-outlet>
    Observable et données serveur.
    • Installation du module rxjs et import

    • Données: taches.json
    Promises vs Observable

    Promise Observable
    Retourne une valeur Retourne plusieurs valeurs
    Ne peut pas être annulé Peut être annulé
    Supporté nativement par les navigateurs Basé sur des librairies comme RxJS
    Supporte les fonctions standards sur les
    tableaux (map, reduce, filter)

    Vous aimerez peut-être aussi