We've all worked or work with Angular 1.x. Yes it has its problems, but we love it, we understand it, we invested plenty of effort mastering it (the learning curve was a pain). But now, Angular 2 is here. And it's different: Many of the Angular 1.x patterns we're used to are no longer valid or in use. The Architectural concepts have changed. This session is for developers who know Angular 2 is here but have misgivings about dealing with the Angular learning curve all over again. I'll try to share my Journey of Learning Angular 2 and to provide a clear recipe for the necessary steps an Angular 1.x developer should take in order to have practical skill in Angular 2.x.

1. a traveler's diary
By Shavit Cohen
2
April 3, 2016

2. angular 2 - a traveler's diary by Shavit Cohen
Shavit Cohen
shavit@tikalk.com
About me in a Nutshell...
FullStack Developer for 7.5 years
Angular.js Consultant, currently at HP
JS Team Lead at Tikal
Learning Experience Enthusiastic

3. angular 2 - a traveler's diary by Shavit Cohen

4. angular 2 - a traveler's diary by Shavit Cohen
Myself :) And my journey with Angular
MyLove - Hate Relationshipwith Angular 2
Angular1 vs Angular2 - Code Comparison
Practical Tips for the Angular 2 wannabes
What will I talk about ?
Angular 2 Syntaxintro
4

5. Practical Tips
Code Comparison
The Different Syntax
Me & Angular :)

6. angular 2 - a traveler's diary by Shavit Cohen
Me, Myself and Angular1.x
Hybrid mobile app
Being compiled with Phonegap
Still used worldwide :)
A lot of mistakes while developing
6

7. I Misused Angular as a framework
7angular 2 - a traveler's diary by Shavit Cohen

8. angular 2 - a traveler's diary by Shavit Cohen
So, looking back, Angular 1 experience felt like...
Frustration
level
Time
2 direction binding is Cool
ng-repeat is awesome
logic within the html markup is strange
Directives ? WTF is this syntax
What is Transclude ?
Directives - What does scope
chars (=,&,@) means ?
Directives - Why using
scope without a $
Services are helpful :)
Provider?
Factory?
Constant?
Values?
Why do we need
so many ?@#
I’ll just use a
service :)
Why there are so many
ways to do simple stuff
Why do I have to do $apply
for the view to render
The $digest loop
is killing the CPU
UI Router is
nice and helpful
Switching to UI
Router is a pain
Performance
issues again
John Papa
code styling
guide is
awesome
Why
Just
Now?!

9. But after the frustration was over
9angular 2 - a traveler's diary by Shavit Cohen

10. angular 2 - a traveler's diary by Shavit Cohen
We made peace with Angular
We love it (Most of us)
Understand it
Knows it’s flaws but lives with them
10

11. And then They announced
11angular 2 - a traveler's diary by Shavit Cohen

12. 12angular 2 - a traveler's diary by Shavit Cohen
2

13. angular 2 - a traveler's diary by Shavit Cohen 13

14. angular 2 - a traveler's diary by Shavit Cohen
Labor Pains
14

15. angular 2 - a traveler's diary by Shavit Cohen
Labor Pains
Documentation is missing
15

16. angular 2 - a traveler's diary by Shavit Cohen
Labor pains
Only limited best practices which based on limited experience
https://github.com/mgechev/angular2-style-guide
16

17. angular 2 - a traveler's diary by Shavit Cohen
Labor pains
Lots of outdated learning materials
17
Outdated syntax
From: angular-tips.com

18. It’s look like the worst time ever for
getting into Angular2
18angular 2 - a traveler's diary by Shavit Cohen

19. So...
19angular 2 - a traveler's diary by Shavit Cohen

20. Iv’e decided to take it for a spin
20angular 2 - a traveler's diary by Shavit Cohen

21. I thought of an idea that can provide developers a
richer learning experience via videos
21angular 2 - a traveler's diary by Shavit Cohen
2
I will share my Idea

22. Practical Tips
Code Comparison
The Different Syntax
Me & Angular :)

23. angular 2 - a traveler's diary by Shavit Cohen
2
23
We want to get into Angular 2
But Then we see something that looks like this

24. angular 2 - a traveler's diary by Shavit Cohen
2
24

25. angular 2 - a traveler's diary by Shavit Cohen 25
Let’s clarify
extends
extends

26. So why not Angular2 with ES5 ?
With no unfamiliar syntax
26angular 2 - a traveler's diary by Shavit Cohen

27. angular 2 - a traveler's diary by Shavit Cohen
Angular 2 with TypeScript Angular 2 with ES5
27

28. angular 2 - a traveler's diary by Shavit Cohen 28

29. angular 2 - a traveler's diary by Shavit Cohen
Let’s conclude so far
Angular 1 syntax !== Angular 2 syntax
29
Coding Angular 2 with ES5 is doable
Angular 2 is experiencing labor pains
“prepare your code for Angular 2” probably won’t help much
But only little documentation about it is currently available

30. Practical Tips
Code Comparison
The Syntax
Me & Angular :)

31. angular 2 - a traveler's diary by Shavit Cohen 31
2
Watchers
Vs
Change Detection

32. angular 2 - a traveler's diary by Shavit Cohen
Watchers Change Detection - “Unidirectional Data Flow”
32
1
2
Watchers vs Change Detection

