Application setup
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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.
- |
Lesson Transcript
[00:00 - 00:07] In this course, we are going to create an application from scratch. I will create now an application and this is the setup that I'm going to use.
[00:08 - 00:11] So let's create the application. The command for this is `ng new`.
[00:12 - 00:25] Let's call it rxjs demo app. And also whenever I create a new application, I actually set the package manager to `pnpm` because this is my favorite package manager.
[00:26 - 00:40] I think it's better than `npm`. It's also a lot faster and syntax is the same as `npm`'s as opposed to `yarn` package manager `npm` . Let's select `SASS`.
[00:41 - 00:45] No, we do not want server side rendering. Now let's wait for the application to generate.
[00:46 - 00:54] All right. Now let's open the application we've just created. Inside the setup there's one more thing that I like to do, is installing `Angular Essentials`.
[00:55 - 00:58] This one. So what is `Angular Essentials`?
[00:59 - 01:07] It's just an extension pack with lots of useful extensions that are basically packaged in one install. Let's go ahead and install it.
[01:08 - 01:16] I am going to uninstall GitHub Copilot because otherwise it will keep asking for us to login. So let's restart.
[01:17 - 01:25] We are almost there. This `Angular Essentials` packages has also a package called `Material Icon Theme`.
[01:26 - 01:30] Let's go ahead and activate it. And now the icons have changed for our angular application.
[01:31 - 01:48] It looks much more beautiful this way because we do not want to call an actual backend, we will have to simulate this behavior. In order to do this, I will create a `products.json` and I will paste 100 entries. This will be enough for our demo application.
[01:49 - 01:58] Next, we want to create a service. So let's go ahead and create a services folder and in services folder, let's create a product service.
[01:59 - 02:02] No, we do not want analytics enabled. All right.
[02:03 - 02:08] So, we have created our product service. Now let's simulate our HTTP call.
[02:09 - 02:19] We need to define the URL to our assets to our `products.json`. Also need to inject our HTTP client.
[02:20 - 02:29] Lastly, let's create the method that will fetch. I will do it like this, typo, and of course, we also want to configure the formatter.
[02:30 - 02:35] Just select one that you like. This is the simple setup to fetch something from the HTTP client.
[02:36 - 02:50] Now, because the HTTP client returns an `Observable` and I have included here `any` just to make it simple, but actually we want to have an `Observable`. Let's say of type `any`.
[02:51 - 03:05] There is a thing about creating new projects in Visual Studio Code. When you try to import something new that hasn't been ever imported in this current project, Visual Studio Code is not smart enough to know where to find it.
[03:06 - 03:17] So in order to fix that, we can actually restart the TypeScript Server. To do this, we hold Ctrl Shift P and then we select TypeScript Server.
[03:18 - 03:20] Or just restart. And there we have it.
[03:21 - 03:26] We can restart TypeScript Server. We can restart Angular Language Server or ESLint Server.
[03:27 - 03:32] For this particular case, we need to restore the TypeScript Server. Now that we've restarted, let's try again.
[03:33 - 03:35] There it is. Now we can import it again.
[03:36 - 03:38] Sometimes it works like this. Sometimes it doesn't.
[03:39 - 03:50] So whenever it doesn't, we can just manually import it in our file. And after it has been imported, it will automatically give us the option the next time we want to import it in the new file.
[03:51 - 03:57] All right. The second thing is, because we are using TypeScript, we do not want to actually use `any` in here.
[03:58 - 04:03] Let's create a strong type for this. I will create a product class and this product.
[04:04 - 04:15] Let's create in here the types folder and inside these types. Let's create `product.ts` and this `product.ts` has an id, a name and the description.
[04:16 - 04:20] It actually maps what we have in here. So in our `products.json`.
[04:21 - 04:28] Now let's import it in here and we need to also assign a type to the get. So it knows what kind of type it can return.
[04:29 - 04:31] So that's it. This is our initial setup.
[04:32 - 04:44] We have created a service that will do a simulated HTTP call to a back end, which is actually our own machine. It will return an `Observable` that contains a list of products.
[04:45 - 04:52] We will explore in the next module what is an `Observable` and start building from there. There are two more things that I want to add to our starting project.
[04:53 - 04:58] The first one is bootstrap. It's very easy to do some basic stylings.
[04:59 - 05:05] And the second thing I want to add is the debugger. Let's go and run the application first.
[05:06 - 05:17] Now the application is running on localhost 4200. And in order to enable debugging capabilities, we just click on start where we can press F5.
[05:18 - 05:21] Do you want to use a different port? Yes, there we have it.
[05:22 - 05:26] This is our starting point. This is our angular application.
[05:27 - 05:29] We'll build on from here. See you next time.
In this course, we are going to create an application from scratch. I will create now an application and this is the setup that I'm going to use. So let's create the application. The command for this is `ng new`. Let's call it rxjs demo app. And also whenever I create a new application, I actually set the package manager to `pnpm` because this is my favorite package manager. I think it's better than `npm`. It's also a lot faster and syntax is the same as `npm`'s as opposed to `yarn` package manager `npm` . Let's select `SASS`. No, we do not want server side rendering. Now let's wait for the application to generate. All right. Now let's open the application we've just created. Inside the setup there's one more thing that I like to do, is installing `Angular Essentials`. This one. So what is `Angular Essentials`? It's just an extension pack with lots of useful extensions that are basically packaged in one install. Let's go ahead and install it. I am going to uninstall GitHub Copilot because otherwise it will keep asking for us to login. So let's restart. We are almost there. This `Angular Essentials` packages has also a package called `Material Icon Theme`. Let's go ahead and activate it. And now the icons have changed for our angular application. It looks much more beautiful this way because we do not want to call an actual backend, we will have to simulate this behavior. In order to do this, I will create a `products.json` and I will paste 100 entries. This will be enough for our demo application. Next, we want to create a service. So let's go ahead and create a services folder and in services folder, let's create a product service. No, we do not want analytics enabled. All right. So, we have created our product service. Now let's simulate our HTTP call. We need to define the URL to our assets to our `products.json`. Also need to inject our HTTP client. Lastly, let's create the method that will fetch. I will do it like this, typo, and of course, we also want to configure the formatter. Just select one that you like. This is the simple setup to fetch something from the HTTP client. Now, because the HTTP client returns an `Observable` and I have included here `any` just to make it simple, but actually we want to have an `Observable`. Let's say of type `any`. There is a thing about creating new projects in Visual Studio Code. When you try to import something new that hasn't been ever imported in this current project, Visual Studio Code is not smart enough to know where to find it. So in order to fix that, we can actually restart the TypeScript Server. To do this, we hold Ctrl Shift P and then we select TypeScript Server. Or just restart. And there we have it. We can restart TypeScript Server. We can restart Angular Language Server or ESLint Server. For this particular case, we need to restore the TypeScript Server. Now that we've restarted, let's try again. There it is. Now we can import it again. Sometimes it works like this. Sometimes it doesn't. So whenever it doesn't, we can just manually import it in our file. And after it has been imported, it will automatically give us the option the next time we want to import it in the new file. All right. The second thing is, because we are using TypeScript, we do not want to actually use `any` in here. Let's create a strong type for this. I will create a product class and this product. Let's create in here the types folder and inside these types. Let's create `product.ts` and this `product.ts` has an id, a name and the description. It actually maps what we have in here. So in our `products.json`. Now let's import it in here and we need to also assign a type to the get. So it knows what kind of type it can return. So that's it. This is our initial setup. We have created a service that will do a simulated HTTP call to a back end, which is actually our own machine. It will return an `Observable` that contains a list of products. We will explore in the next module what is an `Observable` and start building from there. There are two more things that I want to add to our starting project. The first one is bootstrap. It's very easy to do some basic stylings. And the second thing I want to add is the debugger. Let's go and run the application first. Now the application is running on localhost 4200. And in order to enable debugging capabilities, we just click on start where we can press F5. Do you want to use a different port? Yes, there we have it. This is our starting point. This is our angular application. We'll build on from here. See you next time.