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
50
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
68
Beyond ng new
cironunes
2
200
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
66
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
AI時代のUIはどこへ行く?
yusukebe
0
540
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.6k
AIコーディングAgentとの向き合い方
eycjur
0
250
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
Laravel Boost 超入門
fire_arlo
2
170
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
130
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
230
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
220
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
2
310
Namespace and Its Future
tagomoris
6
680
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
GitHub's CSS Performance
jonrohan
1032
460k
Faster Mobile Websites
deanohume
309
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Code Reviewing Like a Champion
maltzj
525
40k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Building Applications with DynamoDB
mza
96
6.6k
Code Review Best Practice
trishagee
70
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
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