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 Angular 2 Final 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 2 Tutorial For Beginners
The Angular 2 Tutorial for Beginners is an over 2 hours free course that is aimed at getting a complete beginner in Angular 2 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 2 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 2
- Introduction to Services, @Injectable
- Introduction to the Angular 2 HTTP Module
- Doing your first HTTP requests
- HTTP error handling
- Setup a Development REST API with Express
- Angular 2 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 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 2.
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 2 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 featuresthat 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 2 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 its 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 2 RxJs Jumpstart
The Angular 2 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 2 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 2 HTTP module, using it to build the Service layer of our application. Here is the 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 2 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 2 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
The course exercise consists on improving a search service that we developed during the course and then build a Typeahead component.
Angular 2 Forms
It might look simple at first glance, but there is a lot to building a complex HTML Form, especially if its the kind of form for creating complex business data, spanning multiple tabs and edit dialog screens and with subtle inter-dependencies 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 2 Forms Tutorial covers two main ways that we have for building forms: Template Driven and Model Driven or Reactive Forms:
The tutorial covers the following topics:
- Angular 2 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 2 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 model driven form techniques. The goal is to understand how under the hood both techniques work the same way.
Angular 2 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 2 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 2 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 its 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:
The tutorial covers the following topics:
- What is a Single Page Application ?
- Angular 2 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 2 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 2 and Firebase - Build a Web Application
In the previous tutorials we have been covering aspects of the Angular 2 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 2 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 2, its 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 2 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 2 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 a 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 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 it 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.
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:
More Tutorials Coming Soon
More tutorials are coming soon, this page is kept updated with the latest learning material available.
I invite to have a look at this page from time to time, or alternatively subscribe to our newsletter to keep up to date with the latest Angular 2 news and know when new tutorials are available:
Please let me know in the comments below, what kind of Angular 2 Tutorials are you looking for ?
Other posts on Angular 2
Have a look at some popular posts on my blog that you might find interesting:
- Angular 2 Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
- Angular 2 Router - Extended Guided Tour, Avoid Common Pitfalls
- Angular 2 Components - The Fundamentals
- How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular 2 Forms - Template Driven vs Model Driven
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular 2
- How does Angular 2 Change Detection Really Work ?