Welcome to the Angular 2 course

Hello and Welcome! Really, it's nice to have you! No really it is! In this course, you will be learning Angular, the popular web application framework from Google. Angular is a highly scalable, component-based framework. It's written in TypeScript, so if you use a classical language like C# or Java, you'll fit right in.

How this course is structured.

This course is in three parts, and you can probably complete it in three days if you really go for it. It's put together a little differently to the usual quickstart guides.

If you've done one of my courses before, you'll know I don't believe in teaching magic. Most Angular courses involve installing a few NPM modules, typing a few magic commands, and presto. It's like the first day at Hogwarts. I don't think this is a good way to learn, because you never actually learn how things fit together. I meet people all the time who've done the quickstart, but don't actually feel like they know it.

Part one - All the Fundamentals - No TypeScript

TypeScript is awesome, and you'll want to use it, but it can seem like magic. If we start with a big heap of tooling, it can be hard to see which parts are Angular (very little), and which parts are the tools we use to compile it. You can actually write Angular perfectly well using plain old JavaScript.

In this section we learn all the fundamentals of how an Angular app fits together. You'll learn about component-oriented architectures, data flow, and how to build reusable components that you can configure.

PArt Two -- Tooling and Testing

In this part, we look at Tooling and Testing. You'll understand what TypeScript is, and how it's built. You'll know how to take a folder full of code, and turn it into something that you can actually deploy to a server. You'll know about surrounding technologies like live-reload, sourcemaps, SASS, Node and NPM.

You'll also know how to write unit tests, so you can develop with confidence, and upgrade Angular when a new version comes out, without worrying about everything suddenly breaking.

Part three

In this final section, we'll look at client-server architectures. You'll learn about injecting services, connecting to a server, and building a single page app with routing. Everything fits together.

So What Is Angular?

Angular 2 is a component based web application framework. We create components, and nest them inside one another to create an application.

What is a component?

A component is a DOM node. At least it behaves like one. We invent brand new DOM nodes, give them behaviour, attributes, content, styling, etc.

Here is a cat component:

We might give it an attribute to tell it how to be:

We might let it fire events so that we can handle them for it:

Unfortunately the docs are hard.

As was the case for Angular 1, the official documentation was written by, and for geniuses.

This is wonderful, and also problematic. What was unfathomable in Angular 1 can now seem even more cryptic. The 5 minute quickstart includes topics such as System.js, RX.js, TypeScript, ES7 modules, annotations, and destructuring assignation. Wonderful, worthy topics, but not right for a quickstart.

In order to make a hello world we are told you need to understand ES6 Modules, the transpiler, RX.js, Node, NPM, ES6 Polyfills, Observables, the Reflect API and so on and so forth. It's hard to know what is Angular, and what is optional.

It turns out that most of it is optional, most of it is not part of Angular, but most of it is stuff that you will want to use and know about. Angular 2 is highly modular. We can choose technology to build our stack. We can leave technology out altogether.

But what about TypeScript et al?

But what about requires and TypeScript and annotations and all of that good shiney stuff. We will certainly look at it, and it is important, but it's not core Angular. The official Quickstart says that it takes "very little effort to do things properly" however if you try to learn everything all at once it is very easy to become overwhelmed with properlyness and end up doing nothing at all.

These are all good things, and we will look at them later in the course, but none of them are required to build for Angular 2. In fact, Angular 2 at it's core represents a radical simplification of Angular 1.

What is this course?

This course is not a recipe based course I aim to teach you he is not just what you must do, but why and how things work.

We will start out looking at core Angular, which at heart (you will be please to hear) is very easy. Then move on to some of the new module features, then after that he will move to TypeScript and understand how it can help us, how we can use it to make out code better, and how annotations work.

Onwards and upwards

The Angular 2 Course

Angular 2 is a brand new iteration of Angular sporting components from the ground up.

Duration: days

1.Angular 2 Foundations - Components, Templates & Data Binding

»

description:In which we use simple ES6 to compose some applications, and learn to think in terms of nested components and reactivity.

outcome: By the end of this module you'll be able to create a simple component based app that responds to events and outputs data using ES6.