Creating a Service to Retrieve Data

In this section, we will use ng generate to create the PostsService, use environment to store the API URL, and use the PostsService in our components. We will then define our API calls in the PostsService and leverage the HttpClientModule to enable HTTP access.

Generating the Service

We will use the ng generate service command to generate a service that will handle the interaction with our API:

1. Open your terminal and navigate to the project directory.

2. Run the following command from inside the project directory:

   ng g s posts/services/posts --module posts/posts

   

Storing Our API URL

We will use the environment of Angular CLI to store our API URL. Using the environment, we can define a different URL for development and production environments.

By default, the application generated with Angular CLI comes with two predefined environments. These environments are defined in .angular-cli.json in the project root.

1. Open the src/environments/environment.ts file.

2. Inside the environment...