33. angular 2 - a traveler's diary by Shavit Cohen 33
2
Controllers, and
Directives
Vs
Class

34. angular 2 - a traveler's diary by Shavit Cohen 34
1
Controllers And Directives Vs Class

35. angular 2 - a traveler's diary by Shavit Cohen 35
2
Controllers And Directives Vs Class

36. angular 2 - a traveler's diary by Shavit Cohen 36
21
Controllers And Directives Vs Class

37. angular 2 - a traveler's diary by Shavit Cohen 37
1
Controllers And Directives Vs Class

38. angular 2 - a traveler's diary by Shavit Cohen 38
Controllers And Directive Vs Class
2

39. angular 2 - a traveler's diary by Shavit Cohen 39
1
Controllers And Directive Vs Class
2
<body> may look:

40. angular 2 - a traveler's diary by Shavit Cohen 40
Services
[registering a service]2

41. angular 2 - a traveler's diary by Shavit Cohen 41
Services
[Injecting a service]2

42. angular 2 - a traveler's diary by Shavit Cohen 42
2
Markup

43. angular 2 - a traveler's diary by Shavit Cohen 43
1
Markup
2
ng-if vs *ngIf

44. angular 2 - a traveler's diary by Shavit Cohen 44
1
2
ng-repeat vs *ngFor
Markup

45. angular 2 - a traveler's diary by Shavit Cohen 45
1
2
ng-show vs [hidden]
Markup

46. angular 2 - a traveler's diary by Shavit Cohen 46
2
Using [Element DOM attribute]
Markup

47. angular 2 - a traveler's diary by Shavit Cohen 47
1
2
ng-class vs [ngClass]
Markup

48. angular 2 - a traveler's diary by Shavit Cohen 48
1
2
ng-[event] vs (event)
Markup

49. angular 2 - a traveler's diary by Shavit Cohen 49
2
ng-[event] vs (event)
Markup

50. angular 2 - a traveler's diary by Shavit Cohen 50
1
2
2 Direction Binding
Markup

51. angular 2 - a traveler's diary by Shavit Cohen 51
2
Bootstrapping

52. angular 2 - a traveler's diary by Shavit Cohen 52
1
2
App bootstrapping
Markup
myApp.cmp.ts
main.cmp.ts

53. angular 2 - a traveler's diary by Shavit Cohen
Summarizing - main changes
• Markup:
▪ “Directive” oriented markup.
▪ The use of # (for local template variable).
▪ The use of * when items are being added / removed from the DOM.
▪ The binding are different [DOM property / directive], (event),
[(ngModel)]
53

54. angular 2 - a traveler's diary by Shavit Cohen
Summarizing - main changes
• Code
▪ Unidirectional data-flow approach
▪ Everything is a class
▪ Dependency injection via the constructor
54

55. Back to me

56. angular 2 - a traveler's diary by Shavit Cohen
I Learned 3 major things
Angular 1 !== Angular 2
56
Coding with TypeScript can be fun and reduce bugs
Visual Studio Code is a kick ass IDE

57. angular 2 - a traveler's diary by Shavit Cohen
Now this is how Angular 2 feels like
Frustration
level
Time
It plays well with 3rd
party libraries
It not So bad
Ok, I got it but I don’t like it!
WTF is this syntax
OMG, I hate
TypeScript! Why is the development so slow?
What are these bindings attributes? is this a
valid HTML ?
The router concept is nice
No more $apply
OMG, I love
TypeScript!

58. Practical Tips
Code Comparison
The Syntax
Me & Angular :)

59. angular 2 - a traveler's diary by Shavit Cohen
Dive in - Build a small app from scratch
59angular 2 - a traveler's diary by Shavit Cohen

60. angular 2 - a traveler's diary by Shavit Cohen
Avoid Copy & Paste
Really,
Avoid it. Type everything (which
is new to you) yourself, it will
help you feel comfortable
faster.
60angular 2 - a traveler's diary by Shavit Cohen

61. angular 2 - a traveler's diary by Shavit Cohen 61
Know The DOM
angular 2 - a traveler's diary by Shavit Cohen
Since Events and Dom attributes are being binded
Natively

62. angular 2 - a traveler's diary by Shavit Cohen 62
Use Arrow Functions
angular 2 - a traveler's diary by Shavit Cohen
In a ES2015 class you are working with this. Anonymous
functions might make you to loose the current scope.

63. angular 2 - a traveler's diary by Shavit Cohen 63angular 2 - a traveler's diary by Shavit Cohen
Embrace TypeScript

64. angular 2 - a traveler's diary by Shavit Cohen 64angular 2 - a traveler's diary by Shavit Cohen
Notice the difference

65. That’s it (almost)
65angular 2 - a traveler's diary by Shavit Cohen

66. Why now ?
66angular 2 - a traveler's diary by Shavit Cohen
2

67. Thanks.

68. angular 2 - a traveler's diary by Shavit Cohen
Sources
Thinking in Angular 2.0
Angular 2 documentation
Change Detection Reinvented Victor Savkin
PluralSight Course by John Papa - Angular 2.0 First Look
Get 6 months of PluralSight for free
68