Home » Service in Mean Stack

Service in Mean Stack

by Online Tutorials Library

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.

Previously,

  1. We got a chain of property and event binding.
  2. We emitted our post in the post-create component.
  3. We passed this post to its parent component.
  4. 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.

Service in MEAN Stack

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.

Service in MEAN Stack

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:

Service in MEAN Stack

4) We don’t want to return the original array because arrays and objects are reference types in JavaScript and typescript. A reference type is a type where it will not be copied if we try to do it. The object in memory will stay the same. We just copied the address, so the pointer point at that object, not value. So, for making a true copy of it, we will use the spread operator that is a next-generation JavaScript feature in the following way:

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.

Service in MEAN Stack

5) We also create the addPost() method, and this method will help us to add a post in the array. In this method, we can pass either a post or simply a title and a content. After that, we will create a new post of type Post. It is a JavaScript object which has a title and a content property. We define both the property and push this newly created post into posts array in the following way:

Service in MEAN Stack

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:

Service in MEAN Stack

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:

2. We will go to the postService and add a @injectable argument to it. This injectable is also imported from the @angular/core. In between the parenthesis, we pass a JavaScript object to configure this in the following way:

Service in MEAN Stack

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.


You may also like