LE WEB DE DEMAIN ! C’EST DÉJÀ AUJOURD’HUI
Angular 2
Meetup N°2
24/09/2016
#ngMorocco
#ngMorocco
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2837160/sensors.png)
Ouadie Lahdioui
Consultant IT
lahdiouiouadie
ouadie-lahdioui
Pour vous servir ...
Regardez la présentation en temps réel : https://slides.com/ouadielahdioui/angular2/live
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907152/github-logo-icon-30.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907156/twitter-2.png)
lahdiouiouadie
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2969454/facebook-4-xxl.png)
Bataille de pouces géante
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2998365/tg2013_020684_lnsr4119.jpg)
Ce qu'on va voir !
Angular Universal
Module Loaders
Material design
Composantes
NativeScript
Angular CLI
TypeScript
Services
Zone.JS
Augury
Mobile
Pipes
Ce qu'on NE va pas voir !
Functional Reactive Programming
i18n (internationalization)
Change detection
WebWorkers
Observables
Animations
Routage
Tests
RxJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2836240/giphy.gif)
Angular 2 has finally been released !
has finally been released!
Wake up
Avez-vous déjà utilisé Angular ?
Avez-vous un retour d'expérience
Sur Angular 1.x ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844832/pourContre.png)
Angular 1.x, Piqûre de rappel
Model-View-Whatever (a.k.a MV* )
Injection de dépendance
Liaison bidirectionnelle
Expressions
Directives
Services
Module
Filtres
Scope
...
Mais c'est quoi le problème avec Angular 1.x ?
l'injection de dépendance
function MyController($scope, $window) {}
someModule.controller(‘MyController’, [‘$scope’, function($scope) { }]);
MyController.$inject = [‘$scope’, ‘$window’];
Pour faire la minification !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
Débogage
<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 ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877881/debug.png)
C'est quoi le résultat si "user" est undefined ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
Le dirty checking
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877911/n1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
Le support d'une limite théorique de 2000 bindings/page web
Et la dégradation des performances
Héritage des scopes
<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" ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
Cas 1 :
Cas 2 :
Est la source de la plupart des problèmes
Search engine optimization
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 :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877960/seo_issue1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
La complexité des DIRECTIVES
Trasnclude, Compile, Link, Controller ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878136/building-angularjs-custom-directives-16-638.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878137/image_thumb_52AC4F72.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878170/Messaging-Question-icon.png)
Tous les chemins mènent à Rome
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840330/114656-magic-marker-icon-alphanumeric-quote-close2.png)
- Extrait de la session de Shai Reznik à ngConf
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2878991/all-roads-lead-to-rome-cartoon-illustration-roman-legionary-soldier-surprised-doodle-contour-style-black-red-60720549.jpg)
Pourquoi Angular 2 ?
Né pour résoudre une problèmatique
ONE TEAM + CORE COMPETENCE + ONE CODE BASE
=
LOTS OF STUFF
Multi platformes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2888676/Capture_d_e_cran_2016-08-02_a__16.49.41.png)
WEB
MOBILE WEB
MOBILE natif
android - ios - windows
desktop
windows - mac - linux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843248/Oster_s-Versa.jpg)
HTTP 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840576/bg_kader_web_workers_intro.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843272/event_447655003.png)
VM Turns
Push Notification
Zones
DI
intellisense
CLI
Débogage
Putting the pieces together
Server rendering
Isomorphique
Mobile
le fruit d'un effort communautaire
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2837802/ember.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2837804/Telerik_Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840589/reactjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840590/nativescript.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840593/meteor.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844327/ionic.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844332/drupal-logo-vector.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844344/microsoft.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843130/user9956_pic2585_1243220234.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843131/Transformers-bumble-bee.jpg)
... D'un framwork à une plateforme
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852516/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2886474/images.png)
Angular 1.x
Angular 2
Angular 2, le renouveau
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2841221/Capture_d_e_cran_2016-07-13_a__17.55.08.png)
Popularité d'Angular selon libscore.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2855103/untitled-3.png)
Evolution de l'intérêt de recherche
Feedback sur Stack Overflow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2839958/Capture_d_e_cran_2016-07-13_a__10.07.26.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843172/Capture_d_e_cran_2016-07-14_a__11.12.33.png)
Source : Keynote ng-conf 2016
Taille de la communauté
RIP
Il était une fois dans angular 1 ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2837972/new-features-in-angular-15-17-638.jpg)
PREMIÈRE IMPRESSION DE LA COMMUNAUTÉ
WHAT ! Et mes web apps Angular 1.x ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840223/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877924/Capture_d_e_cran_2016-07-28_a__09.20.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877925/Capture_d_e_cran_2016-07-28_a__09.18.10.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877926/Capture_d_e_cran_2016-07-28_a__09.18.23.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877927/Capture_d_e_cran_2016-07-28_a__09.18.30.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2877928/Capture_d_e_cran_2016-07-28_a__09.18.43.png)
-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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840326/dsc00217_jpg.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840330/114656-magic-marker-icon-alphanumeric-quote-close2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3091743/ng1SecurityPatch.png)
Concepts-clés
TypeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2886488/es5-es6-typescript.png)
Source code : *.ts
Source code : *.js
Transpiling
interface Pokemon {
name: string;
size: string;
}
POO - typage statique - ANNOTATIONS
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);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2950639/Pikachu.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2950641/satoshidp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2908451/poke_ball_icon__3f1__by_epe-d8nkpxf.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840945/Capture_d_e_cran_2016-07-13_a__16.32.42.png)
vue globale de l'architecture angular 2
Modularité
Modularité
- Minimiser les risques d'interaction involontaire avec l'extérieur
- Rendre les bibliothèques :
- Plus faciles à maintenir
- Mieux structurées
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
Modularité avant l'ES 6
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
modularité à l'aire de l'ES 6
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
modularité avec angular 2
SystemJS : Un chargeur de modules universel pour JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898646/photo13698.jpg)
AMD
(Asynchronous Module Definition)
CJS
(CommonJS)
REGISTER
(System.register)
ESM
(ECMAScript Module)
GLOBAL
(Global shim module format)
qu'est qu'un module peut exporter ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898518/library-module.jpg)
// 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) { /*...*/ }
}
Composantes
Le respect des nouveaux standards du web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844121/tumblr_lqlz4dObyQ1qcprm9o8_1280.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844122/tumblr_lqlz4dObyQ1qcprm9o7_1280.jpg)
Sans Composant
AVEC Composant
import { Component } from '@angular/core';
@Component({
selector: 'pokemon'
template: `...`
})
export class Pokemon implements OnInit {
ngOnInit() {
/* ... */
}
}
Déclaration d'un composant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898621/025Pikachu_Pokemon_Mystery_Dungeon_Red_and_Blue_Rescue_Teams.png)
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>
Template d'un composant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3034067/Capture_d_e_cran_2016-09-22_a__10.33.50.png)
arbre de composants imbriqués
Composant
principal
Composant
PokemonList
Composant
Navbar
Composant
SideBar
Composant 5
Composant
PokemonDetail
Application Angular 2
metadata d'un composant
@Component({
selector: 'pokemon-list',
templateUrl: 'app/pekemon-list.component.html',
directives: [PekemonDetailComponent],
providers: [PokemonService]
})
export class PokemonListComponent implements OnInit {
/* . . . */
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898712/template-metadata-component.png)
liaison de données (a.k.a Data binding)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840944/Capture_d_e_cran_2016-07-13_a__16.32.49.png)
<p>{{pokemon.name}}</p>
<pokemon-detail [pokemon]="selectedPokemon"></pokemon-detail>
<button (click)="selectPokemon(pokemon)"></button>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898729/component-databinding.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3034001/parent-child-binding.png)
[()] BANANA IN A BOX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843567/banana.png)
43 Directives dans Angular 1 VS [()] dans Angular 2
= "value"
<input [(ngModel)]="pokemon.name">
Directives
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2899083/directive.png)
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>
Services
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2899245/service.png)
@Injectable()
export class PokemonService {
getPokemonById(id: number): Pokemon {
return this.pokemons.filter(pokemon => pokemon.id === id).pop();
}
}
PIPES
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
...
- Effectuer des transformations directement dans le template :
<p>The hero's birthday is {{ birthday | date:'fullDate' | uppercase}}</p>
Injection de dépendances
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2899264/dependency-injection.png)
constructor(private service: PokemonService) { }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2899275/injector-injects.png)
PROVIDERS pour guider l'injector
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
ZONE.JS
Monkey-patch des fonctions asynchrones
Zone.JS
- Similaire aux domains dans NodeJS et ThreadLocal dans Java
- l'implémentation des Zones inspirée par "Dart language"
A Zone is an execution context that persists across async tasks.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840330/114656-magic-marker-icon-alphanumeric-quote-close2.png)
Async JavaScript
start()
showBulbasaur()
setTimeout(showPikachu, 0);
setTimeout(showCharmander, 0);
showSnorlax()
stop()
Temps
Temps
showCharmander
Queue :
Et si on veut savoir le temps d'execution ?
showBulbasaur()
setTimeout(showPikachu, 0);
setTimeout(showCharmander, 0);
showSnorlax()
Temps
showPikachu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2901767/001_Bulbasaur_DW.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898621/025Pikachu_Pokemon_Mystery_Dungeon_Red_and_Blue_Rescue_Teams.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2901770/143Snorlax_AG_anime.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2901782/0004_c___charmander_by_gaghiel1987-d5oqbts.png)
(async)
(async)
Temps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2901767/001_Bulbasaur_DW.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2898621/025Pikachu_Pokemon_Mystery_Dungeon_Red_and_Blue_Rescue_Teams.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2901770/143Snorlax_AG_anime.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2901782/0004_c___charmander_by_gaghiel1987-d5oqbts.png)
(exclu)
(exclu)
ASYNC JavaScript avec Zone.js
Temps
showBulbasaur()
showSnorlax()
showPikachu()
showCharmander()
start()
stop()
start()
stop()
start()
stop()
showBulbasaur()
showSnorlax()
showPikachu()
showCharmander()
onZoneEnter()
onZoneEnter()
onZoneEnter()
onZoneLeave()
onZoneLeave()
onZoneLeave()
- Exécute du code avant et après
- Testing / Timing / Gestion des erreurs / ...
- Un jour, ça vas devenir un standard (Ecma TC39)
ZONE.JS
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'
RENDERS
Renderers
- Remplaçable selon l'environnement
- Précompilation (taille de l'app + temps de bootstrap)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907002/dom-render-diagram.png)
Server side render
Angular universal
Angular Mobile Toolkit
Progressive web apps :
Instant loading
Offline
Installable
Notifications
App natives
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852513/IVplW.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852514/605e7f9f7051e6da7ef686d52e65a100ac7c071be1a82edb580d39bd.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852516/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852518/ionic.twitter.sample-logo-4203547186-0_avatar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852514/605e7f9f7051e6da7ef686d52e65a100ac7c071be1a82edb580d39bd.png)
NativeScript
- Un framework JavaScript opensource pour créer des applications mobiles natives (pas de WebView)
- Basé sur une machine virtuelle JS (eg: JavaScriptCore, V8, ...)
var myAlert = new UIAlertView();
myAlert.message = "NativeScript rocks!";
myAlert.show();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2888488/ios-alert.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2888348/Capture_d_e_cran_2016-08-02_a__14.41.41.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2895838/showcases6e7a622a7b776b26a649ff04000922f2-1.jpg)
qu'est ce que je peux faire avec ?
MATERIAL DESIGN
Le web design selon Google
Material design
Angular material 1
Angular material 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852552/Capture_d_e_cran_2016-07-18_a__17.21.21.png)
Angular-CLI
Angular Augury
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843634/augury-screenloop.gif)
Style Guide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852482/Capture_d_e_cran_2016-07-18_a__16.51.06.png)
Officiel et communautaire
Migration
Angular 1.x -----------> Angular 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843372/how-to-draw-the-golden-gate-bridge-golden-gate-bridge-step-25_1_000000134005_5.png)
It's really hard for us to build a bridge to a city that doesn't exist yet.
- Brad Green
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840330/114656-magic-marker-icon-alphanumeric-quote-close2.png)
Solution N° 1
sudo rm -rf yourAngularProject
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2837265/sudo-rm-rf.gif)
commencez par :
- Lire le Styleguide
- Adopter une approche composants
- Utiliser TypeScript
- Utiliser un module loader
- Utiliser un adapteur
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844191/KeepCalmStudio.com-_Crown_-Keep-Calm-And-Show-Me-Your-Angular-2-Code.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3034081/Capture_d_e_cran_2016-09-22_a__10.40.05.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2908450/250px-Poke_dex_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2908451/poke_ball_icon__3f1__by_epe-d8nkpxf.png)
Déja en PRODUCTION
Capital One
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852440/Capture_d_e_cran_2016-07-18_a__16.34.54.png)
Lucidchart
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852452/Capture_d_e_cran_2016-07-18_a__16.36.44.png)
Kiva
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852472/Capture_d_e_cran_2016-07-18_a__16.44.56.png)
Fidelity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2852468/Capture_d_e_cran_2016-07-18_a__16.43.11.png)
... 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2840330/114656-magic-marker-icon-alphanumeric-quote-close2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844461/maxresdefault.jpg)
STEP UP WITH US
POUR ALLER PLUS LOIN
- Le site officiel Angular.io
- Awesome Angular 2 - Angular Class
- Getting started with Angular 2 - Wassim Chegham
- Creating Cross-Platform Apps with Angular 2 @ Microsoft Build - Brad Green
- Angular 2 and the future of HTML5 apps @ Fluent conf - Brad Green
N'oubliez pas de partager avec moi vos feedbacks sur Angular 2 !
lahdiouiouadie
ouadie-lahdioui
Merci !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907152/github-logo-icon-30.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907156/twitter-2.png)
lahdiouiouadie
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2969454/facebook-4-xxl.png)
Angular 2
By Ouadie LAHDIOUI
Angular 2
Le web de demain ! c'est déjà aujourd'hui
- 1,666