Project Tour

[00:00:00]
>> Alex Okrushko: So let's see the folder structure. What do we have here in the folder structure? First, we're going to look at the package.json. This is the standard for any project, so there should be no surprises here. As you can see, most of the dependencies we have here are all Angular, and I also added Next for the advanced course here as well. We still have the RxJS dependency, and I'm going to show a little bit of that as well.

[00:00:31]
Finally, what is interesting here, we have the JSON server dependency. If you are familiar with this or you've never used this, JSON server allows us to serve almost like a fake backend for our application. For example, in the scripts here, we have the server start, and it's using the JSON server to watch this db.json file right here, and it will start serving it at port 3000 with a 2-second delay for the APIs.

[00:01:12]
Again, if we look at this file, this is just a JSON file, but JSON server is a really cool application that can analyze the JSON file and create the endpoints, API endpoints based on the data that we have. For example, we have events here, and this is events data, right, and we have tickets here. And if we stop it and we'll start just the server, so the command for this will be also right here, start, right, server.

[00:01:53]
Npm run server. Right, you can see that it started and it created two endpoints for us, the events and the tickets. Right, so we have those two endpoints, and they support full CRUD operations, so you can add things, read things, read individual things from this. It's really helpful. So obviously this application is, some of the examples are a little bit contrived, so it's not like full-blown production-ready application.

[00:02:31]
The point is to learn certain things, certain techniques, and some APIs and some approaches as well. Okay, so that's package.json, and this is the db.json. This application will be using Tailwind as well. So Angular fully supports Tailwind, and it's one of the probably most popular ways to style this. You can still style with CSS or Sass as well. You can do that. Tailwind is really popular, and Frontend Masters actually has a very nice course on Tailwind as well.

[00:03:13]
So if you want to look at that, I highly recommend this. We won't be deep diving in Tailwind today. We'll just use it minimally to have some structure. And the other important part is we have our angular.json file. This is the file that helps Angular understand how to build the project and how to serve certain things from this as well. One of the items that we're serving here, because you can see we are serving assets, so we'll look at the public folder, and it will automatically add whatever is in the public folder to something that Angular is serving as well.

[00:03:55]
Here's our public folder, and we just have images that I'll be serving as well. So this is angular.json. It uses other things. Again, the polyfills here, it instructs how we set up the testing as well. So all those things are in the angular.json file. Again, very critical. One more interesting folder here at the top level that we have is called instructions, and these are all the instructions for both courses, the Angular intermediate course and advanced Angular course as well.

[00:04:34]
They're separated by day one, day two, and you can see module one through five of both days. All right, yes, the question. Yeah, I'm just curious before we move in, what does the delay 2000, what does it really mean? Ah, that's a good question. So what does delay 2000 mean in our package.json? So we're serving this application, the backend from JSON server at port 3000.

[00:05:03]
Delayed 2000 means it's trying to simulate almost like actual APIs, so it doesn't return the response immediately, but it will delay the response by 2 seconds, so we don't have something that's, it's because it's running locally, right? If we don't have instant responses, we're given delayed by 2 seconds. Great question. And to have that, I think that solves the problem of the setTimeout that we often have when I'm using a mock server delay.

[00:05:33]
That's right. Yes, so this is really helpful. And by the way, the command that you run, npm run dev, uses the concurrently mode. So then with concurrently, it starts our backend, our server, right, the JSON server, and also starts the app itself. Right, because if you're using Angular, typically you would start with ng serve, and right now we'll just use this command to start both frontend and backend.

[00:06:06]
And again, if I start, you can see that it's starting the backend at 3000 and it's also building the application, and it's serving its localhost 4200. You can also see the chunks that it created for it. So let's quickly explore the application. This is our application, and again, if I refresh the page, that's our application, right? So we have a few, it's scaffolded already.

[00:06:35]
We'll go into the structure in a second, but it's scaffolded already for you, so we don't focus on these little things. We'll focus on the more important things, which is how to make component interaction, how to fetch data, how to pull it all together. It has three pages. The first page is the home page. We're thinking this is like an app for managing events or dev events, so DevFest Manager.

[00:07:08]
So we'll have some events here that we can view details for each one, and as you see right now, there's no data. View, like nothing's working. View details, nothing's working as well, right? Then we have the admin section, and this is where we can create new event. So this is the second page. And finally, the third page, which we cannot navigate to right now, but we can manually get to it, is, for example, event one.

[00:07:46]
This is the event details page, right? So then this is when we would click view details, we'll get to this event details page, and right now a lot of, as you can see, is the placeholders, so there's no data yet. So three pages. This is where you can buy tickets. You'll see the ticket counter here as well for specific events. There's no checkout, so again, a lot of the things here we do is to show you how the interactions are possible in the app that sort of makes sense.

[00:08:26]
So we have this app. Now let's go to the Angular app itself. What do we have here? We have styles, and again, we're just going to use Tailwind. That's the only CSS file we have. It just imports Tailwind and sets the theme. Main is we just bootstrap our application. Again, there's not many changes here. This is very much standard. And when we bootstrap the application, it uses the application config, and this application config is a top-level application config that sets up global providers for the Angular application.

