Project Tour

[00:00:00]
>> Alex Okrushko: let me just go over the structure of this project. In package.json, we have those scripts. I'm going to be using them extensively today. And we also have, as you can see, all the Angular dependencies, most of them 20.0.0.3. We also have a few Next dependencies that we're going to be using today. We have the JSON server for our backend. This is again a great library to help us have a backend service that has all the CRUD operations, and all it does is it looks at the JSON DB db.json file and serves it on port 3000 with a delay of 2 seconds.

[00:00:52]
So that means each API request will have a 2-second delay. We can look at db.json again. Our events, we have these events here, so the events will be one of the resources that they'll be serving. We already have some data, so JSON server looks at the structure of the JSON file and creates endpoints for this that could be used for any CRUD operations, so you can read, create, delete, update.

[00:01:26]
Yes, and if we serve it, you can see the command here for the server is server, so we can do npm run server. You can see that it picked up that we have events and we have tickets, and it exposes those endpoints for us. We also have, and the way we start our Angular application is typically with ng serve. So when we do the ng run dev, we can currently start our server and our frontend.

[00:02:07]
So this is our structure here. We are going to be using also Tailwind in this application. This is one of our application dependencies as well. Here it is. All right, so other notable things, again, angular.json file is critical. This is how Angular structures and builds projects. We can see some of the dependencies as well. We can see that it also exposes the assets here.

[00:02:40]
Assets are coming from the public folder, and if we quickly take a look at it, we have images that it'll be serving as part of the application as well. We have also here the polyfill for the zone.js. This will become critical in the first milestone today. So we also have the instructions folder here, instructions for both intermediate Angular and advanced Angular.

[00:03:10]
Angular advanced starts with the day 2 module 1, so this will be our instructions that we can follow along with me and build the application. All right, let's look at the source. This application already is functional. Let's take a look at this. I'm going to start the application. So it starts the backend, it starts the frontend, starts both. This is our application.

[00:03:42]
It's loading events. Once the loaded events, we see them here. They are brought from the database that we have, the server running locally. The 2-second delay you can see here, right? We don't, it doesn't pop up immediately. We slowly bring them in. We have all the data for the events like the date of the events. We have other details, the title. If we go to the details for any specific event, we see loads of the details for this, location, description, other things.

[00:04:20]
We can buy tickets for this, and this buy tickets is done optimistically. So when we click, we see immediately changes in the tickets, and then our API goes through and completes the purchase. We can, this is the second page, but so we have the main page, this is the second page for event details, and the third page we have, admin page. Admin page, if you're starting from scratch here, is unavailable because we have a route guard protecting this.

[00:05:01]
The way to get that in, we need to, can do manually add in the application or local storage. You can add the value or we can run the commands for the local storage to set value for the isAdmin equal true. Yeah, it's just set item there you go. Perfect, that's right, now it works. And you can see in our local storage we have isAdmin equal to true, and then our guard checks this and we can access it, right?

[00:05:39]
This is our imitation of permission-based approach and how we can guard certain routes from loading or navigating to them. That's it, that's it. There's just 3 pages that we have. They're already functional. We can also remove events. We can like the events as well. It's working. We can search as well. So if we search for Angular, only 2 of them have Angular either in the title or description.

[00:06:08]
So that brings us to this functional application. Let's take a look at what do we have in terms of structure, because we're going to be changing it today. We have the app itself, it's probably too much. Here we go, we have the app itself. We're not going to touch this much. It's just a general bootstrap of this where we have the router outlet for all our routing needs.

[00:06:37]
We have the routes. Right now we have the default path will get us to the event list component. This is the event list page. And then we have event with the parameter of ID, and it would get us to the event details page. In the admin create, it gets us to the create event page, and this is where we saw the auth guard protecting it. In a config here right now, this is our main providers for the entire application.

[00:07:16]
Right now it's using the zone change detection. I'm going to change it today. It provides the router with the component input binding that allows us to bind to the parameter from routing directly into the component via the input of signal. We also provide the HTTP client as well, and we also provided some tokens, injectable tokens values here. OK, in the routes, we saw the routes themselves already, then we have 4 folders here.

[00:07:52]
I'll start from the bottom. So first we have the model. This is our client-side model, but it's also resembles the DTO model, the data transfer object that we talk to our backend with. It mimics what the event looks like at our backend, which is our JSON db.json file. You can see the same properties. In the layout, this is our general layout components.

[00:08:19]
They're reusable. We have a header that's used throughout the entire application. It's even used before the router outlet, so it's shared between all the pages. And we have the data that's coming here from the cart service and shows us the number of tickets that we have. It's a good chance for us to take a look at the cart service. It's a service that's provided in root, where we have our HTTP client, our tickets URL injected.

[00:08:56]
We have, this is a stateful service. We have a local state of the ticket IDs here. It's private, and it's exposing the count for any consumer as a computed property. Computed property means it's derived value. It listens for these ticket ID changes signal, and then computes the new value out of this. In the constructor, we can also load the event, load those tickets.

[00:09:33]
Load tickets uses HTTP client to get the tickets by this ticket URL, and then set these tickets into the ticket IDs array, which is a signal here. This allows us to do things with optimistic updates. For example, when we add the ticket here, we can restore the snapshot of the current tickets, then we update the tickets immediately. So our tickets then get updated, and count is updated immediately, so our UI is updated immediately as well, optimistically.

[00:10:14]
And then we do the request to actually persist this to the backend. And if we fail, then we'll revert back to our previous state. This will become important today. So this is the header. We have a few features. We have the admin create event page is here. This create event, this page is using the new signal forms APIs and basically allows us to fill all the information and create new event.

[00:10:54]
It's working with the event service to persist this data. So when we submit information, we're going to call this event service and create the event with the current payload. And the payload is our signal that keeps track of the form state, and if you want to learn this more in details, we covered it extensively in the intermediate Angular course, so I suggest to take a look at that first.

[00:11:28]
And then we have our events. Events has 4 components here. Event list is our homepage. That's where we see all our events listed, where we use the HTTP resource to retrieve them. And we also have the search bar here where we can search for the events. Not going to go into details here. This is how we get the resources, and again, the events is our HTTP resource based on the search query.

[00:12:09]
We can also delete events from here. All right, and again, event details card is another card, another page where we're going to be doing quite a few changes here today, where we load one specific event. So this event resource, we load this specific event by ID. We are using an HTTP resource for it as well, and this HTTP resource allows us to see the state of this resource, if it's loading, if it's error, or if it has the value, then we can access the value and output all the information about this resource.

[00:12:54]
The event list page, which is our homepage, is also using the event card, app event card here. Is used for each of those cards individually, right? We're going to use that as well today. Our details, let me see, yes, the details is here. Search bar, I'm not going to touch it today. It's very simple, binding to input through the ngModel coming from the Angular forms.

[00:13:26]
OK, so again, we have 2 services, 1 guard, 3 main pages, and a few additional components. So far it's pretty simple, and this application is meant to demonstrate some of the techniques, some of the new APIs. This is not the production-ready applications. Some of the examples are a little bit contrived, but the idea is to give you inspiration, how we can achieve this in real Angular applications, enterprise or smaller level.

[00:13:52]
And you can see, by the way, we added a few tickets. They are added here right away, so this JSON file is mutated whenever we interact with this. So if you want to remove some of these things, you can also remove it from here as well.