Skip to content

Instantly share code, notes, and snippets.

@jhades
Last active Oct 28, 2021
Embed
What would you like to do?
Angular Dependency Injection: Complete Guide - https://blog.angular-university.io/angular-dependency-injection
export class CoursesService() {
http: HttpClient;
constructor() {
this.http = new HttpClient(... dependencies needed by HTTPClient ...);
}
...
}
@Injectable()
export class CoursesService() {
http: HttpClient;
constructor(http: HttpClient) {
this.http = http;
}
...
}
export class CoursesService() {
http: HttpClient;
constructor(http: HttpClient) {
this.http = http;
}
...
}
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor(private coursesService: CoursesService) {
...
}
...
}
function coursesServiceProviderFactory(http:HttpClient): CoursesService {
return new CoursesService(http);
}
export const COURSES_SERVICE_TOKEN =
new InjectionToken<CoursesService>("COURSES_SERVICE_TOKEN");
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: COURSES_SERVICE_TOKEN,
useFactory: coursesServiceProviderFactory,
deps: [HttpClient]
}
]
})
export class CoursesModule { }
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor( @Inject(COURSES_SERVICE_TOKEN) private coursesService: CoursesService) {
...
}
...
}
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: CoursesService,
useFactory: coursesServiceProviderFactory,
deps: [HttpClient]
}
]
})
export class CoursesModule { }
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor( @Inject(CoursesService) private coursesService: CoursesService) {
...
}
...
}
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: CoursesService,
useClass: CoursesService,
deps: [HttpClient]
}
]
})
export class CoursesModule { }
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor(private coursesService: CoursesService) {
...
}
...
}
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
CoursesService
]
})
export class CoursesModule { }
@Injectable()
export class CoursesService() {
http: HttpClient;
constructor(http: HttpClient) {
this.http = http;
}
...
}
@Component({
selector: 'choose-quantity',
templateUrl: "choose-quantity.component.html",
styleUrls: ["choose-quantity.component.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi:true,
useExisting: ChooseQuantityComponent
}
]
})
export class ChooseQuantityComponent implements ControlValueAccessor {
}
let counter = 0;
@Injectable()
export class CoursesService() {
constructor(private http: HttpClient) {
counter++;
this.id = counter;
}
...
}
<div class="courses">
<course-card *ngFor="let course of courses "
[course]="course">
<course-image [src]="course.iconUrl"></course-image>
</course-card>
</div>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [
CoursesService
]
})
export class AppComponent {
constructor(private coursesService: CoursesService) {
console.log(`App component service Id = ${coursesService.id}`);
}
...
}
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css'],
providers: [
CoursesService
]
})
export class CourseCardComponent {
constructor(private coursesService: CoursesService) {
console.log(`course card service Id = ${coursesService.id}`);
}
...
}
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css'],
providers: []
})
export class CourseCardComponent {
constructor(private coursesService: CoursesService) {
console.log(`course card service Id = ${coursesService.id}`);
}
...
}
@NgModule({
imports: [
CommonModule
],
declarations: [
CourseCardComponent
],
exports: [
CourseCardComponent
],
providers: [
CoursesService
]
})
export class CoursesModule { }
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
CoursesModule
],
providers: [
CoursesService
],
bootstrap: [AppComponent]
})
export class AppModule {}
@NgModule({
imports: [
CommonModule
],
declarations: [
CourseCardComponent
],
exports: [
CourseCardComponent
]
})
export class CoursesModule { }
@Injectable({
providedIn: CoursesModule
})
export class CoursesService() {
constructor(private http: HttpClient) {
}
...
}
@Injectable({
providedIn: "root"
})
export class CoursesService() {
constructor(private http: HttpClient) {
}
...
}
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor(@Optional() private coursesService: CoursesService) {
...
}
...
}
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css'],
providers: [
CoursesService
]
})
export class CourseCardComponent {
constructor(@SkipSelf() private coursesService: CoursesService) {
...
}
...
}
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css'],
providers: [
CoursesService
]
})
export class CourseCardComponent {
constructor(@Self() private coursesService: CoursesService) {
...
}
...
}
@Directive({
selector: '[highlighted]'
})
export class HighlightedDirective {
constructor( @Host() private coursesService: CoursesService) {
console.log('coursesService highlighted ' + coursesService.id);
}
...
}
<div class="courses">
<course-card *ngFor="let course of courses " highlighted
[course]="course">
<course-image [src]="course.iconUrl"></course-image>
</course-card>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment