Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The awesomeness of Angular 2
Search
Ciro Nunes
April 24, 2015
Programming
14
21k
The awesomeness of Angular 2
Demo:
http://github.com/cironunes/cart2
Ciro Nunes
April 24, 2015
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
46
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
66
Beyond ng new
cironunes
2
200
Animate your Angular apps
cironunes
0
410
Sweet Angular, good forms never felt so good
cironunes
0
64
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
890
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Other Decks in Programming
See All in Programming
Effect の双対、Coeffect
yukikurage
5
1.4k
Passkeys for Java Developers
ynojima
3
880
エラーって何種類あるの?
kajitack
5
280
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
840
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
C++20 射影変換
faithandbrave
0
500
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
130
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
CursorはMCPを使った方が良いぞ
taigakono
0
150
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Ace a Technical Interview
jacobian
277
23k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Being A Developer After 40
akosma
90
590k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Raft: Consensus for Rubyists
vanstee
140
7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
86
4.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
The Awesomeness of Angular 2
Ciro Nunes FRONT-END ENGINEER @cironunesdev / +cironunesdev / cironunes.com
Belo Horizonte - MG
None
None
None
The Awesomeness of Angular 2
but before…
The current state of Angular 1.x
15k+ forks angular/angular.js 1.2k+ contributors 37k+ stars Angular 1.x
1.4 New Router New I18n CommonJS support Better animation support
Performance improvements
Angular 2 ready 1.4 New Router New I18n CommonJS support
Better animation support Performance improvements
Angular 1.4 is the best Angular yet
1.5 is coming soon
The Awesomeness of Angular 2
None
None
Why a brand new version?
2009
None
2015
None
None
Reasons for a brand new version
Evolving web Reasons for a brand new version
Evolving web Reasons for a brand new version Focus
The awesomeness of Angular 2
Change detection The awesomeness of Angular 2
Change detection The awesomeness of Angular 2 Benefits of using
ES6
Change detection The awesomeness of Angular 2 Benefits of using
ES6 Template syntax
Disclaimer Angular 2 is currently in Alpha Preview
Change detection
Performance issues
None
None
Faster by nature Easier to reason about Trees
Immutable objects
None
None
Observable objects
None
None
None
None
Configurable 3-10x faster Trees instead of cycling graphs Change detection
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Benefits from using ES6
“Classes" Angular 1.x angular.module('myApp') .controller('MyComponent', function() { this.meaningOfLife = 42;
});
Classes Angular 2 class MyComponent { constructor() { this.meaningOfLife =
42; } }
angular.module('myApp', ['myModule']); angular.module('myModule', []); Modules Angular 1
Modules Angular 2 export class MyModule {} import {MyModule} from
'module';
Directives Angular 1 angular.module('myApp') .directive('myComponent', function() { return { template:
'<p>Meaning of life is {{ meaningOfLife }}</p>', bindToController: true, controller: function() { this.meaningOfLife = 42; } }; })
Annotations (optional) @Component({ selector: 'my-component' }) @View({ template: `<p>The meaning
of life is {{ meaningOfLife }}</p>` }) class MyComponent { constructor() { this.meaningOfLife = 42; } }
Types (completely optional) @Component({ selector: 'my-component' }) @View({ template: `<p>The
meaning of life is {{ meaningOfLife }}</p>` }) class MyComponent { meaningOfLife: number; constructor() { this.meaningOfLife = 42; } }
Template syntax
Data-binding
<my-greeting person="Ciro"></my-greeting> <my-greeting person="{{vm.person}}"></my-greeting> <my-greeting person="vm.person"></my-greeting> Binding to components Angular
1
<my-greeting [person]="person"> <my-greeting person="Ciro"> Binding to components Angular 2
Events
<my-greeting greet="vm.smile()"></my-greeting> Angular 1 expression or statement
<my-greeting (greet)="smile()"></my-greeting> Angular 2 expression vs statement <my-greeting [greet]="smile()"></my-greeting>
Toolable Power in the hands of the user Fewer rules
to remember Template syntax Play nice with Web Components
DEMO TIME github.com/cironunes/cart2
Thanks! @cironunesdev / +cironunesdev / cironunes.com