Ang2

Building Real World, Production Quality Apps with Angular 2

In this tutorial series you'll learn the fundamentals of Angular 2 and how to actually use it for building real world applications.

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

Angular 2 & its prerequisite technologies like ES6, TypeScript, RxJS, and others have changed the way that dev teams both large and small build web applications.

However, the amazing solutions that Angular 2 provides does come at a cost: significant time up front to learn & master their necessary tooling and paradigms.

Starting a new application with Angular 2 is no longer as simple as slapping a script tag into your HTML file. You now have to utilize a handful of tools to make your code work: a module bundler, a transpilation system, and more.

What you will learn

While most tutorials online cover the basics of Angular, RxJS, TypeScript, and other tools individually, the purpose of this tutorial is to cover all of them in a cohesive manner. The primary focus of this course will be showing you how to rebuild the codebase of the exemplary RealWorld Angular 2 project from scratch, which was created by this tutorial's author (Eric Simons) and co-author (Ronny Ewanek).

Although this course links heavily to "A Better Way to Learn Angular 2" for filling in some of Angular 2's fundamental concepts, we also included standalone lessons in this course to complement the step-by-step instructions. The chapters in this course are prefixed with:

Learn To: for lessons on important concepts that will be required in upcoming chapters

How To: for step-by-step instructions showing how to use those concepts

As such, by the end of this tutorial series you will have a firm understanding of how to actually build web applications with Angular 2. This knowledge includes (and is not limited to):

  • Fundamental understanding of how Angular 2 works & why to use it
  • How to start a fresh Angular 2 project
  • Interacting with a live CRUD API for (C)reating, (R)eading, (U)pdating, and (D)estroying data
  • Authentication
  • Advanced routing
  • and more.

We feel that learning is best accomplished by "doing", and as such, throughout this course we will be creating a production ready Medium.com clone called "Conduit" to demonstrate & apply these learnings. You can view a live demo of the application here. Conduit is a fully featured social blogging site including:

  • Authentication with JWT
  • Profiles with images
  • Write/edit/read articles
  • Comments on articles
  • Ability to "favorite" articles
  • Ability to follow other users & have their articles show up in your feed

For your convenience, we have a hosted API that you can build your application against. We're also going to release courses for how to create the backend in either Node, Rails, or Django over the next few weeks.

Prerequisites

Throughout this course we’ll link to relevant resources to help fill potential gaps in your knowledge as well as supplementary material that can help you gain insight into the technology and its various components. However, we highly recommend that you have a firm understanding of the following before starting:

Have Node.js and npm installed on your computer

If you don't, you can follow these instructions.

Exposure to Angular and Javascript

Our Angular 1.5 + ES6 course is an excellent primer on building modern Javascript applications and shows you how to build the same exact application we're building in Angular 2 but in Angular 1.x.

If you have never created an Angular application before and have limited Javascript experience, you might want to start by going through our super beginner friendly MEAN stack tutorial first.

Angular 2's Fundamental Concepts

If you haven't explored Angular 2's core APIs yet, we recommend going through our "A Better Way to Learn Angular 2" guide.

General understanding of ES6

If you haven't heard of ES6 yet, it's basically new syntax and features for Javascript. We'll link to resources on specific aspects of it in the next tutorial, but here's a comprehensive list detailing most of ES6's features.

General understanding of TypeScript

TypeScript adds strong typing to Javascript and relies heavily on ES6. If you haven't learned about TypeScript, we recommend taking a quick peek at our "Getting Started with TypeScript" guide.

Type out all code instead of copy+pasting it

We're firm believers in actually writing code while learning a new language or framework, as it ensures you're not falling into the trap of "fake" learning.

If you have any questions, Google and Stackoverflow are your best bet

If you're unsure about something specific to this course, we have a Slack channel available to Pro members where than can ask questions and receive help in real time.

With all that said, lets get started!