typescript course ongoing

Author: Your Name

client/src/app/app.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {CoursesService} from "./services/courses.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app works!';
+export class AppComponent implements OnInit {
+
+    constructor(private coursesService:CoursesService) {
+
+    }
+
+    ngOnInit() {
+        this.coursesService.loadCourseDetail(1);
+    }
+
 }

client/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 import { CourseDetailComponent } from './course-detail/course-detail.component';
+import {CoursesService} from "./services/courses.service";
 
 @NgModule({
   declarations: [
@@ -16,7 +17,7 @@ import { CourseDetailComponent } from './course-detail/course-detail.component';
     FormsModule,
     HttpModule
   ],
-  providers: [],
+  providers: [CoursesService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

client/src/app/course-detail/course-detail.component.ts

@@ -7,9 +7,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CourseDetailComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+
+
+  }
 
   ngOnInit() {
+
+
   }
 
 }

client/src/app/services/courses.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CoursesService } from './courses.service';
+
+describe('Service: Courses', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CoursesService]
+    });
+  });
+
+  it('should ...', inject([CoursesService], (service: CoursesService) => {
+    expect(service).toBeTruthy();
+  }));
+});

client/src/app/services/courses.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import {Http} from "@angular/http";
+import {Observable} from "rxjs";
+import {CourseDetail} from "../../../../shared/model/course-detail";
+
+
+
+@Injectable()
+export class CoursesService {
+
+  constructor(private http:Http) { }
+
+
+    loadCourseDetail(courseId: number) :Observable<CourseDetail> {
+
+        return this.http.get(`/api/courses/${courseId}`)
+            .map(res => res.json());
+
+    }
+
+
+}