Meetup N°2
24/09/2016
#ngMorocco
Ouadie Lahdioui
Consultant IT
lahdiouiouadie
ouadie-lahdioui
Regardez la présentation en temps réel : https://slides.com/ouadielahdioui/angular2/live
lahdiouiouadie
Angular Universal
Module Loaders
Material design
Composantes
NativeScript
Angular CLI
TypeScript
Services
Zone.JS
Augury
Mobile
Pipes
Functional Reactive Programming
i18n (internationalization)
Change detection
WebWorkers
Observables
Animations
Routage
Tests
RxJS
has finally been released!
Model-View-Whatever (a.k.a MV* )
Injection de dépendance
Liaison bidirectionnelle
Expressions
Directives
Services
Module
Filtres
Scope
...
function MyController($scope, $window) {}
someModule.controller(‘MyController’, [‘$scope’, function($scope) { }]);
MyController.$inject = [‘$scope’, ‘$window’];
Pour faire la minification !
<div ng-repeat=”phone in user.phones”> {{ phone }} </div>
Impossible de faire un points d'arrêt dans {{ }}
C'est quoi la source du problème ?
C'est quoi le résultat si "user" est undefined ?
Le support d'une limite théorique de 2000 bindings/page web
Et la dégradation des performances
<div ng-init="phone = 11"> {{ phone }} </div>
<div ng-if="true">
<button ng-click=”phone = 22">change phone</button>
</div>
<div ng-init="phone = {value: 11}"> {{ phone.value }} </div>
<div ng-if="true">
<button ng-click=”phone.value = 22">change phone</button>
</div>
C'est quoi la résultat si je clique sur "change phone" ?
Cas 1 :
Cas 2 :
Est la source de la plupart des problèmes
http://monsite.com/#/clients/edit
http://monsite.com/#/clients/send/2
Le moteur de recherche ne sait pas que ce sont deux pages différentes :
Pas d'évalution JS dans les robot d'indexation :
Trasnclude, Compile, Link, Controller ...
You have a factory, wich is a service, and you have a service wich is a service, both have providers, and when you write a factory as your service, you actually write a provider wich returns a factory wich is basically A SERVICE
- Extrait de la session de Shai Reznik à ngConf
HTTP 2
VM Turns
Push Notification
Zones
DI
intellisense
CLI
Débogage
Server rendering
Isomorphique
Mobile
Popularité d'Angular selon libscore.com
Evolution de l'intérêt de recherche
Feedback sur Stack Overflow
Source : Keynote ng-conf 2016
Taille de la communauté
-Brad Green, Engineering director at Google and AngularJS team manager
Angular 1 will continue to receive bugfix and security patch support for 18-24 months after the release of version 2.0.
Source code : *.ts
Source code : *.js
Transpiling
interface Pokemon {
name: string;
size: string;
}
class Player {
fullName: string;
constructor(name: string, pokemon: pokemon) {
this.name = name;
this.pokemons.push(pokemon);
}
}
class PokemonBall() {
open() {...}
close() {...}
}
var sacha = new Player("Sacha", pikachu);
function getPlayer(){
return this.player;
}
function getBall(){
return this.ball;
}
module.exports = {
player: getPlayer,
ball: getBall
};
var pokemon = require('./pokemon.js');
console.log(pokemon.player());
console.log(pokemon.ball());
Exporter
define(
['pokemonPlayer','pokemonBall'],
function(player, ball
) {
// Use player and ball
return myFunction;
});
var player = require('pokemonPlayer');
var ball = require('pokemonBall');
// use player and ball
module.exports = myFunction;
Deux écoles ont vu le jour grace à la communauté
CommonJS
AMD
En fin, ce pattern d'écriture modulaire est intégré dans le langage lui-même
export const maxAge = this.maxAge;
export function player() {
return this.player;
}
export function ball() {
return this.ball;
}
import { player, ball } from 'pokemon';
console.log(player());
console.log(ball());
Exporter
SystemJS : Un chargeur de modules universel pour JavaScript
AMD
(Asynchronous Module Definition)
CJS
(CommonJS)
REGISTER
(System.register)
ESM
(ECMAScript Module)
GLOBAL
(Global shim module format)
// app/app.component.ts
export class AppComponent { }
// app/main.ts
import { AppComponent } from './app.component';
import { Directive } from '@angular/core';
@Directive({ selector: '[pokemon]' })
export class PokemonDirective { /*...*/ }
export class Logger {
log(msg: any) { /*...*/ }
error(msg: any) { /*...*/ }
}
Le respect des nouveaux standards du web
import { Component } from '@angular/core';
@Component({
selector: 'pokemon'
template: `...`
})
export class Pokemon implements OnInit {
ngOnInit() {
/* ... */
}
}
OnChanges
OnInit
DoCheck
AfterContentInit
AfterContentChecked
AfterViewChecked
AfterViewInit
OnDestroy
Le cycle de vie d'un composant :
<ul>
<li *ngFor="let pokemon of pokemons">
<img src="/assets/pokemons/{{pokemon.id}}.png">
<p>{{pokemon.name}}</p>
<p>{{pokemon.category}}</p>
<img src="/assets/pokemons/{{pokemon.id}}.png">
<p>{{pokemon.description}}</p>
</li>
<ul>
Composant
principal
Composant
PokemonList
Composant
Navbar
Composant
SideBar
Composant 5
Composant
PokemonDetail
Application Angular 2
@Component({
selector: 'pokemon-list',
templateUrl: 'app/pekemon-list.component.html',
directives: [PekemonDetailComponent],
providers: [PokemonService]
})
export class PokemonListComponent implements OnInit {
/* . . . */
}
<p>{{pokemon.name}}</p>
<pokemon-detail [pokemon]="selectedPokemon"></pokemon-detail>
<button (click)="selectPokemon(pokemon)"></button>
43 Directives dans Angular 1 VS [()] dans Angular 2
= "value"
<input [(ngModel)]="pokemon.name">
1/ Composants :
2/ Directives structurelles :
3/ Directives attributs :
Une directive avec son sélecteur et son template
Agissent sur le DOM en ajoutant/retirant des éléments
Changent l’apparence ou le comportement d’un élément
<pokemon-detail></pokemon-detail>
<div [ngStyle]="setStyles()">
This div is italic, normal weight, and extra large (24px).
</div>
<div *ngIf="isPokemon">{{pokemon}}</div>
<div *ngFor="let pokemon of pokemons">{{pokemon}}</div>
@Injectable()
export class PokemonService {
getPokemonById(id: number): Pokemon {
return this.pokemons.filter(pokemon => pokemon.id === id).pop();
}
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'sample' })
export class SamplePipe implements PipeTransform {
transform(input: string): string {
return `${input} from sample pipe`;
}
}
UpperCasePipe - LowerCasePipe - CurrencyPipe - PercentPipe - DatePipe
...
<p>The hero's birthday is {{ birthday | date:'fullDate' | uppercase}}</p>
constructor(private service: PokemonService) { }
import { Component } from '@angular/core';
@Component({
selector: 'home',
providers: [ PokemonService ]
})
export class HomeComponent {}
@NgModule({
declarations: [AppComponent, PokemonListComponent],
providers: [MdIconRegistry],
bootstrap: [AppComponent]
})
export class AppModule { }
Déclaration globale d'un provider au moment du bootstrap :
Déclaration locale d'un provider dans le composant :
L'injector crée un service à partir d'un objet moule : Provider
Monkey-patch des fonctions asynchrones
A Zone is an execution context that persists across async tasks.
start()
showBulbasaur()
setTimeout(showPikachu, 0);
setTimeout(showCharmander, 0);
showSnorlax()
stop()
Temps
Temps
showCharmander
Queue :
showBulbasaur()
setTimeout(showPikachu, 0);
setTimeout(showCharmander, 0);
showSnorlax()
Temps
showPikachu
(async)
(async)
Temps
(exclu)
(exclu)
Temps
showBulbasaur()
showSnorlax()
showPikachu()
showCharmander()
start()
stop()
start()
stop()
start()
stop()
showBulbasaur()
showSnorlax()
showPikachu()
showCharmander()
onZoneEnter()
onZoneEnter()
onZoneEnter()
onZoneLeave()
onZoneLeave()
onZoneLeave()
Zone.current.fork({}).run(function () {
Zone.current.inTheZone = true;
setTimeout(function () {
console.log('in the zone: ' + !!Zone.current.inTheZone);
}, 0);
});
console.log('in the zone: ' + !!Zone.current.inTheZone);
/* OutPut */
'in the zone: false'
'in the zone: true'
Angular universal
Progressive web apps :
Instant loading
Offline
Installable
Notifications
var myAlert = new UIAlertView();
myAlert.message = "NativeScript rocks!";
myAlert.show();
Le web design selon Google
Angular material 1
Angular material 2
Officiel et communautaire
Angular 1.x -----------> Angular 2
It's really hard for us to build a bridge to a city that doesn't exist yet.
- Brad Green
sudo rm -rf yourAngularProject
Capital One
Lucidchart
Kiva
Fidelity
... we must find a fine balance between supporting and improving the existing Angular, while building the best Angular yet. ... This is why I need you to step up ! Help each other. Help us triage issues and review pull requests. Answer questions on the mailing list, stackoverflow etc.
- Igor Minar, Lead on the Angular project
N'oubliez pas de partager avec moi vos feedbacks sur Angular 2 !
lahdiouiouadie
ouadie-lahdioui
lahdiouiouadie