Course Introduction

Introduction to Build a Modern Angular Application with Signals

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Next LessonProject Architecture

Lesson Transcript

  • [00:00 - 00:05] Hello everyone, welcome to build a modern angular application with signals. I'm going to be your author for this course.

  • [00:06 - 00:10] My name is Deji Adesoga. I'm a front-end engineer at Enterfive Inc.

  • [00:11 - 00:18] I have five years of industry experience working with JavaScript technologies. I'm a course author at educative.io.

  • [00:19 - 00:26] Earlier this year in partnership with educative.io, I created a MEAN Stack course. I also write programming articles for the web.

  • [00:27 - 00:41] I've written articles for publications such as freecodecamp, Dev.2, DZone and a lot more which I can't actually remember for now. You can also find me on youtube at youtube.com/thecodeangle.

  • [00:42 - 01:01] Over on youtube, you find me creating tutorials on JavaScript technologies such as Angular, React, VueJS, NodeJS and including vanilla JavaScript. Recently, I asked the question in one of the Angular communities I belong to if anyone has started using signals in their Angular project.

  • [01:02 - 01:15] The answer I got was a staggering 83% saying no while only 16% of the Angular developers who took part in this vote said yes. This now brings about the next question, why do we need signals?

  • [01:16 - 01:23] So the first point I'd like to highlight here is the steep learning curve. This is the introduction of Angular in 2016.

  • [01:24 - 01:44] Observables and RxJS have been the major way of managing states and sharing data in an Angular application. Despite Observables and RxJS having huge capabilities and a well crafted design pattern, these technologies have made the learning curve required for understanding Angular a steep one.

  • [01:45 - 01:54] So much so that it is admitted as a fact on the RxJS website. Another point I'd like to highlight is performance, bundle size and productivity.

  • [01:55 - 02:17] Before signals came into play, Angular relies heavily on a library called zone.js to detect any changes that occurs in an Angular application. What this means in essence is that, for every minor change that occurs in an Angular project, the zone.js library would need to execute the changes throughout the entire component tree of the project.

  • [02:18 - 02:42] Which brings a negative effect on the overall performance of the Angular application and also makes the bundle size of the application to be bloated. The combination of these two effects would lead to reduced productivity as the bigger an application gets, the more time it requires to compile the application which eventually leads to reduced productivity.

  • [02:43 - 03:18] With the introduction of signals in Angular, we can now build a complete zone less application that does not rely on the zone.js library to detect change which significantly improves the overall performance of an Angular application as well as reducing the bundle size of an Angular application due to the fact that we can now go completely zoneless. Having said all this, the overall objective of this course is to go through 5 intense modules where we are going to make use of signals to manage the entire state of our Angular application.

  • [03:19 - 03:49] From declaring variables to utilizing the various APIs available in signals, we will get to witness the reactivity of signals without the use of any third party libraries to spread data across our Angular application. In addition to this, we will also utilize the newly introduced concepts in Angular like the deferrable views, the newly built-in control flows which includes the @for and the @if blocks would also make use of standalone components as well as lazy loaded routes.

  • [03:50 - 04:13] By the end of this course, we would have put together all these concepts to build a shopping cart application moreover, you would also have gotten enough knowledge and confidence to also upgrade your Angular application to the latest version and integrate signals seamlessly into your project. I guess you might have been wondering what are the needed prerequisites for you to take this course.

  • [04:14 - 04:33] For you to take this course, you need to have a prior understanding of JavaScript and TypeScript is necessary. You'd also need to be familiar with RxJS and Observables because at some point in the course, we are going to try to convert Observables to signals and also you need to have an intermediate experience working with Angular.

  • [04:34 - 04:43] If you are able to meet this prerequisites, then you should not have any problem following along with this course. And with that, let's get started with this course.

Hello everyone, welcome to build a modern angular application with signals. I'm going to be your author for this course. My name is Deji Adesoga. I'm a front-end engineer at Enterfive Inc. I have five years of industry experience working with JavaScript technologies. I'm a course author at educative.io. Earlier this year in partnership with educative.io, I created a MEAN Stack course. I also write programming articles for the web. I've written articles for publications such as freecodecamp, Dev.2, DZone and a lot more which I can't actually remember for now. You can also find me on youtube at youtube.com/thecodeangle. Over on youtube, you find me creating tutorials on JavaScript technologies such as Angular, React, VueJS, NodeJS and including vanilla JavaScript. Recently, I asked the question in one of the Angular communities I belong to if anyone has started using signals in their Angular project. The answer I got was a staggering 83% saying no while only 16% of the Angular developers who took part in this vote said yes. This now brings about the next question, why do we need signals? So the first point I'd like to highlight here is the steep learning curve. This is the introduction of Angular in 2016. Observables and RxJS have been the major way of managing states and sharing data in an Angular application. Despite Observables and RxJS having huge capabilities and a well crafted design pattern, these technologies have made the learning curve required for understanding Angular a steep one. So much so that it is admitted as a fact on the RxJS website. Another point I'd like to highlight is performance, bundle size and productivity. Before signals came into play, Angular relies heavily on a library called zone.js to detect any changes that occurs in an Angular application. What this means in essence is that, for every minor change that occurs in an Angular project, the zone.js library would need to execute the changes throughout the entire component tree of the project. Which brings a negative effect on the overall performance of the Angular application and also makes the bundle size of the application to be bloated. The combination of these two effects would lead to reduced productivity as the bigger an application gets, the more time it requires to compile the application which eventually leads to reduced productivity. With the introduction of signals in Angular, we can now build a complete zone less application that does not rely on the zone.js library to detect change which significantly improves the overall performance of an Angular application as well as reducing the bundle size of an Angular application due to the fact that we can now go completely zoneless. Having said all this, the overall objective of this course is to go through 5 intense modules where we are going to make use of signals to manage the entire state of our Angular application. From declaring variables to utilizing the various APIs available in signals, we will get to witness the reactivity of signals without the use of any third party libraries to spread data across our Angular application. In addition to this, we will also utilize the newly introduced concepts in Angular like the deferrable views, the newly built-in control flows which includes the @for and the @if blocks would also make use of standalone components as well as lazy loaded routes. By the end of this course, we would have put together all these concepts to build a shopping cart application moreover, you would also have gotten enough knowledge and confidence to also upgrade your Angular application to the latest version and integrate signals seamlessly into your project. I guess you might have been wondering what are the needed prerequisites for you to take this course. For you to take this course, you need to have a prior understanding of JavaScript and TypeScript is necessary. You'd also need to be familiar with RxJS and Observables because at some point in the course, we are going to try to convert Observables to signals and also you need to have an intermediate experience working with Angular. If you are able to meet this prerequisites, then you should not have any problem following along with this course. And with that, let's get started with this course.