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
280
Progressive Angular apps
cironunes
3
890
Angular: Um framework. Mobile & desktop.
cironunes
1
580
Other Decks in Programming
See All in Programming
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
100
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.6k
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
メモリリークが発生した時にpprofを使用して原因特定した話
zono33lhd
0
100
Blueskyのプラグインを作ってみた
hakkadaikon
1
290
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
180
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
610
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
1
270
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
How to train your dragon (web standard)
notwaldorf
92
6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Invisible Side of Design
smashingmag
299
50k
Done Done
chrislema
184
16k
Adopting Sorbet at Scale
ufuk
76
9.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Site-Speed That Sticks
csswizardry
7
590
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