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
lahdiouiouadie
www.ngmorocco.org
OUADIE-lahdioui
WHO ARE YOU ?
- Front-End developers ?
- Back-End developers ?
- Something else ? something in between !?
HEROES don't always wear capes
Sometimes they code with angular
ANGULAR 2 FINAL RELEASE
WHY ANGULAR ?
ONE TEAM + CORE COMPETENCE + ONE CODE BASE
=
LOTS OF STUFF
MULTI PLATFORMS
PUTTING THE PIECES TOGETHER
- Mobile
- Web components
- Web workers
- TypeScript
- Zones
- Isomorphic
- Server rendering
- Intellisence
- DI, CLI, HTTP 2
- …
STRONG COMMUNITY
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
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
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" />
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
PIPE 1
DATA
PIPE 2
PIPE 3
PIPE 4
<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
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
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
Thank you
lahdiouiouadie
slides >
OUADIE-lahdioui
Angular 2 : From Zero To Hero
By Ouadie LAHDIOUI
Angular 2 : From Zero To Hero
Angular 2 : From Zero To Hero
