- Read Tutorial
- Watch Guide Video
We're getting to a really exciting time when it comes to building out this application because now for the first time ever we're going to connect two applications we're going to have the angular application that is going to connect to our freelance document rails microservice. So this is going to be very cool. But I do want to give you a little caveat before we go on. This is definitely going to be the most challenging part of the entire course. So if I go through some things that don't make sense definitely feel free one: to send me any questions that you may have but also go through the materials or go through the videos a couple times. Just so you can practice what we're doing and you can see all of the different things that we're having to implement in order to get this working because as much as angular helps with being able to do things like creating a connection between a front-end and a back-end it's still a pretty challenging process. If you've never done it before so I'm going to take it one step at a time I'm really going to try to go slow and methodical with it and explain what I'm doing at each stage. But still, if you see some things that don't make sense go through it a few times, implement the code yourself and play with it. And I think after a little while it's going to all start to click for you.
So to start off the very first thing that we have to do is we have to create a service for our documents. So we have our document components here in app/documents. And what a service is going to do is it is going to be a layer between our application and the API. So we technically could just have our component and we could go to our documents.component.ts and we could write all of our API querying logic right inside of the component. However that would be considered a very poor practice and the main reason is because we need to have a separation between our component and the API. And that's what a service will do it can be an intermediary layer that will handle all of the API connection logic and it makes it a lot easier to read and then it makes it more scalable later on.
So that's going to be the very first thing that we're going to do is we're going to go to documents, right click and select new file and I'm going to create this and it's going to be called document.service.ts. Inside of this, it's going to be a regular typescript file but where it's going to change is that instead of doing things like bringing in components we're going to bring in the different items we need to connect to API's. So the first thing I'm going to pull in is just a regular import statement but we're not bringing a component in this time we're bringing in a module called Injectable. So we're going to import injectable from '@angular/core'.
import { Injectable } from '@angular/core'
So this is a module provided by angular core if you go down to node_modules/@angular/core in this code you would find the injectable module and what it is is it's a decorator. So we'll be able to come down here and implement it so we can say that this class or this document service is going to be an injectable type of class. And what that really means is that we're going to be able to perform injection, which means we're going to perform dependency injection and slide in modules and slide in libraries and services into this code so that it can communicate properly with the API. So I want to do a class so I'm going to say
@Injectable()
export class DocumentService {
}
Now, this is the first part of it and I'm going to now add this to our app module so I'm going to go to app.module.ts. Now we can import this so I'm going to come down and I usually like to put my import statements kind of all grouped together. So here I have my DocumentsComponent. I'm going to put the DocumentService here, so it's not DocumentsService it's DocumentService. And this is going to be from document.service.
And so that's working. And the next thing we need to do is a little bit different than what we've done with our components because if you look down here and you see all of our declarations
these are what you do with components is you have to declare them in the app module. Now services are different because services are going to provide data and that's the easiest way to remember what we need to do. And that is we need to set up a list of providers. So I'm going to set up providers. And this is going to be an array. And inside of this make sure you do a comma afterward so it doesn't mess up our bootstrap. Inside of this, we're just going to put our document service. So I'm going to paste that in.
And now everything's still working. When this gets refreshed nothing breaks. So that's everything that we need to do in order to create a document service. I'm going to stop right here I'm going to with these videos I'm going to try to break them down into a little bit smaller chunks. Just so you have a little bit more time to disseminate what's going on as you notice we didn't change anything. All we did was we created a service and then we wired it up to the app module in the next guide we're going to start bringing in some of the libraries we're going to need in addition to Injectable, such as HTTP and Observable and some of these libraries that are going to allow us to connect to the API and we'll do that in the next guide.