Getting Started with Angular 2

Giuliano Iacobelli Blocked Unblock Follow Following Jan 25, 2016

Angular 2.0 Beta has finally shipped. Even in the beta, but we can probably count on that a major portion of what we can learn by being early adopters will continue to be a part of the upcoming releases.

What is Angular 2? How is it different? Should I be upset if I took the time to learn Angular 1.x?

These are some of the questions I often hear regarding the new release of the Angular 2.0 Beta. Lets clear the air here.

What is Angular 2?

Angular 2 is the next version of the popular AngularJS framework. Some argue whether it is the same framework, and perhaps if should be considered a different one altogether.

How is it different?

It is different in a lot of ways. Syntax-wise, Angular 2 is built on TypeScript; a typed superset of JavaScript that compiles to plain JavaScript. You can use TypeScript, or ES5, ES6 and Dart. I recommend going with TypeScript as most learning, and support resources are/will be using TypeScript I assume.

Principally Angular 2 is quite similar to it’s earlier release 1.x. However 2, heavily emphasizes the concept of Web Components; which improves application maintainability, and testability. The component driven architecture as I am sure you are aware has gained a lot of ground with the last year especially. It’s important to note that 2 is a major performance boost, and was built with mobile as a first class citizen.

Should I be upset if I took the time to learn Angular 1.x?

Now this last one, I’m sure if you were around at the time of announcement you may have heard the kick-back from the community the Angular team got from the proposal of a rewrite for the next version. This was mainly because of the investment of having to rewrite whole application on the popular framework vs. being able to refactor where there were breaking changes in the code base from the major version upgrade.

But alas, the Angular team and community has provided several ways to migrate from 1.x to 2.x; such as ngUpgrade which guides you through incrementally making the upgrade, or ngForward which allows one two write Angular 2 code in an Angular 1.x application. So not to worry, you’ve got options if your codebase is committed to 1.x.

So no, I think you have little reason to be upset about the MAJOR update to the framework, although it will take more effort, the difference in performance and maintainability will far exceed the issues that haunted 1.x. And if you had experience with Angular before 2, then you will most likely have a far easier time adjusting to the new release.

The Basics

The Hello World app is the age-old way of getting started in most things development, so we will continue the tradition and build one in both Angular2 with TypeScript and the “oldie but goodie” Angular 1.x, in order to contrast their differences and give you a starting point to learning Angular 2.

Project Setup

To start, we will configure the recommend development environment, and basic setup for each version.

Angular 1