[00:09:09]
For example, in this case, we're using a zone change detection. We're going to deep dive into the zones and zoneless change detection in the advanced Angular. We also set up our routing for the application with the routes, which we're going to take a look at next, with a few additional things I'm going to mention today. And we'll also provide the HTTP client. HTTP client is Angular's default HTTP client to fetch data, post data, and interact basically with the HTTP requests and with fetch.

[00:09:50]
It was historically using XHR requests, so it's using under the hood the new fetch APIs. But it's a really nice wrapper. You can use fetch directly in Angular, just like in any other JavaScript application, but HTTP client makes it more Angular-aware. This is where you can set up guards, which we'll do today. This is where I can do the interceptors and other things as well.

[00:10:20]
So it's a good wrapper that's maintained by the Angular team themselves as well. No separate packages. So in our provide router, we'll use the routes, and you can see they're right there next to us as well, this routes. These routes configure the routing for the Angular application. What they do is here we say a default path goes to the event list, so event list is basically the main page.

[00:10:57]
Then on the path we have an event, and then we provide the parameter for this route. It will go to the event details, and it will pass that event ID to event details, and we're going to see how today. And finally, we have this admin/create path, which basically will go to the create event page. And this is the catch-all. This is your 404 page. Typically right now, we'll just navigate back to the homepage if you are getting to the page that you don't know, there's no configuration for.

[00:11:41]
Okay, so that's the main setup. Now we have three more folders here, and they're split up by layout, features, and model. I'll start with the layout. This is a general components for the layout. In this case, it's a header. We're going to touch it a little bit later on, but yeah, that's just the header, the one you see here, right, reused across all of them. It's outside of our routing.

[00:12:17]
It's reused everywhere. And here I want to point out two new things and changes from, for example, Angular fundamentals course, or if you've been working with Angular for a while, there are a few changes in Angular 20 and 21 and ongoing. First is, Angular switched from module-based to basically having standalone components, so components now heavily rely on imports directly in the component.

[00:12:43]
There's no module to aggregate the imports for the components and things like that. It becomes, it's more setup, it's a little bit more boilerplate, and it was always confusing why there's Angular modules, there's JavaScript modules, there's ES modules. Like there's always like what kind of module is this? So this was the path to simplification and removing the learning curve, so now if a component is using something from outside, for example, children components or any other directives or any other services, we can provide them in the imports here.

[00:13:36]
In this case, it's using the router link for the router. That's the directive from Angular router that allows us to click on this anchor tag, and it will redirect us back to the homepage. That's this one, right? And it also has the routerLinkActive directive. This is the separate classes for when the link is active. For example, you can see events is now active, so it has special highlights, or if you click on admin, admin has special highlights and now, right?

[00:14:16]
So that's basically how router tells it, hey, you are actually active right now. All right, so the first difference between again the fundamentals is standalone: true is no longer necessary for components. It's default mode standalone, so modules are getting away from modules, and there's a migration path as well to not use modules, so standalone becomes the standard now.

[00:14:49]
That's one. And second, in the new style guide, it's recommended no longer to suffix things with the component. So if you've been working with Angular for a while, a lot of times it was like something component, event page component, those components. So I think the reason why this is happening is Angular is slowly looking to see maybe we can not even import components and use them directly in the template, but that's still upcoming in speculation.

[00:15:31]
But the idea is not to suffix components. It's just a component, just a header, right? So that's the layout. The model here is the client-side model for event itself. We have an interface for DevFest event that has ID, title, date, description, location, speakers, and image. And as you can see, it kind of closely resembles to what we have stored in the database as well.

[00:16:03]
So it's usually just to cast it to this data transfer object, DTO, something that we get from the backend, but we're using this as a client-side model as well in the application as well. Okay, so that's basically models. So then features. We split them into two features. One is related to the admin, which is the create event page. It's already scaffolded for you. There's no functionality, just some HTML.

[00:16:33]
And then we have events here as well. One thing I also want to highlight, the templates here I use directly where the components are as well. We can put templates in a separate file, and historically a lot of times it was done, but right now it's just the idea to just have everything in one file, single file components. You have your template, you can have your styles here as well, or you can use Tailwind directly, right?

[00:17:12]
That will work as well. And the idea is to have smaller components that are packaged together with that template. All right, so this is the create event page. The other page that we talked about is the event list page, and just simple scaffolding. We have this upcoming events. We have some event cards here. Event cards are children of the event list page. These are, if I click, these are these cards, right?

[00:17:45]
So these are event cards, yes. So they're children, because we're using this event card here. We have to provide it in the import as well. So we have this event card here that we import, right? If we don't, right away the language service, this part that you should install right away, it will tell you, hey, it doesn't know what it is. It's not known, and it even tells you, right, if it's an Angular component, verify that it's included in the imports of the component.

[00:18:28]
All right, so we can go in this event card itself, and just simple scaffolding, nothing much here yet. Then event details page, that's another page that we'll be working on, right? This is where we can see more description and other things, part of more details of the event. And the search bar that we're not even using yet, but we're going to use it in the future. Okay, so that's basic scaffolding of the application.

[00:18:37]
Should be pretty straightforward, but it should give us enough to learn all the new cool interactions and the signal-based modern Angular.