The Angular road from 1.x to 2.0

T H E A N G U L A R R O A D  
F R O M 1 . X T O 2 . X
VA S S I L I S P I T S O U N I S

VA S S I L I S P I T S O U N I S
Web Developer since 2000 
Front End mind & code oriented 
Having (serious) fun with
G I T H U B . C O M / VA P I T S
@ VA P I T S
F O L L O W M E AT
L I N K E D I N . C O M / I N / VA P I T S

C O N T E N T S
• 2.0 Facts & Strengths
• Why TypeScript
• Now & Then
• Platform Tools
• Starters
• The Angular React Debate
• Tip: Move code logic above framework
• Q & A

FA C T S 2 . 0
• It’s a complete new approach, NOT
an Angular 1.x upgrade
• Supports several languages including
plain JavaScript, TypeScript, and
Dart.
• It is MUCH (really) faster.
• Provides you everything that you
need to create a web app
• More than a framework…

S T R E N G T H S
• Perfomance
• Server-side rendering
• Routing
• Community and team
• CLI - Universal - Mobile
• TypeScript (yes, I admit it finally)

W H Y T Y P E S C R I P T
• Angular 2.0 favourite
• Can compile to any JS version
• Optionally static typing and type inference
• Enhanced IDE support
• Adoption

T H E NN O W C
A
N
I  
W
A
L
K  
T
H
E  
S
A
M
E  
R
O
A
D
?
N G - R E P E AT
N G - M O D E L
N G - C O N T R O L L E R  
…
* N G F O R
[ ( N G M O D E L ) ]
@ C O M P O N E N T  
…

A N G U L A R 1 . X A N G U L A R 2 . 0
<body ng-app="myApp">
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

<button ng-click="myFunction($event)"> <button (click)="toggleImage($event)">
ng-controller
@Component({
selector: ‘router-outlet',
templateUrl:’app/my.template.component.html',
styleUrls: [‘app/my.template.component.css'],
})

ng-href
<a [href]="angularDocsUrl">Angular Docs</a>
<a [routerLink]="['Home']">Home</a>

ng-href
<input ng-model="myScope"/> <input [(ngModel)]="myVariable" />

ng-href
<li ng-repeat="user in users"> <li *ngFor="let user of users">

ng-href
<div ng-style="{color: colorPreference}">
<div [ngStyle]="{color: colorPreference}">
<div [style.color]="colorPreference">

ng-href
<div ng-style="{color: colorPreference}">
<div [ngStyle]="{color: colorPreference}">
<div [style.color]="colorPreference">
orderBy & filter expresión N O N E !

• Generate a New Project
• Generate Components, Directives, Pipes
and Services, Routes
• Creating a Build
• Running Unit Tests
• Running End-to-End Tests
• Deploying the App via GitHub Pages
• Support for offline applications
• CSS preprocessor integration
• 3rd Party Library Installation
H T T P S : / / C L I . A N G U L A R . I O

• CLI, that helps a lot…
• SERVER
• E2E
• UNIT TESTS
• READY TO GO
• ANGULAR OFFICIAL SUPPORT - PLANS TO MERGE
P R O S C O N S
• Early Beta state
H T T P S : / / C L I . A N G U L A R . I O

• Super Easy
• Insane perfomance
• Works with your current 2.0
project
H T T P S : / / U N I V E R S A L . A N G U L A R . I O
• SEO Friendly
• Social sites preview finally
works

H T T P S : / / M O B I L E . A N G U L A R . I O
Create an installable mobile web app with Angular CLI
Make the App Installable with Web App Manifest
Add an app shell component to the App
Add basic offline capabilities with Service Worker

A N G U L A R 2 . 0 S TA R T E R S
A N G U L A R 2 W E B PA C K S TA RT E R
A N G U L A R 2 - W E B PA C K
H T T P S : / / G I T H U B . C O M / P R E B O O T / A N G U L A R 2 - W E B PA C K
H T T P S : / / G I T H U B . C O M / A N G U L A R C L A S S / A N G U L A R 2 - W E B PA C K - S TA RT E R

A N G U L A R 2 W E B PA C K S TA R T E R
• Popular
• Covers all needs
• Ready to go
• Webpack
• TypeDoc 
 
• Not much, maybe more than you need if
you build a small app
P R O S
C O N S

A N G U L A R 2 - W E B PA C K
• Covers all needs
• Ready to go
• Webpack
• Smaller size
• TypeDoc Documentation 
 
• Not big community around
• No Releases strategy
P R O S
C O N S

T H E A N G U L A R - R E A C T D E B AT E

H E R E A R E S O M E U S E R S C O M M E N T I N G R E L AT E D A RT I C L E S

A FA I R C O M PA R I S O N I S N O T
P O S S I B L E , B U T:
A N G U L A R V S R E A C T
• Both are great solutions
• Still Angular is a framework
(or more) React is a library
• Angular is HTML Centric
• React is JS Centric

M O V E Y O U R L O G I C A B O V E F R A M E W O R K
S E E T H E T R A N S I T I O N A S A N O P P O RT U N I T Y T O

U N T I L N O W ( W E L L U S U A L LY ) W E F O L L O W T H I S A P P R O A C H
Framework
C O D E L O G I C M O D U L E S S E R V I C E S
C O M P O N E N T S D I R E C T I V E S C O N T R O L L E R S
R E S U LT

G O A B O V E F R A M E W O R K A N D F E E L F R E E
Framework
C O D E L O G I C
S E R V I C E SC O M P O N E N T S D I R E C T I V E S
R E S U LT
Logic
S I M P L E & E A S Y

R E S O U R C E S
Angular-CLI 
https://cli.angular.io/
Angular Universal 
https://universal.angular.io/
Angular Mobile 
https://mobile.angular.io/
 
Angular2 Webpack Starter
https://github.com/AngularClass/angular2-webpack-starter
angular2-webpack
https://github.com/preboot/angular2-webpack
Documentation 
https://angular.io/docs/

G I T H U B . C O M / VA P I T S @ VA P I T S L I N K E D I N . C O M / I N / VA P I T S
Q & A
Follow me…

The Angular road from 1.x to 2.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to The Angular road from 1.x to 2.0

Similar to The Angular road from 1.x to 2.0 (20)

Recently uploaded

Recently uploaded (20)

The Angular road from 1.x to 2.0