FROM ZERO TO HERO
ANGULAR 2
Ouadie LAHDIOUI
WHO AM I ?
• IT consultant @ OCTO Technology
• Passionate about Agile & Software craftsmanship
• The Moroccan AngularJS developer community
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907156/twitter-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2848744/logoWithRibon.png)
lahdiouiouadie
www.ngmorocco.org
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907152/github-logo-icon-30.png)
OUADIE-lahdioui
WHO ARE YOU ?
- Front-End developers ?
- Back-End developers ?
- Something else ? something in between !?
HEROES don't always wear capes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3171856/hero.jpg)
Sometimes they code with angular
ANGULAR 2 FINAL RELEASE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3171706/Capture_d_e_cran_2016-10-28_a__15.31.13.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3171730/67f4381e7ccdadc93f6f167020386877.png)
WHY ANGULAR ?
ONE TEAM + CORE COMPETENCE + ONE CODE BASE
=
LOTS OF STUFF
MULTI PLATFORMS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2888676/Capture_d_e_cran_2016-08-02_a__16.49.41.png)
PUTTING THE PIECES TOGETHER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843248/Oster_s-Versa.jpg)
- Mobile
- Web components
- Web workers
- TypeScript
- Zones
- Isomorphic
- Server rendering
- Intellisence
- DI, CLI, HTTP 2
- …
STRONG COMMUNITY
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3172013/Capture_d_e_cran_2016-10-28_a__17.05.58.png)
WHAT IS THE DIFFERENCE BETWEEN
ANGULARJS 1 and Angular 2 ?
ANGULARJS 1 VS ANGULAR 2
- Goodbye $scope
- No more controllers
- Component based UI
- New build-in directives
- Better performance
- Better mobile support
FROM FRAMEWORK TO PLATFORM
![](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)
![](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)
ANGULARJS 1.X
ANGULAR 2.X
CONCEPTS*
ANGULAR 2
* SOME OF THEM
ANGULAR 2
IS BUILt
USING TYPESCRIPT
TYPE SCRIPT
ES7 (ECMASCRIPT 2016)
TYPESCRIPT
ES5 (ECMASCRIPT 5)
ES6 (ECMASCRIPT 2015)
*.ts
*.js
transpilation
YOU CAN
USE
TYPESCRIPT, ES6 OR ES5
ANGULAR 2 APP IS A TREE OF
SELF-DESCRIBING
COMPONENTS
COMPONENTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844122/tumblr_lqlz4dObyQ1qcprm9o7_1280.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2844121/tumblr_lqlz4dObyQ1qcprm9o8_1280.jpg)
Without components
With components
Application
DashBoard
Angular 2 APP
Login
Search
Toolbar
THIS IS A COMPONENT
Application
// my-roor-app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'my-root-app',
templateUrl: './my-root-app.component.html',
})
class Application { /* ... */ }
<!-- index.html -->
<my-root-app>Your application is loading...</my-root-app>
COMPONENTS have templates
<div> Hello {{ name }} </div>
{{ expression }}
[ props ]
( event )
<img [src]="imageUrl" />
<button (click)="doIt()"></button>
WHAT ABOUT TWO WAY DATA BINDING ?
[( ngmodel )]
<input [(ngModel)]="name" />
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2843567/banana.png)
BANANA IN A BOX
COMPONENTS still have DIRECTIVES
- No more ng-show, ng-hide, ng-click but functionality is still available
- 3 types of Angular2 Directives :
- Components
- Attribute Directives : ngStyle, ngClass, …
- Structural Directives : ngIf, ngSwitch, ngFor, …
<div [ngStyle]="setStyles()">
<p *ngFor="let player of players">...</p>
</div>
COMPONENTS CAN DISPLAY FORMATED DATA > PIPES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3172064/pipes.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3172073/mario1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3172075/mario2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3172078/mario3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3172079/mario4.png)
PIPE 1
DATA
PIPE 2
PIPE 3
PIPE 4
![](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/2852516/angular.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/2852516/angular.png)
<p>
The chained mario's birthday is
{{ birthday | date:'fullDate' | uppercase}}
</p>
- Angular 2 comes with a stock of build-in pipes :
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe ...
COMPONENTS ARE ROUTABLE
- Angular2 router = Complete rewrite
- Inspired by the UI-Router (Nested views, ....)
index.html
menu
<router-outlet>
COMPONENT
COMPONENT
COMPONENT
/component1
/component2
/component3
<router-outlet>
COMPONENTS INJECT SERVICES
Service is a class that encapsulates some sort of functionality and provides it as a service for the rest of the application.
export class UserService {
private users: User[] = [];
constructor(
private backend: BackendService,
private logger: Logger
) { ... }
getAllUSers() {
return this.users;
}
}
DEPENDENCY INJECTION
ANGULAR APPS
ARE MODULAR
THANKS TO ECMASCRIPT 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3174245/library-module.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3174245/library-module.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/3174245/library-module.png)
Angular 2 APP
aNGULAR
HAS ITS OWN MODULAR SYSTEM
a.k.a @ngmodule
be careful
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
- Every Angular app has at least one module (AppModule)
- You must bootstrap your root module
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
UPGRADING from
ANGULARJS 1.x to Angular 2.x
UPGRADING FROM Angular 1.x to angular 2.x
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2837265/sudo-rm-rf.gif)
sudo rm -rf yourAngularProject
- Following The Angular Style Guide
- Using a Module Loader
- Migrating to TypeScript
- Using Component Directives
LIVE CODING
github.com/ouadie-lahdioui/DevoxxMorocco2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907152/github-logo-icon-30.png)
Thank you
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907156/twitter-2.png)
lahdiouiouadie
slides >
![](https://s3.amazonaws.com/media-p.slid.es/uploads/381089/images/2907152/github-logo-icon-30.png)
OUADIE-lahdioui
Angular 2 : From Zero To Hero
By Ouadie LAHDIOUI
Angular 2 : From Zero To Hero
Angular 2 : From Zero To Hero
- 1,842