Steps to Create Angular Application And Installing Module
Step 1: Create a Angular application using the following command:
ng new my-App
Step 2: Go to your project directory
cd my-App
Step 3: Create a service using the following command.
ng generate service my-service
We have now completed setting up the angular environment and created a service.
Project Structure:
Dependencies:
"dependencies": {
"@angular/animations": "^15.2.0",
"@angular/common": "^15.2.0",
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/forms": "^15.2.0",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
Below is the example of performing dependency injection in Angular
<!-- app.component.html -->
<button (click)="user()">Get Users</button>
<div *ngIf="status">
<table>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr *ngFor="let user of users">
<td>{{user.name}}</td>
<td>{{user.country}}</td>
</tr>
</table>
</div>
//my-service.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MyService {
baseUrl = 'http://localhost:8080/';
constructor(private http: HttpClient) { }
getusers() {
return this.http.get(this.baseUrl + 'getusers').pipe(
map((response: any) => {
const user = response;
if (user) {
return user;
}
})
);
}
}
//app.component.ts
import { Component } from '@angular/core';
import { MyService } from './_services/my-service.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
users: any;
status: boolean = false;
constructor(private service: MyService, private router: Router) {
}
ngOnInit(): void {
}
user() {
this.service.getusers().subscribe({
next: (users) => {
this.users = users;
console.log(this.users);
this.status = true;
},
})
}
}
In the above example two services are injected which are Http Client a built in service provided by the angular to deal with the http requests and responses and MyService which is a service created by us. MyService component uses injected http service to get the users from the database. app component uses injected MyService to display those users on the page once the user clicks the get users button.
Output:
Angular Dependency Injection
Angular is an open-source framework for building web modern web applications. One of the key principles of Angular is dependency injection. Dependency Injection is one of the widely used techniques in application programming. It is included in almost every framework. In this article, we will learn about Dependency Injection and how to perform Dependency Injection in Angular.
Contact Us