In this post, we are going to summarize in a single place the content all the courses currently available at the Angular University. We will give for each one:
- a high-level overview of the main learning objectives of the course
- who would benefit from taking it
- table of contents
This list will be kept up-to-date over time as more courses are released, currently, all the learning material is updated to the latest release.
Note that the code for all the courses can be found at the Github page of the Angular University, and each course has several free lessons available.
The beginner's course that we will present first is free, the Complete Typescript Course is right next.
Angular For Beginners Course
The Angular Beginners Course 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:
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
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 course 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 course structure is the following:
- we will setup the Webstorm IDE step by step
- 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 Course
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 course 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 course:
This course 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 set up an HTTP request sequence
- Retry HTTP requests in Error
- How to Cancel an HTTP Request
The course exercise consists of improving a search service that we developed during the course and then build a Typeahead component.
Angular Forms Course
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 Course covers two main ways that we have for building forms: Template Driven and Model Driven or Reactive Forms:
The course 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?
As an exercise, we are going to build a signup form using a little bit of both template driven and reactive form techniques. The goal is to understand how under the hood both techniques work the same way.
Angular Router Course
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 Course:
The course 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
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 Course
In the previous courses, 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:
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 course 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
This course is made to be followed by building the application as we present the multiple concepts involved, so the whole course 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:
Angular Ngrx Reactive Extensions Architecture Course
In this course, we are going to do a guided tour of 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 Reactive 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 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.
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 in 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!
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 an in-house developed service that follows similar principles.
Angular Progressive Web Applications (PWA) Course
The main goal of the Angular Progressive Web Apps (PWA) Course is to teach how to build next generation Angular applications, that share many of the features so far only available to native applications:
In the first part of the course we are going dive straight into the Angular Service Worker and the built-in Angular CLI PWA support.
We are going to take as our starting point a plain Angular Application, and we are going to start adding PWA features on top of it in order to turn it into a Progressive Web Application.
We will start by adding the Angular Service Worker and have the Application Download & Installation feature up and running. We will learn all about Application Version Management and we will learn about the multiple caching strategies available for caching not only the application bundles but also the application data.
We will then add an Application Shell using the Angular CLI and Angular Universal, and make the application One-Click Installable using an App Manifest. Finally, we will add Push Notifications to the application using the Angular Service Worker, for a complete mobile-like PWA experience.
Angular Material Course
The main goal of the Angular Material Course is to give you a practical guided tour of the Angular Material library:
Developing solid form controls, containers, navigation menus and modal components on top of pure Angular still require a lot of time and effort, especially if we are looking for a consistently themed component suite with commonly needed advanced features such as for example great ergonomics, design and user experience (including animations).
The good news is that we don't have to do that anymore because together with Angular we now have available an amazing suite of Material Design components, ready to be used!
In this course, we will start first by scaffolding an Angular Material application for scratch from an empty folder, add it a theme and gesture support. Next, we will start exploring the Angular Material components starting with some navigation menu and icons.
We are then going to introduce container components such as for example Tab Containers and Material Cards, and we will show a complete example of how to use a data table with a data source, pagination, and sorting.
We will also show how to use Modals to edit some of the data in the data table, for which we will use multiple different types of form components to build an editable form: date pickers, slider, and more.
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 courses 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:
- Angular Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
- Angular Router - Extended Guided Tour, Avoid Common Pitfalls
- Angular Components - The Fundamentals
- How to build Angular apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular Forms - Template Driven vs Model Driven
- Angular ngFor - Learn all Features including trackBy, why is it not only for Arrays ?
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular
- How does Angular Change Detection Really Work ?
- Typescript 2 Type Definitions Crash Course - Types and Npm, how are they linked ? @types, Compiler Opt-In Types: When To Use Each and Why ?