Service in MEAN Stack
In our previous section, we learned about forms and how we can use them in our application. In this section, we will learn how we can get new posts from the post-create component to the post-list component.
- We got a chain of property and event binding.
- We emitted our post in the post-create component.
- We passed this post to its parent component.
- From the parent component, we passed it to the post-list component.
This works fine. But in a bigger application, it becomes more and more typical. The reason for this is because we have got longer chains of property and event binding to get an element from component X to Y, Y to Z, and so on.
This is not what we want to build. So, we will use another way of passing data around the components, i.e., Service. A service is a class injected by angular into components. Service is able to centralize some tasks and provide easy access to data from within the different components without property and event binding. We will add Service into our application using the following steps:
1) We will create a new file in the posts folder and give it the name service.ts. We will create this file in the same way as we have created the post.model.ts file.
2) In this file, we will create a service class that is a typescript class. We create this class using the export keyword because we use this class into different components. In this class, we have to add a list of posts so we will create a posts array of type Post in the following way:
The posts property is private because we don’t want that someone will change it from outside.
3) Now, we will create a new method called getPosts. This method will help us to retrieve posts. In this method, we will return the post like this:
In the above code, we added square brackets for creating a new array, and the three dots used to take all the elements of the posts array and add them to this new array.
We will use both of them in the post-list component and post-create component. By using this, we can get and add the post without passing data with property and event binding. We can do this by using this Service in the post-create and post-list component. We use the Service with a feature called dependency injection.
6) So, we will go to our post list component and create a constructor. This constructor will be called whenever angular create an instance of this component. Angular has a complex dependency injection system that is able to find out what we want and indeed give us that. So, we have to define the Service in the constructor as an argument in the following way:
In the above code, postService is an argument and PostService is the type of the argument to give a hint about what it actually should give us.
7) Now, we need a property to store the instance of the Service. We can either create a new property to store the instance of the Service, or we can make the postService argument of the constructor public.
By creating a new property:
By making postsService variable to public:
8) Angular cannot fulfill this requirement right now because it is not aware of the postService. The reason behind this is that it is not scanning all our files. So, to make angular aware, we have two ways:
1. By going to the app.module.ts file and adding the postService there. We will add the PostService in the providers array like as:
In the next section, we will learn how we can call the getPosts and addPost function and will take a quick view of the interface.