Understanding The Differences Between Angular 1 and 2

Angular 2 has changed many APIs from 1.x, but the JS community at large has also contributed important innovations necessary for developing Angular 2 apps.

Eric Simons Up to date (Mar '17) Angular 2

The Javascript world has moved insanely fast the past few years. There is so much innovation, but it has come at a cost: developer convenience. It's just harder to get up and running now, but once you are up and running, your life is amazing.

Angular 1 was built in a time where web technologies (Javascript, HTML, etc) were just starting to gain critical adoption and evolve. The core ideas they implemented were ahead of their time then, and now many of them have become official standards. So they had to make a choice -- do they stay with their existing architectures and attempt to port them over to the new standards, or just start from scratch building around the new standards while allowing a reasonable amount of backwards (and forwards) compatibility?

A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over, beginning with a working simple system. β€” John Gall

They ended up choosing the latter β€” and it was a good move. Some may feel differently, but the reality is that Angular 1 ended up becoming very complex, especially considering the Angular team didn't have the new JS standards to build on top of.

So what that means is that to learn Angular 2, we also need to learn about the new standards and technologies that it's built on top of. There are primarily four things that we'll need to be familiar with: ES6, TypeScript, RxJS/Observables, and build tools.

We'll be covering RxJS and build tools within this course, but if you're not familiar with ES6 and TypeScript you'll need to fill those in first.

Learn the core concepts of ES6

We recommend checking out Nicolas Bevacqua's blog posts on classes, let, const, import/export, and arrow functions

Framework changes

Before moving forward, let’s make note of a couple of key changes in Angular 2.

Curly braces now denote a one-way binding

If you recall, this is the equivalent of using ng-bind in Angular 1. In Angular 2 you're required to use parentheses inside of brackets (known as "banana in a box") for two way data binding. This change is largely due to the new unidirectional data flow that Angular 2 has embraced.

The example below demonstrates the change between Angular 1 and 2:

<!-- Two way binding -->
<!-- Angular 1 -->
<div>{{ message }}</div>
<!-- Angular 2 -->
<div [(ngModel)]="message"></div>

Woah, did you see [(ngModel)]? Is it a bird, a plane? Nope - it's a banana in a box! 🍌

Many basic directives, filters, and services do not exist until they have been imported!

In Angular 1, this was true for things like services (e.g. $http), but now we have to import basic directives like NgModel first (amongst other things). This may seem like a frustrating change, but it ultimately allows you to explicitly control the overhead of your Angular applications which is a good thing.

Goodbye ng-app, hello Bootstrap

We no longer use the ng-app attribute to connect an Angular App. Instead, we have to rely on a new technique known as Bootstrapping.

Prior to Angular 2, we could use the ng-app attribute directive to connect our angular modules to a view. This process, known as Bootstrapping, has been changed with Angular 2.

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

// Connect the component to our view

With the new bootstrapping system, we skip the process of connecting modules to views and focus on connecting a Component to a view. This makes so much more sense and I encourage you to learn more about it through the official Angular 2 QuickStart Tutorial

Controllers no longer exist

Instead we use Components to manage our views.

And more!

Thankfully, the guys over at Angular have constructed this amazing tutorial detailing all of the major changes seen in Angular 2 from Angular 1. I definitely recommend checking out the link below.

Angular 1 to 2 Quick Reference

And with that knowledge, we can now proceed to create our first "Hello, World" application with Angular 2!