Angular Core Deep Dive

Author: Your Name

src/app/app.component.ts

@@ -6,24 +6,24 @@ import {HighlightedDirective} from './directives/highlighted.directive';
 import {Observable} from 'rxjs';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import {CoursesService} from './services/courses.service';
+import {APP_CONFIG, AppConfig, CONFIG_TOKEN} from './config';
 
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
-    providers: [
-        CoursesService
-    ]
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
 
     courses$: Observable<Course[]>;
 
     constructor(
-        private coursesService: CoursesService) {
+        private coursesService: CoursesService,
+        @Inject(CONFIG_TOKEN) private config: AppConfig) {
 
-        console.log("root component " + this.coursesService.id);
+
+            console.log(config);
 
     }
 

src/app/config.ts

@@ -0,0 +1,21 @@
+import {InjectionToken} from '@angular/core';
+
+
+export interface AppConfig {
+    apiUrl:string;
+    courseCacheSize:number;
+}
+
+
+export const APP_CONFIG:AppConfig = {
+    apiUrl: 'http://localhost:9000',
+    courseCacheSize: 10
+}
+
+
+export const CONFIG_TOKEN =
+    new InjectionToken<AppConfig>('CONFIG_TOKEN',
+        {
+            providedIn: 'root',
+            factory: () => APP_CONFIG
+        });

src/app/course-card/course-card.component.ts

@@ -39,7 +39,6 @@ export class CourseCardComponent implements OnInit {
 
     ngOnInit() {
 
-        console.log("coursesService course card" + this.coursesService.id);
 
     }
 

src/app/services/courses.service.ts

@@ -6,7 +6,9 @@ import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 let counter = 0;
 
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class CoursesService {
 
   id:number;