Angular Universal Masterclass & FREE E-Book
4.0 (155 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,083 students enrolled

Angular Universal Masterclass & FREE E-Book

Learn Angular Universal, optimize your app Performance, SEO, Social Media
4.0 (155 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,083 students enrolled
Last updated 8/2020
English
English [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 3 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Code in Github repository with downloadable ZIP files per section
  • Learn how to use Angular Universal Effectively
  • Learn how to build an Angular Universal Express Server from scratch, from first principles
  • Learn how to Optimize an Angular Application for SEO and Social Media
  • Learn how to take an existing Angular Application and turn into a server-side rendered application
  • Learn how to use Angular Universal to pre-render certain parts of the application
  • Learn how to build an Angular Universal server using @nguniversal
  • Learn how to build a fine-grained Application Shell for delivering maximum startup performance
  • Learn how to use the Transfer API to further speed up Application startup time
  • Learn how to deploy an Angular Universal Application to Production using Firebase Hosting and Firebase Cloud Functions
Course content
Expand all 30 lectures 02:31:52
+ Introduction
7 lectures 24:26
IMPORTANT
00:14
The Typescript Jumpstart Ebook
03:27
Why Angular Universal? Performance Benefits
05:16
Why Angular Universal? Social Media Crawlers
02:14
Why Angular Universal? SEO or Search Engine Optimization
02:38
+ Build an Angular Universal Express Server
5 lectures 29:23
Scaffolding an Angular Universal Application using the Angular CLI
06:33
Angular Universal Pre-Rendering with renderModuleFactory
08:13
Angular Universal Express Server - Step by Step Implementation
07:40
Angular Universal Express Server - See it in Action
04:16
Universal Express Server - Rendering Multiple Routes
02:41
+ Angular Universal Rendering with @nguniversal
3 lectures 14:38
New Section Kickoff - NgUniversal Express Engine
01:58
Angular Universal Rendering with the nguniversal Express Engine - Part 1
07:39
Angular Universal Rendering with the nguniversal Express Engine - Part 2
05:01
+ Angular Universal SEO and Social Media Optimization
2 lectures 14:40
Angular Universal SEO - Search Engine Optimization
08:57
Angular Universal - Optimizing our page for the Twitter Crawler
05:43
+ Angular Universal Performance Optimizations - App Shell & State Transfer API
5 lectures 33:32
Angular Universal Application Shell - Design Overview
06:42
Angular Universal App Shell Implementation- Custom Structural Directives
07:18
Angular Universal Application Shell - See it in Action
04:53
The Angular Universal State Transfer API - What Problem does it Solve?
04:42
How to use the State Transfer API- Step-by-Step Implementation
09:57
+ Angular Universal Production Deployment
5 lectures 28:15
Angular Universal Production Deployment - Setting Up Firebase Hosting
05:16
Deploying an Angular Application in Single-Page Mode to Firebase Hosting
02:21
Introduction to Firebase Cloud Functions - Hello World
05:17
Angular Universal Server deployed as a Firebase Cloud Function
11:19
See The Finished Angular Universal Application in Production
04:02
+ Conclusion
3 lectures 06:57
Other Courses
02:17
Bonus Lecture
01:27
Course Conclusion and Key Takeaways
03:13
Requirements
  • Just some previous knowledge of Angular and Typescript
Description

This Course In a Nutshell

If you already know Angular, and would now like to dive deeper into the Angular ecosystem and learn Angular Server-Side Rendering, then this is the right course for you!

This course uses the Typescript language, and includes an auxiliary Ebook - The Typescript Jumpstart Ebook

In this course we are going to learn Angular Universal from first principles, by taking an existing Angular single page application and converting it into an Angular Universal Application.

We will learn how to optimize our application for initial startup performance by using a fine-grained Application Shell and the State Transfer API, and we will make the application SEO (search engine optimization) and social-media friendly.

We will then deploy it to production using Firebase Cloud Functions and Firebase Hosting and see the end result!

Course Overview

We will kick-start this course by going over in detail on the advantages of using Angular Universal in our application.

After this, we will go ahead and take an existing Angular Application and using the Angular CLI we will generate an Universal bundle that will allow us to render the application on the server side.

With the Universal bundle in place, we will introduce universal rendering by writing a command line utility that will pre-render only our application root route into plain HTML.

With this in place, we will go ahead and start writing our own Angular Universal Express Server from scratch, from first principles. This option will allow us to understand in detail how universal rendering works, and it will give us a lot of flexibility.

But if we want a ready to use Express server, we can also use @nguniversal, which we will also cover. Once we have our Angular Express application up and running, we will then make it SEO and social-media friendly.

We will then apply a couple of common performance optimizations that are commonly used in Angular Universal applications: we will implement from scratch a fine-grained Application shell, and we will also reduce the number of HTTP requests that the application does at startup time by using the State Transfer API.

We will then take our fully optimized Angular Universal application and we will deploy it in production using the Firebase ecosystem: we will host the static bundle files using Firebase Hosting, and we will deploy our universal server as a Firebase Cloud Function.

What Will you Learn In this Course?

At the end of this course, you will feel comfortable taking your existing Angular Application and turning it into a server side Angular Universal application.

You will understand the benefits of server-side rendering, and you will be able to optimize your application for both search engines and social media crawlers.

You will also know how to further optimize your universal application for performance, and you will know how to deploy it to production.

This course is available for pre-order. Have a look at the course free lessons below, and please enjoy the course!

Who this course is for:
  • Developers looking to get in-depth knowledge on Angular Universal and Angular Server-side Rendering