Performing CRUD Operations, section 8. Services and Dependency Injection. In this section of the course, we'll create Angular services to communicate with the back-end server and use Angular's built-in DI system to inject services to our application. Services are usually singleton objects. They provide a well defined purpose, and they usually include things that are not related to any component, such as values or functions, or features, that you want all components to have but maybe you don't have any efficient means to pass these data between these components in the hierarchy. Fortunately, Angular has its own DI system that provides these dependencies or services to all the components in the application by simply just injecting them directly to any component anywhere in the hierarchy. That's pretty efficient. Since these services are all singleton objects, the information will always be fresh and accurate throughout the entire application, making our app flexible, efficient, and robust. Before we start creating these services, let's take a look at how they work behind the scenes so you have a better understanding of the concept. In order for Angular to communicate with the back-end or a remote server, we first need to create an Angular service, which is just a special class. In this diagram, I'm only showing you one service, but you can have as many services as you need. For our application, we only create one service class to provide the services to perform our basic CRUD operations. Angular also has a class or a module called HttpClient module that allows us to make Ajax calls to the back-end or to the database server. Then we can use the built in the DI system to provide these services in our app via a decorated called Injectable. We can do this in one of three ways. The first way is called Root. That is to provide these services to the root module of the app, and this is the most common method and the one that we'll use in this course. This method allows all components and child modules in the app to access and consume these services. The second method is called ANY. This is typically used to provide these services directly to a feature or a child module. It's commonly used when you are lazy loading some modules, a feature we will not cover in this course. Lazy loading means just to load the module only when it's needed. As a result, if you potentially increase the speed of the page load. The third option is called platform. This is also uncommon. But if you have two or more angular apps running at the same time on the same site, then you could provide these same services to those apps without having to replicate them. Again, we'll not cover this option in this course. Then when these services are ready to go and ready to be used, you can then simply inject them directly to any component that needs them. Then when a component wants to consume the services, it needs to subscribe to these services via a library called RxJS. Now we see the big picture of how our services in DI work, let's head over to the IDE and create a service class. Here in the IDE, you'll see that creating a service class is really simple, and, of course, using the Angular CLI you can do that very quickly. But first, let's go to the frontend and to the app module, and we need to import a module called HttpClient module. You could do that here, or you can just go down here and add it to the imports, and it should do that automatically hopefully. HttpClient module, and let's see if it will import that for us. No, it doesn't. I'm going to copy this and we just have to import it up here. Copy that from the Angular common, and then http, from there. Make sure you have that added to your app module, the root module. It'll work. We can close that now. Now let's go and create a service and I will use a folder or a directory called services. Inside that services we have providers data services. We'll do that using the CLI, so Control J to open your terminal and navigate to the frontend, mean stack. To do that we'll just use a shortcut, ng, and then the space g and an s for service. The name of the service is going to be inside this services folder, and then the forward slash the name of the service which is provider. Just like how you create components, and then Angular will automatically add the.Services.ts for us. We can also skip the test. I think that's it, lets hit "Enter" and see what happens. It should create a file in the folder for us automatically. Great, there we go. Close it now, and enter service. You see that there is a provider.service.ts, and this is the cluster we need. As you can see in the injectable decorator, it has a providedIn and inside here is root. We're using root. The other options are if you remove that, and if you put your cursor right inside the space here, between the single quote and click the "Control Space" bar, you see those three options we mentioned in the slide. We're using the root here because we're going to inject or provide this injectable service to the root component. Now we need to get set at API. The API will be going to the back-end. If you remember in our app, we'll be communicating with the app that we created in section 6. The back-end here, if you remember, this app runs a port number 3000. We need to set API for that. Usually, you don't want to put it here. You put your API or the endpoint at separate file, either in the assets folder, or it's common to put inside the environments folder. In here, open environments. We're going to do for both of them, because one is for production, one is for the environment. Here we'll create another property. I'll just call it ApiUrl, and this will be assigned with the link to the http localhost, and then colon port 3000 and then /api/providers. I believe that's the one that we need, and then put a slash at the end here. That is the one that we need. If it's not correct later when we run we will always come back and check it out, and fix it. Let's copy the same ApiUrl and paste it over to the production as well. It just means that when you run this, by default, when you run it, it'll will always run in the environment production is set to false. But when you run in a production mode it's going to use this instead so just make sure we have that same URL here. Of course, when you're running a local tests, you put a different URL and the real server, maybe you have a different size you put it here. But for our example we just have the same address. We can close that now. Then here in the providers service file, we need to import that in here, and we'll create a variable here, call it apiUrl, the same URL, and we import that from the environment.apiUrl. That is our API. This is the endpoint, put it here, endpoint to our Express app. As you can see, that is all we needed for this point. The services class is created, it's called Providers Service. In the next video, we're going to create the Get function to provide the get APIs for our application. In the next video, we'll create a Get API to fetch data from the Database server.
