Angular Core Deep Dive

Author: Your Name

src/app/app.component.ts

@@ -1,15 +1,15 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, OnInit} from '@angular/core';
 import {Course} from './model/course';
 import {Observable} from 'rxjs';
-import {CoursesService} from './services/courses.service';
 import {AppConfig, CONFIG_TOKEN} from './config';
 import {COURSES} from '../db-data';
+import {CoursesService} from './courses/courses.service';
 
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
 

src/app/app.module.ts

@@ -1,26 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
+import{ BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CourseCardComponent } from './course-card/course-card.component';
-import { CourseImageComponent } from './course-image/course-image.component';
-import { HighlightedDirective } from './directives/highlighted.directive';
-import { NgxUnlessDirective } from './directives/ngx-unless.directive';
 import {HttpClientModule} from '@angular/common/http';
+import {CoursesModule} from './courses/courses.module';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    CourseCardComponent,
-    CourseImageComponent,
-    HighlightedDirective,
-    NgxUnlessDirective
+    AppComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    HttpClientModule
+    HttpClientModule,
+    CoursesModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/course-card/course-card.component.css renamed to src/app/courses/course-card/course-card.component.css

@@ -10,19 +10,17 @@ import {
     OnInit,
     Output
 } from '@angular/core';
-import {Course} from '../model/course';
-import {CoursesService} from '../services/courses.service';
+import {Course} from '../../model/course';
+import {CoursesService} from '../courses.service';
+
 
 
 @Component({
     selector: 'course-card',
     templateUrl: './course-card.component.html',
     styleUrls: ['./course-card.component.css']
 })
-export class CourseCardComponent implements
-    OnInit, OnDestroy, OnChanges,
-    AfterContentChecked, AfterViewChecked,
-    AfterContentInit, AfterViewInit, DoCheck {
+export class CourseCardComponent implements  OnInit {
 
     @Input()
     course: Course;
@@ -40,52 +38,14 @@ export class CourseCardComponent implements
                 @Attribute('type') private type: string) {
 
 
-        console.log('constructor', this.course);
-
-    }
-
-    ngOnChanges(changes) {
-
-        console.log('ngOnChanges', changes);
     }
 
     ngOnInit() {
 
-        console.log('ngOnInit');
-
-
-    }
-
-    ngDoCheck() {
-        console.log("ngDoCheck");
-    }
-
-    ngAfterContentInit() {
-        console.log("ngAfterContentInit");
-    }
 
-    ngAfterViewInit() {
-        console.log("ngAfterViewInit");
     }
 
 
-    ngAfterContentChecked() {
-
-        console.log('ngAfterContentChecked');
-
-    }
-
-    ngAfterViewChecked() {
-
-        console.log('ngAfterViewChecked');
-
-    }
-
-    ngOnDestroy() {
-
-        console.log('ngOnDestroy');
-
-    }
 
     onTitleChanged(newTitle: string) {
 

src/app/course-card/course-card.component.html renamed to src/app/courses/course-card/course-card.component.html

@@ -0,0 +1,13 @@
+import { CoursesModule } from './courses.module';
+
+describe('CoursesModule', () => {
+  let coursesModule: CoursesModule;
+
+  beforeEach(() => {
+    coursesModule = new CoursesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(coursesModule).toBeTruthy();
+  });
+});

src/app/course-card/course-card.component.spec.ts renamed to src/app/courses/course-card/course-card.component.spec.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {CourseCardComponent} from './course-card/course-card.component';
+import {CourseImageComponent} from './course-image/course-image.component';
+import {CoursesService} from './courses.service';
+import {HighlightedDirective} from './directives/highlighted.directive';
+import {NgxUnlessDirective} from './directives/ngx-unless.directive';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+      CourseCardComponent,
+      CourseImageComponent,
+      HighlightedDirective,
+      NgxUnlessDirective
+  ],
+    exports: [
+        CourseCardComponent,
+        CourseImageComponent
+    ],
+    providers: [CoursesService]
+})
+export class CoursesModule { }

src/app/course-card/course-card.component.ts renamed to src/app/courses/course-card/course-card.component.ts

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

src/app/course-image/course-image.component.css renamed to src/app/courses/course-image/course-image.component.css

@@ -1,5 +1,6 @@
 import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core';
-import {CoursesService} from '../services/courses.service';
+import {CoursesService} from '../courses.service';
+
 
 @Directive({
     selector: '[highlighted]',

src/app/course-image/course-image.component.html renamed to src/app/courses/course-image/course-image.component.html

@@ -12,6 +12,9 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
+
   <app-root></app-root>
+
+
 </body>
 </html>