Skip to content

Commit 411660f

Browse files
rickbeerendonkrickbeerendonk
committed
Add Dependency Injection - Providers in Feature Modules example.
1 parent 84765b7 commit 411660f

File tree

11 files changed

+195
-0
lines changed

11 files changed

+195
-0
lines changed

‎08 - Dependency Injection/5. Providers in Feature Modules/app/app.component.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
import { Component } from '@angular/core';
5+
6+
import { LoggerService } from './services/logger.service';
7+
8+
@Component({
9+
selector: 'app',
10+
template: '<greeting></greeting>',
11+
//providers: [LoggerService],
12+
})
13+
export class AppComponent {
14+
constructor(logger: LoggerService) {
15+
logger.info('AppComponent created.');
16+
}
17+
}

‎08 - Dependency Injection/5. Providers in Feature Modules/app/app.module.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
import { NgModule } from '@angular/core';
5+
import { BrowserModule } from '@angular/platform-browser';
6+
7+
import { AppComponent } from './app.component';
8+
import { GreetingModule } from './greeting/greeting.module';
9+
//import { LoggerService } from './services/logger.service';
10+
11+
@NgModule({
12+
imports: [BrowserModule, GreetingModule],
13+
declarations: [AppComponent],
14+
bootstrap: [AppComponent],
15+
//providers: [LoggerService],
16+
})
17+
export class AppModule { }

‎08 - Dependency Injection/5. Providers in Feature Modules/app/greeting/greeting.component.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
import { Component } from '@angular/core';
5+
6+
import { LoggerService } from '../services/logger.service';
7+
8+
@Component({
9+
selector: 'greeting',
10+
template: '<h1>Hello World</h1>',
11+
//providers: [LoggerService],
12+
})
13+
export class GreetingComponent {
14+
constructor(logger: LoggerService) {
15+
logger.warn('GreetingComponent created.');
16+
}
17+
}

‎08 - Dependency Injection/5. Providers in Feature Modules/app/greeting/greeting.module.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
import { NgModule } from '@angular/core';
5+
import { CommonModule } from '@angular/common';
6+
7+
import { GreetingComponent } from './greeting.component';
8+
import { LoggerService } from '../services/logger.service';
9+
10+
@NgModule({
11+
imports: [CommonModule],
12+
declarations: [GreetingComponent],
13+
exports: [GreetingComponent],
14+
providers: [LoggerService],
15+
})
16+
export class GreetingModule { }

‎08 - Dependency Injection/5. Providers in Feature Modules/app/services/logger.service.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export class LoggerService {
2+
private static uniqueId: number = 0;
3+
4+
private id: number;
5+
6+
constructor() {
7+
this.id = ++LoggerService.uniqueId;
8+
}
9+
10+
error(message?: any, ...optionalParams: any[]) {
11+
console.error(message, ...optionalParams, ` [logger: ${this.id}]`);
12+
}
13+
14+
info(message?: any, ...optionalParams: any[]) {
15+
console.info(message, ...optionalParams, ` [logger: ${this.id}]`);
16+
}
17+
18+
warn(message?: any, ...optionalParams: any[]) {
19+
console.warn(message, ...optionalParams, ` [logger: ${this.id}]`);
20+
}
21+
}

‎08 - Dependency Injection/5. Providers in Feature Modules/index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<!-- Mozilla Public License Version 2.0 -->
3+
<!-- Copyright © 2018 Rick Beerendonk -->
4+
<html lang="en">
5+
6+
<head>
7+
<meta charset="utf-8" />
8+
<meta name="author" content="Rick Beerendonk">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
11+
12+
<title>Dependency Injection - Providers in Modules</title>
13+
14+
<link href="styles.css" rel="stylesheet" type="text/css">
15+
</head>
16+
17+
<body>
18+
<app>Loading...</app>
19+
20+
<script src="../../node_modules/core-js/client/shim.min.js"></script>
21+
<script src="../../node_modules/zone.js/dist/zone.js"></script>
22+
<script src="../../node_modules/typescript/lib/typescript.js"></script>
23+
<script src="../../node_modules/systemjs/dist/system.js"></script>
24+
25+
<script src="systemjs.config.js"></script>
26+
<script>
27+
System.import('main.ts').catch(function (err) {
28+
console.error(err);
29+
document.body.style.backgroundColor = 'red';
30+
document.body.style.color = 'white';
31+
document.body.innerText = err;
32+
});
33+
</script>
34+
</body>
35+
36+
</html>

‎08 - Dependency Injection/5. Providers in Feature Modules/main.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5+
6+
import { AppModule } from './app/app.module';
7+
8+
platformBrowserDynamic().bootstrapModule(AppModule);

‎08 - Dependency Injection/5. Providers in Feature Modules/styles.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
body {
5+
color: #444;
6+
}

‎08 - Dependency Injection/5. Providers in Feature Modules/systemjs.config.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*! Mozilla Public License Version 2.0 !*/
2+
/*! Copyright © 2018 Rick Beerendonk !*/
3+
4+
System.config({
5+
paths: {
6+
'npm:': '../../node_modules/'
7+
},
8+
map: {
9+
'rxjs': 'npm:rxjs',
10+
'ts': 'npm:plugin-typescript',
11+
'typescript': 'npm:typescript',
12+
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
13+
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
14+
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
15+
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
16+
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'
17+
},
18+
packages: {
19+
'app': {
20+
defaultExtension: 'ts',
21+
main: './bootstrap.ts'
22+
},
23+
'rxjs': {
24+
defaultExtension: 'js'
25+
},
26+
'ts': {
27+
main: 'lib/plugin.js'
28+
},
29+
'typescript': {
30+
main: 'lib/typescript.js',
31+
meta: {
32+
'lib/typescript.js': {
33+
exports: 'ts'
34+
}
35+
}
36+
}
37+
},
38+
transpiler: 'ts',
39+
typescriptOptions: {
40+
module: 'system',
41+
tsconfig: true
42+
}
43+
});

‎08 - Dependency Injection/5. Providers in Feature Modules/tsconfig.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"emitDecoratorMetadata": true,
5+
"experimentalDecorators": true,
6+
"noImplicitAny": true,
7+
"target": "es2017"
8+
}
9+
}

‎08 - Dependency Injection/readme.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Dependency Injection
2+
3+
## Documentation
4+
5+
https://angular.io/guide/dependency-injection

0 commit comments

Comments
 (0)