Angular Tutorial List - Angular University

In this post, we are going to summarize in a single place the content of all the tutorials currently available at the Angular University. We will give for each one:

  • a high-level overview of the main learning objectives of the tutorial
  • who would benefit from taking it
  • the main points of the table of contents

This list will be kept up-to-date over time as more tutorials are released, currently, all the learning material is updated to the latest release.

Note that the code for all the tutorials can be found at the Github page of the Angular University, and each tutorial has several free lessons available.

The beginners tutorial that we will present first is free, the Complete Typescript Course is right next.

Angular Tutorial For Beginners

The Angular Tutorial for Beginners is an over 2 hours free course that is aimed at getting a complete beginner in Angular comfortable with the main notions of the core parts of the framework:


Angular For Beginners

The course covers the following topics:

  • Setting up an initial development environment that ensures that the beginners have a stable development experience: save and refresh just works!
  • Build you first application
  • Build your first component
  • Component Composition
  • Component @Input and @Output
  • Component Templates and Styles
  • Write your first directive
  • Angular Core Directives: ngFor, ngStyle, ngClass and ngIf
  • Components vs Directives: When to use each
  • Template Syntax: Properties, Interpolation and Events
  • Introduction to Pipes
  • Debugging Angular
  • Introduction to Services, @Injectable
  • Introduction to the Angular HTTP Module
  • Doing your first HTTP requests
  • HTTP error handling
  • Setup a Development REST API with Express
  • Angular Modularity and @NgModule
  • Commonly used Typescript features
  • Setting up a project using the Angular CLI

Exercises

There are 3 exercises and their solutions (in separate videos):

  • Introduction to Components Exercise: Implementing a color picker component
  • Introduction to Directives Exercise: Implementing a collapsible directive
  • Introduction to Services Exercise: implementing the delete functionality of a REST API

The goal of the tutorial is to explain the most commonly used features and the main concepts of the framework, as these are the features that we will be using most of the time.

By explaining first what we will be using the most often, we can give a beginner a quick course that will allow him to already do a lot of things: build components, directives, and pipes and have them interact in different ways. Build services and use the HTTP module, and know how to debug Angular.

The Complete Typescript 2 Course

The goal of this course is to learn the Typescript language both in-depth and in a very practical way: We will learn the Typescript 2 Language, and then use it to build a REST API and query it via an Angular Client. This course covers a complete introduction to Typescript 2, focusing on Functional Programming and Fullstack Development:


The Complete Typescript 2 Course

The course structure is the following:

  • we will setup the Webstorm IDE step by step
  • then we will start introducing Typescript simply as a better Javascript
  • we will demo many of the ES6 features that we can use already today
  • Then we will do a deep dive in the type system
  • specifically in the features supported by Typescript 2 !
  • we will then start writing our REST API from scratch and enhance it step by step
  • We will learn best practices for building our backend in a functional way and on how to build APIs with Express
  • We will discuss aspects like API security and error handling
  • Sequelize is our ORM of choice we will show how to query a database
  • we will compose our program into small reusable functions and use them to compose promise chains to handle API requests
  • we will introduce Object Oriented Programming, Generics and Decorators
  • we will go back to out program and we will enhance by further adding custom types - We will then build a small frontend in Angular using the Angular CLI to query the API and display a list of lessons
  • We will do so by sharing some code between backend and frontend

What you will end up with does not seem like much, but it's what the industry has been looking for for a very long time: a type safe program built full stack using only one language, based on functional programming principles and sharing some code between the backend and the frontend.

I'm pretty sure you will have lots of fun taking this course!

Angular RxJs Jumpstart

The Angular HTTP module is based on the RxJs Observables module, meaning that the calls that we make to the HTTP service return Observables.

The goal of the Angular RxJs Jumpstart tutorial is to learn how to use the RxJs-based HTTP module effectively, by doing an introduction on functional reactive programming and demonstrating the most common RxJs operators that we will be using to handle HTTP calls.

So the goal is not so much to give an extensive introduction to RxJs and cover all operators because in practice we will only be using a small subset.

The goal is then to introduce the RxJs core principles, identify that subset of most frequently used operators and immediately apply them to the Angular HTTP module, using it to build the Service layer of our application. Here is the tutorial:


Angular Services and HTTP Tutorial

This tutorial covers the following topics:

  • What is an Observable? Introduction to Streams and RxJs Observables
  • Observables Error Handling and Completion
  • How does Angular HTTP use Observables?
  • How to use Observables and HTTP to build a Service Layer
  • Introduction to Functional Reactive Programming
  • Using the Async Pipe - Pitfalls to Avoid, more about common RxJs pitfalls here
  • Observable Composition
  • Avoid the Biggest Pitfall of Angular HTTP
  • How to do multiple HTTP requests
  • How to do two HTTP Requests in Parallel
  • How to setup an HTTP request sequence
  • Retry HTTP requests in Error
  • How to Cancel an HTTP Request

Exercise

