Angular 6 Dependency Injection Tutorial Example From Scratch

Angular 6 Dependency Injection Tutorial Example is the main topic. Dependency Injection (DI) is the way to create the objects that depend upon other objects. We generally use service as a Dependency Injection. Dependency injection is a vital application design pattern. Angular has its dependency injection framework, and you really can’t build an Angular application without it. In this example, we create a service that fetches the data from the server and then displays that data on the Angular Frontend.

Angular 6 Dependency Injection Tutorial

Okay, so first install Angular 6 application using Angular CLI.

#1: Install Angular 6.

Go to the terminal and type the following command.

npm install -g @angular/cli

Next step is to create a new Angular 6 Project using the following command.

ng new dependency

Go to the project folder.

cd dependency

#2: Create a service.

We can create a service using the following command.

ng g service data

#3: Create a JSON server.

We need the fake data to work with that is why I am using one package called json-server for this tutorial. Okay, so let us install the package using node package manager.

npm install -g json-server

Now next step is to create the new directory called data in the root. Inside that directory, create a file called db.json. Add the following data inside the db.json file.

{
    "results": [
    {
        "id": "1",
        "name": "Golum"
    },
    {
        "id": "2",
        "name": "Ape"
    },
    {
        "id": "3",
        "name": "King Kong"
    },
    {
        "id": "4",
        "name": "Serkis"
    },
    {
        "id": "5",
        "name": "Andy"
    }]
}

Now, start the JSON server using the following command.

json-server --watch data/db.json --port 4000

Now, we can access the JSON data using json-server running.

Our JSON server is started at port: 4000 and URL is: http://localhost:4000/results

#4: Setup HttpClient.

In Angular, we can send a network request to the server via HttpClient API. It is native API provided by Angular. We can use to send a GET and POST request to a server. We can configure it inside app.module.ts.

// app.module.ts

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
],

Now, inside app folder, create one file called Data.ts. It is an interface, that tells an Angular that what is the datatype of the backend data object.

// Data.ts

export interface Data {
    id: Number;
    name: String;
  }

#5: Write the data.service.ts file.

Now, the data.service.ts file is the service file, so we can use this file as a dependency of the app.component.ts class and will inject it in that class. So now app.component.ts file can access the methods of a data.service.ts class.

We write the network request code inside a data.service.ts file. It provides the service that can access the API and fetch the data from the server.

// data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getUsers() {
    return this
            .http
            .get(`${this.url}/results`);
        }
}

Now, include this file inside an app.component.ts file.

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Data } from './Data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data: Data[];
  constructor(private dataservice: DataService) { }

  ngOnInit() {
    this.dataservice
      .getUsers()
      .subscribe((data: Data[]) => {
          this.data = data;
        });
  }

}

So here, we have injected the DataService class as a dependency.

Loop through that data and display it as a table inside the app.component.html file.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let value of data">
      <td>{{ value.id }}</td>
      <td>{{ value.name }}</td>
    </tr>
  </tbody>
</table>

So, we have successfully injected the Service DI and use it in the app.component.ts class.

Finally, Angular 6 Dependency Injection Tutorial is over.