Very recently Angular 2 went into public Beta so I decided now is the time to learn how it differs, and how I could leverage this modified SPA framework.
Differences Between 1 and 2
There are several differences between Angular 1 and Angular 2. Herein I try to explain what I am most excited about in Angular 2 and how it differs from Angular 1.
TypeScript (and Annotations)
TypeScript with Angular 2 allows you to do the following:
With the decorator syntax you are able to specify meta-data about the component you are building, such as what html tag selector you wish to bind this component (think controller in angular 1) to, as well as template information and what services, or providers, you want to inject into the application.
With TypeScript you are also allowed to create classes which have constructors.
In our example above we are
UserService dependency and set that
singleton to a variable inside the class which is typed as UserService.
Components not Controllers
As shown in the previous section an angular 2 application is composed of views, a tree of components, wherein you can inject dependencies, and that is basically it.
You don’t need to use the ugly angular 1 syntax for creating controllers.
With Angular 1 you needed to touch about 4-5 files to “install” a new Controller.
Not the case with Angular 2, the below is the entirety of the
boot.ts bootstrapping code:
How easy was that, we just use the
bootstrap function, and point it at our root
App component, providing it the dependencies needed for it to run. Then in our
index.html file all we need to do is below:
App entry point is ridiculously simple:
You can see from the main app definitions that this is organized exactly as a component is organized, because angular 2 applications are a tree of components.
Also notice how Routing is done in angular 2, which I think is pretty slick. Routing is just metadata configuration with the @RouteConfig decorator.
I am very happy that I took a day to learn all about Angular 2. I honestly feel like the folks at Angular got this version right. A lot of the confusion that existed in Angular 1 was cleared up. We should remember though, Angular 1 has existed for years, and pre-dates the web standards (ES6, TypeScript) that the industry is moving towards. Honestly, I am very proud of the Angular project, specifically due to the forward thinking and willingness to not get bogged down due to the shear size of Angular 1. It is easy in my opinion to get entrenched in “I know what is right, cause I already did it” mentality.
If you are looking for a modern, simple, sensible SPA framework give Angular 2 a try.