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.

AngularJS 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 AngularJS 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, 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.

Additionally, if you don't know AngularJS, there's no need to worry. The materials selected won't assume that you are an AngularJS developer and no prior experience is required to get up an running with Angular.

Framework changes

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

Curly braces now denote a one-way binding

If you recall, this is the equivalent of using ng-bind in AngularJS. In Angular 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 has embraced.

The example below demonstrates the change between AngularJS and Angular:

<!-- Two way binding -->
<!-- AngularJS -->
<div>{{ message }}</div>
<!-- Angular -->
<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 AngularJS, 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.

For example, before using the ngModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule's imports list. Learn more about the FormsModule and ngModel in the Forms guide.

import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

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, 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.

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

// Connect the component to our view
bootstrap(AppComponent);

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 we 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 Angular team has constructed this amazing tutorial detailing all of the major changes seen in Angular from AngularJS. We definitely recommend checking out the link below.

AngularJS to Angular Quick Reference

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