Angular 2, in beta as of December 15, 2015, marks a significant rewrite with new JavaScript features emphasizing a component-based architecture that simplifies development compared to AngularJS 1.x. Components are now the primary means to define elements and logic, combining the previous concepts of directives, controllers, and scope into a unified structure. For developers transitioning from AngularJS 1.x, tools like ngUpgrade and ngForward facilitate integration with Angular 2, although there are still cautionary factors to consider due to its beta status and ongoing development.

1. Angular 2
How we got here?
Fakiolas Marios - fakiolasmarios@gmail.com / @fakiolinho

2. Where we are now with Angular 2?
As of 15th of December 2015 Angular 2 is in beta.
So it’s time to start playing with it some more!!!

3. Why a rewrite from A to Z?
❏ ES2015 and new features in JavaScript
❏ Classes (inheritance, super calls, instance and static methods, constructors)
❏ Template strings (easier strings concatenation in our templates)
❏ Modules for components definition (it follows from popular module loaders like AMD and
CommonJS)
❏ Promises (library for asynchronous programming)
❏ Upcoming Web Components standard for HTML5
❏ Custom Elements
❏ Shadow DOM
❏ HTML Imports
❏ HTML Templates
Enougn new features to realize how different things were when AngularJS 1.x was
launched right?

4. Do you remember this?

5. Welcome to the Components era!!

6. What is a component in Angular 2?
In Angular 2, Components are the main way we build and specify elements and
logic on the page.
In Angular 1, we achieved this through directives, controllers, and scope.
In Angular 2, all those concepts are combined into Components. Even our
application is a component.

7. What is a component in Angular 2?
Every component has:
❏ A selector (this is used to call it in our HTML5)
❏ A template (this is injected inside the selector’s tags)
❏ Unique styling for this template (Shadow DOM ways here but still alternatives
are used as default option)
❏ A dedicated class to apply some logic
❏ Dependencies (other components required and used by our component)

8. Let’s see our first component!!

9. What do you think?
Seems a little familiar?
Directives in Angular JS 1.x are responsible for this.
So it’s not that scary right?

10. What do you think?
The truth is that AngularJS 1.x and its directives let us create reusable pieces of
code with unique selector, dedicated template and abstracted logic some years
now way before Web Components standard was announced!!!
That’s why AngularJS 1.x is still quite a fantastic framework and upon it millions of
applications are built.
So it’s obvious that any developer quite experienced in AngularJS 1.x won’t
struggle that much to create his/her first Angular 2 components!

11. What about AngularJS 1.x right now?
For sure the ancestor framework is in a crossroad.
A lot have been said but it is not dead and won’t be for years to come.
Too many applications are built using it so there is still a great demand in
developers who have mastered its ways.
But there are even more important news….

12. AngularJS 1.5.x new features
AngularJS 1.5.x wants to help us move easily to Angular 2 so it introduced a new
type of directives the component directives:

13. AngularJS 1.5.x new features
The structure is quite similar with Angular 2 component we saw before.
It is a component with directives flavor. So since we have built thousands of
directives the transition to component directives won’t be that awkward or tough.
It is a huge step which brings us closer to components logic even in AngularJS
1.5.x

14. Can i upgrade my old AngularJS 1.x app?
The answer is sure you can. There are 2 strong tools which can help you right
away:
ngUpgrade: It lets us mix Angular 2 into our existing Angular 1 application. We'll
get to take advantage of Angular 2's improved speed and APIs immediately as we
replace components a bit at a time over the course of our releases.
ngForward: Some developers will want to avoid having both Angular 1 and Angular
2 libraries running in their app simultaneously. For this, we have the option of
ngForward which lets us write Angular 1 applications in the syntax of Angular 2.
This lets our team get used Angular 2 conventions and styles in our apps today
and shorten the distance to doing the full upgrade to Angular 2 when we feel
ready.

15. Which of the 2 should i choose?
In my opinion there are some disadvantages for moving right away in Angular 2:
❏ Still in beta
❏ Problematic documentation
❏ Community is still immature
❏ Few tools / plugins available
❏ Great focus in ES2015 / TypeScript examples etc so many developers might
struggle some more with those and not with the framework itself
❏ There are great tools available to upgrade an application to Angular 2 anytime
so this makes me feel somewhat safe

16. What do i propose?
Every one of us should become stronger with ES2015 no matter if he / she likes /
uses Angular frameworks at all.
TypeScript is an option and brings quite nice features even from upcoming ES7
but let’s become stronger with ES2015 first and then we see how it goes.
Play a lot with Angular 2 components and transform your directives to component
directives in your AngularJS 1.5.x applications.
In general prepare yourself and the applications you build for the switch as much
as possible!!