The course exercise consists on improving a search service that we developed during the course and then build a Typeahead component.

Angular Forms

It might look simple at first glance, but there is a lot to building a complex HTML Form, especially if it's the kind of form for creating complex business data, spanning multiple tabs and edit dialog screens and with subtle interdependencies between multiple parts of the form.

Getting the validation aspect of a large form right is something that would benefit a lot from using a form development framework. Forms can really be some of the most complex user interfaces that a developer might have to implement!

The Angular Forms Tutorial covers two main ways that we have for building forms: Template Driven and Model Driven or Reactive Forms:


Angular Forms Course

The tutorial covers the following topics:

  • Angular Template Driven Forms
  • NgModel and two-way data binding
  • Form CSS State Classes with NgModel
  • Standard Form Validators
  • UnderstandingForm Exports
  • Displaying Form Field Validation Error Messages with NgModel
  • Control Groups with ngModelGroup - Validation, And Binding
  • Angular Reactive or Model Driven Forms
  • Form Validation in Model Driven Forms
  • Building Reactive or Model Driven Forms using the FormBuilder
  • Reactive Forms with RxJs
  • Model Driven Forms - Mark Fields in Error
  • Model Driven Forms - The formControl Directive
  • Model Driven Form Custom Validator
  • Template Driven Form Custom Validator
  • How to Set a Form Value and Reset a Form
  • When To Use Template Driven Vs Model Driven Forms, and Why?

Exercise

As an exercise, we are going to build a signup form using a little bit of both template driven and model driven form techniques. The goal is to understand how under the hood both techniques work the same way.

Angular Router

Single Page Applications have been around for a while, and they are the usual preferred choice for building authenticated dashboards and enterprise applications and helping us build single page applications is the main task of the Angular router.

The router allows us to define what application-level components should be displayed depending on the URL, so it sort of helps us define the skeleton or the main structure of our application.

The Angular router is also made to enable a better application performance in general by making it simple to lazy-load parts of the application only when it's needed. This makes the initial application load time faster which really improves the user experience, especially on mobile.

For covering these several aspects the router we have created the Angular Router Tutorial:


Angular Router Course

The tutorial covers the following topics:

  • What is a Single Page Application?
  • Angular Router Setup
  • Navigate Between Routes - Using the routerLink Directive
  • Configuring a Home Route and Fallback Route
  • Styling Active Routes With routerLinkActive And routerLinkActiveOptions
  • Child Routes - How To Setup a Master-Detail Route
  • Programmatic Router Navigation via the Router API
  • Master-Detail Navigation And Route Parameters
  • The Route Parameters Observable
  • Optional Route Query Parameters
  • CanDeactivate Route Guard
  • CanActivate Route Guard
  • Configure Auxiliary Routes in the Angular Router
  • Auxiliary Routes - How To Pass Router Parameters
  • Router Redirects and Path Matching - Avoid Common Routing Pitfall
  • Router Hash Location Strategy vs HTML5 Location Strategy
  • Router Lazy Loading and Shared Modules - How to Lazy-Load a Module
  • Shared Modules And Lazy Loading - How to Setup Shared Services

Exercise

In the end of the course, we are going to build a small application dashboard by using auxiliary routes.

Angular and Firebase - Build a Web Application

In the previous tutorials we have been covering aspects of the Angular framework in particular, but we have not covered the topic of how to tie everything together and build an application from A to Z.

In order for building a complete application, we need to choose something for the persistence layer and for the backend. And a great backend for complementing Angular is the Firebase Backend as a Service solution, also from Google!

The two technologies are perfectly linked together by both the Firebase client SDK and the AngularFire library.

So what better choice for tying all the concepts together than to take Angular, it's Router and Forms Module, use AngularFire and Firebase and build a complete application from top to bottom?

That is exactly the goal of the Angular and Firebase - Build a Web Application:


Angular and Firebase - Build a Web Application

Note that we are going to see how we can do a lot of our development in a backendless way (Firebase being the backend), by using the out of the box backend-building capabilities of Firebase.

But we are also going to cover how to build custom backends, also using AngularFire and the Firebase SDK, as these two libraries are universal (or isomorphic), and they work both on the (Node) backend and on the frontend.

The tutorial covers the following topics:

  • Installing Node and the Angular and Firebase Demo Application
  • Application Scaffolding using the Angular CLI
  • Installing the Starter Kit
  • Firebase Real-Time Database Hello World
  • Firebase Fundamentals - References, Snapshots and Keys
  • Use Firebase SDK with Typescript
  • Firebase Data Modeling 101
  • How to use the Firebase Push Keys?
  • Does Firebase Support Arrays?
  • AngularFire 2 Hello World
  • AngularFire 2 Object List and Object Observables, modifying data
  • Starting the Application - Build the Home Screen
  • Building our First Firebase Service
  • Smart Components vs Presentation Components
  • Client-Side Search
  • Setting Up the Router
  • Building a Navigation Menu
  • Master Detail Scenario
  • Joins in Firebase
  • How to Write Maintainable RxJs Code?
  • Build a Data Creation Form
  • Build an Edit Data Form
  • The Router Resolve Functionality
  • Setup Firebase Authentication, Create a Login Page
  • Build a User Registration Page
  • Setup the Logout Functionality
  • Redirect User To Login Page Using a Router Guard
  • REST and Firebase - Using the Firebase REST API
  • Protect Write Access Using Security Rules
  • Build a Custom Node Backend Using Firebase Queue

