Skip to content

Instantly share code, notes, and snippets.

@jhades

jhades/01.ts

Last active October 28, 2021 05:12
Show Gist options
  • Save jhades/a17be59e153a01e9f65869caa5a80e12 to your computer and use it in GitHub Desktop.
Save jhades/a17be59e153a01e9f65869caa5a80e12 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Dependency Injection: Complete Guide - https://blog.angular-university.io/angular-dependency-injection
Raw
01.ts
export class CoursesService() {
http: HttpClient;
constructor() {
this.http = new HttpClient(... dependencies needed by HTTPClient ...);
}
...
}
Raw
02.ts
@Injectable()
export class CoursesService() {
http: HttpClient;
constructor(http: HttpClient) {
this.http = http;
}
...
}
Raw
03.ts
export class CoursesService() {
http: HttpClient;
constructor(http: HttpClient) {
this.http = http;
}
...
}
Raw
04.ts
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor(private coursesService: CoursesService) {
...
}
...
}
Raw
05.ts
function coursesServiceProviderFactory(http:HttpClient): CoursesService {
return new CoursesService(http);
}
Raw
06.ts
export const COURSES_SERVICE_TOKEN =
new InjectionToken<CoursesService>("COURSES_SERVICE_TOKEN");
Raw
07.ts
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: COURSES_SERVICE_TOKEN,
useFactory: coursesServiceProviderFactory,
deps: [HttpClient]
}
]
})
export class CoursesModule { }
Raw
08.ts
@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) {
...
}
...
}
Raw
09.ts
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: CoursesService,
useFactory: coursesServiceProviderFactory,
deps: [HttpClient]
}
]
})
export class CoursesModule { }
Raw
10.ts
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor( @Inject(CoursesService) private coursesService: CoursesService) {
...
}
...
}
Raw
11.ts
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: CoursesService,
useClass: CoursesService,
deps: [HttpClient]
}
]
})
export class CoursesModule { }
Raw
12.ts
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor(private coursesService: CoursesService) {
...
}
...
}
Raw
14.ts
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
CoursesService
]
})
export class CoursesModule { }
Raw
15.ts
@Injectable()
export class CoursesService() {
http: HttpClient;
constructor(http: HttpClient) {
this.http = http;
}
...
}
Raw
16.ts
@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 {
}
Raw
17.ts
let counter = 0;
@Injectable()
export class CoursesService() {
constructor(private http: HttpClient) {
counter++;
this.id = counter;
}
...
}
Raw
18.html
<div class="courses">
<course-card *ngFor="let course of courses "
[course]="course">
<course-image [src]="course.iconUrl"></course-image>
</course-card>
</div>
Raw
19.ts
@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}`);
}
...
}
Raw
20.ts
@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}`);
}
...
}
Raw
21.ts
@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}`);
}
...
}
Raw
22.ts
@NgModule({
imports: [
CommonModule
],
declarations: [
CourseCardComponent
],
exports: [
CourseCardComponent
],
providers: [
CoursesService
]
})
export class CoursesModule { }
Raw
23.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
CoursesModule
],
providers: [
CoursesService
],
bootstrap: [AppComponent]
})
export class AppModule {}
Raw
24.ts
@NgModule({
imports: [
CommonModule
],
declarations: [
CourseCardComponent
],
exports: [
CourseCardComponent
]
})
export class CoursesModule { }
Raw
25.ts
@Injectable({
providedIn: CoursesModule
})
export class CoursesService() {
constructor(private http: HttpClient) {
}
...
}
Raw
26.ts
@Injectable({
providedIn: "root"
})
export class CoursesService() {
constructor(private http: HttpClient) {
}
...
}
Raw
27.ts
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent {
constructor(@Optional() private coursesService: CoursesService) {
...
}
...
}
Raw
28.ts
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css'],
providers: [
CoursesService
]
})
export class CourseCardComponent {
constructor(@SkipSelf() private coursesService: CoursesService) {
...
}
...
}
Raw
29.ts
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
styleUrls: ['./course-card.component.css'],
providers: [
CoursesService
]
})
export class CourseCardComponent {
constructor(@Self() private coursesService: CoursesService) {
...
}
...
}
Raw
30.ts
@Directive({
selector: '[highlighted]'
})
export class HighlightedDirective {
constructor( @Host() private coursesService: CoursesService) {
console.log('coursesService highlighted ' + coursesService.id);
}
...
}
Raw
31.html
<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