Introduction

[00:00:00]
>> Alex Okrushko: Hello, everyone. Welcome to the Frontend Masters course on Intermediate Angular. I'm your host, Alex Okrushko, and I'm happy to have you here. By the end of this course today, you should be familiar with the signal-based modern Angular. This course is for somebody who is learning Angular and already completed the Angular fundamentals course from Frontend Masters, or you've been a seasoned Angular developer and looking to broaden your knowledge and really solidify your knowledge around the signal-based model.

[00:00:34]
So today's workshop, we have a few modules that we're going to go over. First, we're going to learn the new Angular signal-based component model. Then we'll learn how to fetch the data in a new way, and how to do mutations. Then we're going to understand more advanced routing structures and how to use functional guards. We're going to peek into the signal-based forms API that were just released at the end of November of 2025.

[00:01:10]
And finally, we'll conclude today with some more deeper dive into dependency injections, some shared services, and optimistic UI technique. So, about me, who am I? I'm Alex Okrushko. I've been in software engineering for 17+ years. I've been in many companies and led teams at companies like Google, Cisco, Snowflake. Funny enough, when I was at Google, I was also instructor, internal instructor for this new framework that at that time was called Angular 2, so I taught teams within Google as well.

[00:01:49]
I'm a core team member of NgRx, so if you've heard NgRx, love it or hate it, that's part of me. Google developer expert in Angular, and I love playing sports and do a lot of mentorships. Both of my kids are in competitive soccer, so I'm spending a lot of time with that as well. All right, so about this course. We're going to have 5 modules today for intermediate Angular, and then we'll have 5 modules for advanced as well.

[00:02:21]
All of them have multiple steps, instructions, I'll show the instructions and code snippets as part of this. So we're going to go over material for each module. All right, we'll prefer to do some hands-on coding, so I really encourage you to do this. This is the best way to learn, I feel. And we're going to do some code reviews as well. All right, and we need a few things. Basically the latest Node, Angular CLI, which will be installed, by the way, your favorite editor.

[00:02:55]
I'm going to use VS Code, so I don't get a lot of auto completions. I'm turning everything off. And the Angular Language Service plugin for VS Code, you'll need it as well. It will be automatically prompted to be installed once you install the repo as well, so don't worry too much about that. So what is Angular? In the Angular fundamentals course, Mark said that it's a web framework to build scalable web apps with confidence.

[00:03:28]
I'd like to add that it's also a great framework to build scalable and maintainable web apps. Yes, I just wanted to add clarification that that is Mark Thompson from the Angular Fundamentals. Yes, Angular, yes, Mark Thompson from the Angular Fundamentals course. That's right. Yeah, so, why maintainable? At the time where we're doing this recording, Angular is already at version 21, and Angular provides an amazing tool to upgrade your versions from basically version 2 all the way to 21.

[00:04:08]
They have a predictable release cycle. Every half a year, they release a major version, and upgrading that for the most part is fairly seamless and straightforward. Angular comes with all the batteries included, so you shouldn't really have a lot of other third party dependencies other than a few that I'm going to mention today in the course. So that makes an upgrade story much easier. They rely less on the third party libraries to follow along.

[00:04:41]
So that makes it scalable and maintainable, and Angular has been doing a lot of changes recently. We called it Angular renaissance. They introduced a signal-based reactivity system into the framework. And this fuels a lot of new innovation within Angular, which makes it simpler and easier to understand, lessens the learning curve, and makes things more predictable. We're going to be using today version 21.0.3.

[00:05:16]
This is the latest version as of the time of recording. OK, so now you have the link for the project. It's a D Fest manager. What I suggest is to create a new fork first for the project, so you fork off my repo. And make sure you uncheck the checkbox that says copy the main branch only when you do the fork. The reason for that is because we have tags for each of the milestone throughout the intermediate and advanced courses.

[00:05:52]
And we're going to be working with the same repository through both of these courses. This will allow easier navigation and check out for different milestones. So once you do the fork, you can clone your fork. If you don't want to do the fork, you can always just clone my repository. The disadvantage is that you won't be able to push your commits in there, but you can always just work it off and have it locally as well, if that's a little bit easier for you.

[00:06:33]
So once you clone the repo and fork your own clone, and clone, yes, you get it locally, so we need to check out D1_M1. D1 stands for intermediate Angular, which is basically day one, and then M1 is for module one, right? So we want to start at the starting point. Over the two courses, we'll be building the application up and ideally you won't even be checking out any other branches if you're following along.

[00:07:06]
If you do fall behind, don't worry, you can always check out the next milestone. Then we need to do the npm installation. We will use the force flag. The reason we use the force flag is because Angular is already in 21, and again it was just released recently, but we have one dependency which is NgRx that we're going to use in advanced course. And that one is still at version 20 so we want to force check it out, OK, so this should be no problem.

[00:07:44]
And to run the application, use the npm run dev that should get your frontend and backend running. So, once you have it running, you can see your application at localhost 4200. This is the standard default port for running any application.