Exercise

This tutorial is made to be followed by building the application as we present the multiple concepts involved, so the whole tutorial is itself one big exercise.

Having said that the lessons will still make perfect sense if we watch them sequentially without building the program as we go along, and have a good learning pace that matches well the two viewing scenarios.

RxJs and Reactive Patterns Angular Architecture Course

In our mailing lists, we ask developers what is their main difficulty while learning Angular. The very frequent answer that we get is RxJs and Reactive Programming.

And even more so, a question we get is how to use RxJs to build applications in Angular? So in order to help tackle this issue we have prepared a course that introduces RxJs from a different point of view:

We have introduced RxJs not as an alternative to Promises but as a set of application design patterns.

We believe RxJs is best approached as an implementation of the Observable pattern, and by learning the pattern first and its use cases we will understand the library and its operators much better.

Then based on the Observable pattern we will introduce the RxJs library and will use it to implement a catalog of application design patterns for building Applications in Angular in Reactive Style:

RxJs and Reactive Patterns Angular Architecture Course:

RxJs and Reactive Patterns Angular Architecture Course

Angular Ngrx Reactive Extensions Architecture Course

In this course we are going to do a guided tour on the Ngrx Reactive Extensions library ecosystem. This is an architecture course, so its recommended to first take the Angular For Beginners and the Typescript course to take the most out of it.

In this course, we are going to build step by step a chat application that reproduces the situation that the Facebook team faced with the unread messages counter. We are going to solve the problem not by using the original Flux dispatcher, instead we are going to use a derived single store RxJs-based solution: The Angular Reactive Extensions Ngrx Store.

We are going to build the application using Reactive Programming principles and a set of libraries of the Angular Reactives Extensions (Ngrx) Ecosystem: this will include the Ngrx Store, Ngrx Effects, Router integration, Immutability and OnPush Change Detection.

We are going to cover the benefits of Immutability and OnPush change detection, its advantages and disadvantages.

That main goal of the Angular Ngrx Reactive Extensions Architecture Course is to present store architectures and their advantages, and show how the Ngrx library ecosystem can be used to build an application from A to Z:


Angular Ngrx Reactive Extensions Architecture Course

Angular Advanced Library Laboratory: Build Your Own Library

In this course, we are going to dive deeper into the Angular framework, by learning the most advanced aspects of Angular Core.


Angular Advanced Library Laboratory: Build Your Own Library

This course will cover the following topics:

  • how to create an AOT compatible library in the Angular Package Format
  • how to define a library module
  • how to isolate the styles of a component but still make them customizable
  • how to design components and directives to make them easier to maintain, making them customizable while at the same time giving the components great default behavior.

We will cover all of the more advanced features of Angular, including Component API Design, Component Styling best practices, Templates and Template Outlets, ng-content, ng-container, style isolation and customization, AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren, Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components, directives, handling keyboard events, testing, animations and more (this is a non-extensive list).

But more than presenting the features in isolation, we will use them in real use cases which will make the features much easier to learn, by building a series of small open source libraries:

  • A Font Awesome Input Component
  • A Tab Container, with a configurable input template
  • A reusable Dynamic Modal
  • An Input mask directive
  • A Payment Modal Widget

Angular Security MasterClass - Web Security Fundamentals

With this course, you will have a rock-solid foundation on Web Application Security Fundamentals, and you will have gained the practical experience of applying those concepts by defending an application from a series of security attacks. You will have done so by actually performing many of the attacks!


Angular Security MasterClass - Web Security Fundamentals

With this course, you will be familiar with the following security vulnerabilities: Dictionary attacks, Cross-site Scripting or XSS attacks, identity token highjacking techniques, the browser same-origin policy, how to combine cookies with JWTs and why, Cross-Site Request Forgery or CSRF, common design vulnerabilities, and more.

You will know common practical solutions for securing both enterprise and public internet applications, such as how to use JWT to delegate authentication to a centralized service, which could be Auth0 or a in-house developed service that follows similar principles.

I hope you enjoyed the post, I invite you to have a look at the list below for other similar posts and resources on Angular.

I invite you to subscribe to our newsletter to get notified when more posts like this come out:

Video Lessons Available on YouTube

Have a look at the Angular University Youtube channel, we publish about 25% to a third of our video tutorials there, new videos are published all the time.

Subscribe to get new video tutorials:

Other posts on Angular

If you enjoyed this post, have also a look also at other popular posts that you might find interesting: