ANGULAR2_training plan

ANG2_ts_ducktyping_emailable.ts

// Le typage TypeScript ne se base pas sur les interfaces mais sur les "Shapes" inspirées du "Duck Typing" Python.
// "If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck."

// If we don't have access to external classes

class User {
    firstName: string;
    lastName: string;
    email: string;
}

class Shop {
    email: string
}

interface IHasEmail {
    email: string;
}

class EmailEditor {

    _emailable;

    constructor({emailable}: {emailable: IHasEmail}) {
        this._emailable = emailable;
    }

    setEmail({email}: {email: string}) {
        this._emailable.email = email;
    }

}

let user = new User();
let emailEditor = new EmailEditor({emailable: user});

emailEditor.setEmail({email: 'younes@wishtack.com'});

console.log(user.email); // younes@wishtack.com

let shop = new Shop();
emailEditor = new EmailEditor({emailable: shop});
emailEditor.setEmail({email: 'lionel@wishtack.com'});
console.log(shop.email); // lionel@wishtack.com

let someEmailableObject = {email: null};
emailEditor = new EmailEditor({emailable: someEmailableObject});
emailEditor.setEmail({email: 'contact@wishtack.com'});
console.log(someEmailableObject.email); // contact@wishtack.com
                    

Angular2_training_plan.md

Introduction

● Outils et IDE

● Packaging, npm, Webpack

● Installation npm

● Installation angular-cli

ES6 (ES2015)

Classes, this

https://gist.github.com/Y2017/926a9a84ba642874ed2b0a0ff0a612b9

Arrow Functions

Template Strings

Inheritance

Constants and Block Scoped Variables

Spread and Rest operators

Destructuring

Modules

TypeScript (ES2016+)

● Installation TypeScript

● Transpiler EcmaScript

● let, variables locales et constantes

● Typage et types natifs

● Paramètres optionels, valeurs par défaut

● Classes et Interfaces

● Gestin des modules

● Arrow functions

● Décorateurs

Classes, fondamentaux: constructeur, méthode et gestion de contexte

Classes, avancés: héritage, méthodes statiques

Opérateurs set et get

Littéraux de Gabarits

Fonctions fléchées

Variables de bloc

Déclaration de type avec Typescript

angular-cli.json scripts:"xxxxx.js"

typings.d.ts declare var Mavar: any;

https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htmInterface et formes

Décorateurs

Templates

● Interpolation / expression

● Binding et interactions

● Variables locales

● Symbole *, directives de structure

● Pipes, filtres

Interpollation, expression et instruction

Syntaxe de liaison: sens unique, double sens, cibles de liaison

Directives natives: NgClass, NgStyle, NgIf, NgSwitch, NgFor

Propriétés d'entrée et de sortie

Opérateurs d'expression de gabarit «|» et «?.»

Formulaires

● Control et ControlGroup

● Validations

● Gestions d’erreurs

● Gestion des modifications

● Groupes de champs avec FormBuilder

Formulaire

Liaison des événements d'entrée

L'objet $event

Variable de référence de gabarit

Créaton de formulaire avec la syntaxe de gabarit

Liaison de données à double sens

Suivre et valider les saisies utilisateur avec ngControl

Soumettre le formulaire avec ngSubmit

Atelier : Gestion des entrées utilisateurs

Composants et services

● Directives : selectors, inputs, outputs, cycle de vie, providers

● Composants : templates, styles, directives, pipes

● Visibilité des composants

● Services, injectable

Injection de dépendances

Principes de DI

Configurer l'injecteur

Enregistrer des fournisseurs dans un composant

Création de l'injecteur

Différents types de fournisseurs: classe, valeur, fabrique...

Atelier : Architecturer notre application sous forme d'une organisation de services

Routing

● Concepts de routage

● Router providers et config

● Router directves

● Méthodes de routage et paramètres

Routage côté client, hashtag et HTML5

Configuration des routes sur un composant

Récupérer des paramètres de routes

Stratégie de routes

Routes imbriquées

Atelier : Mettre en place une application multi-vues

HTTP &,Observables et rxjs

● Présentation

● Observable et rxJs

● EventEmitter dans Angular 2

● HTTP providers

● Requêtes

● Transformation des données et Observables

● Options de requêtes

● Tests et requêtes HTTP

Principe de communication asynchrone

Récupérer des données avec http.get

Observable RxJS

Prise en charge du transport JSON

Gestion des erreurs

Envoi de données au serveur

Fonctionnement des promesses

Sources externes: CORS

Auth Interceptor

https://github.com/voliva/angular2-interceptors/wiki/Concept

Atelier : Mettre en place un client d'API ReST

RxJS

The Reactive Extensions for JavaScript unifies both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, Web Sockets

async : support natif des observables dans les templates avec le pipe async

{{ contact.name }}

debounceTime : auto-completion avec DebounceTime :

this.places = this.ctrl.valueChanges.debounceTime(500).flatMap( val => { return this.service.searchPlaces(val); }

timeout and retry :

setTimeout( () => { this.contacts = service.getContacts(); });

retry(4).map(...)

ServerSideEvent (SSE) et Observables

getIndicatorsStream(): Observable { return Observable.create((observer) => { let eventSource = this.sseService .createEventSource('http://localhost:8080/api'); eventSource.onmessage = (event) => { this.zone.run(() => observer.next(JSON.parse(event.data))); }; eventSource.onerror = (error) => observer.error(error);});

rafraichir la zone avec : zone.run(callback)

http://blog.octo.com/angular-2-sse-et-la-detection-de-changements/

Sources :

http://xgrommx.github.io/rx-book/why_rx.html

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/callbacks.md

Tester l'application

Fondamentaux des tests avec Jasmine

Automatisation des tests avec Karma

Tester des composants simples

Tester des composants avec services asynchrones

Tester des formulaires

Atelier : Multiples exemples de tests

Migration

● Composants Angular 1

● ng-upgrade : coexistence 1 et 2

● ng-forward

DEPLOYMENT

bundling

minification, source maps et compression avec UglifyJS

tree shaking

JIT : compilation au niveau du runtime (par défaut)

bootstrapModule

ahead of time : precompilation (avec ngc lors du build)

bootstrapNgFactory

compression (gzip ou brotli)

ANGULAR CLI :

support natif du Tree Shaking, de l'AoT

ng build --prod ng build --prod --aot

Docker, Nginx

Angular2 : des principes à la pratique :

https://docs.google.com/presentation/d/18CeCigxsH3R8Rh7fcl03ExYUK4XV1MHd50hduIyolSg/pub?start=false&loop=false&delayms=3000&slide=id.g17b8b77119_0_217