This is my first post in angular 2.0 and I’m moving forward with latest technology like angular 2.0. Although I love to coding with angular 1.x.
I read a lot of blogs and gather much more information about angular2 and I want to share all my knowledge migrating from angular1.x to angular2.0.
We already know about angular 1.x, It’s a core framework in many big companies and into angular 2.0 is a great powerful web framework that has no existing great powerful applications yet.
I want to describe the big picture of angular 2.0. How you can write apps with it and how your angular 1.x skills translate to it.
How to write Angular 2.0
We can use ES5, ES2015 or TypeScript to write angular2.0.
Why we learn Angular2.0
- Angular2+ faster than angular1.x as realized with modern web standard practices.
- It’s powerful, angular2.0 is a structural open source javascript framework for dynamic web apps.
- It’s write clean code structure and It’s maintain less angular construct. For one example, angular2 templating syntax alone the remove less important feature of angular1.x.
- Written angular2 is very easy than angular1.x.
What’s new and what’s different in Angular2
Angular2.0 is a component based UI. If we compare with it angular1.x then the most important concepts of angular1.x is controller and we can compare its with components in angular2.0.
Angular1.x controller or directive convert it into the new angular2 component. So, In angular2 there is no controller and directive.
Let’s convert a simple controller in angular1.x to it’s component into angular2.0.
In Angular1.x,
https://gist.github.com/tithi021/104087d01c25f48592ffb558eb4a13ef
Controller,
https://gist.github.com/tithi021/0a9e71b37053c68d0ba8ed8fc9d3d459
In Angular 2.0, In angular2.0 is something very similar with angular 1.x, let’s see,
HTML code,
<my-story></my-story>
Create component,
https://gist.github.com/tithi021/e287c968c475780bc64a0b5fcdd7637a
The following example used typescript It’s a superset of the ES6 javascript standards. It’s defining a class called MyStory that equal to name of controller of angular1.x. And the decorator @Component describing the template that showing the HTML tag h3 and the name of selector contain the html element is my-story. So, we can used this component like just <my-story></my-story> into html page.I think, It’s similar with angular1.x directive.
So, this post is just focused on introducing part of Angular (v2). Here I try to cover all the part of angular2.0 for migrating from angular1.x.
Good Day 🙂