Angular Material Course

package.json

@@ -4,7 +4,8 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "./node_modules/.bin/ng serve  --proxy-config ./proxy.json",
+    "server": "./node_modules/.bin/ts-node ./server/server.ts",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -23,7 +24,6 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
-    "@types/express": "^4.0.39",
     "core-js": "^2.4.1",
     "express": "^4.16.2",
     "hammerjs": "^2.0.8",
@@ -37,6 +37,7 @@
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "@types/express": "^4.0.39",
     "codelyzer": "~3.2.0",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",

proxy.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:9000",
+    "secure": false
+  }
+}

server/get-courses.route.ts

@@ -0,0 +1,24 @@
+
+
+import {Request, Response} from 'express';
+import {COURSES} from "./db-data";
+
+
+
+export function getAllCourses(req: Request, res: Response) {
+
+    res.status(200).json({payload:Object.values(COURSES)});
+
+}
+
+
+export function getCourseById(req: Request, res: Response) {
+
+    const courseId = req.params["id"];
+
+    const courses = Object.values(COURSES);
+
+    const course = courses.find(course => course.id == courseId);
+
+    res.status(200).json(course);
+}

server/search-lessons.route.ts

@@ -0,0 +1,34 @@
+
+
+
+import {Request, Response} from 'express';
+import {LESSONS} from "./db-data";
+
+
+
+export function searchLessons(req: Request, res: Response) {
+
+    const queryParams = req.query;
+
+    const filter = queryParams.filter,
+          sortOrder = queryParams.order,
+          pageNumber = parseInt(queryParams.pageNumber),
+          pageSize = parseInt(queryParams.pageSize);
+
+    let lessons = Object.values(LESSONS).sort((l1, l2) => l1.id - l2.id);
+
+    if (filter) {
+       lessons = lessons.filter(lesson => lesson.description.toLowerCase().search(filter) >= 0);
+    }
+
+    if (sortOrder === "desc") {
+        lessons = lessons.reverse();
+    }
+
+    const initialPos = (pageNumber - 1) * pageSize;
+
+    const lessonsPage = lessons.slice(initialPos, initialPos + pageSize);
+
+
+    res.status(200).json({payload: lessonsPage});
+}

server/server.ts

@@ -0,0 +1,27 @@
+
+
+import * as express from 'express';
+import {Application} from "express";
+import {getAllCourses, getCourseById} from "./get-courses.route";
+import {searchLessons} from "./search-lessons.route";
+
+
+const app: Application = express();
+
+
+app.route('/api/courses').get(getAllCourses);
+
+app.route('/api/courses/:id').get(getCourseById);
+
+app.route('/api/lessons').get(searchLessons);
+
+
+
+
+const httpServer = app.listen(9000, () => {
+    console.log("HTTP REST API Server running at http://localhost:" + httpServer.address().port);
+});
+
+
+
+

src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {AboutComponent} from "./about/about.component";
 import {CourseComponent} from "./course/course.component";
+import {CourseResolver} from "./services/course.resolver";
 
 const routes: Routes = [
     {
@@ -16,7 +17,10 @@ const routes: Routes = [
     },
     {
         path: 'courses/:id',
-        component: CourseComponent
+        component: CourseComponent,
+        resolve: {
+            course: CourseResolver
+        }
     },
     {
         path: "**",

src/app/app.module.ts

@@ -19,6 +19,9 @@ import { CourseComponent } from './course/course.component';
 import {MatTableModule} from '@angular/material/table';
 import {MatInputModule, MatSortModule} from "@angular/material";
 import {MatPaginatorModule} from '@angular/material/paginator';
+import {CoursesService} from "./services/courses.service";
+import {HttpClientModule} from "@angular/common/http";
+import {CourseResolver} from "./services/course.resolver";
 
 
 @NgModule({
@@ -32,6 +35,7 @@ import {MatPaginatorModule} from '@angular/material/paginator';
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
+        HttpClientModule,
         MatMenuModule,
         MatButtonModule,
         MatIconModule,
@@ -46,7 +50,10 @@ import {MatPaginatorModule} from '@angular/material/paginator';
         MatPaginatorModule,
         MatSortModule
     ],
-    providers: [],
+    providers: [
+        CoursesService,
+        CourseResolver
+    ],
     bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/course/course.component.ts

@@ -2,8 +2,9 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
 import {Lesson} from "../model/lesson";
-import {findCourseById, findLessonsForCourse} from "../model/db-data";
 import {Course} from "../model/course";
+import {CoursesService} from "../services/courses.service";
+
 
 
 @Component({
@@ -23,21 +24,15 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     @ViewChild(MatSort) sort: MatSort;
 
-    constructor(private route: ActivatedRoute) {
+    constructor(private route: ActivatedRoute, private coursesService: CoursesService) {
 
     }
 
     ngOnInit() {
 
-        this.route.params.subscribe(params => {
-
-            const courseId = params['id'];
-
-            this.course = findCourseById(courseId);
-
-            this.dataSource.data = findLessonsForCourse(courseId);
+        this.course = this.route.snapshot.data["course"];
 
-        });
+        // TODO this.dataSource.data = findLessonsForCourse(courseId);
 
     }
 

src/app/home/home.component.html

@@ -9,7 +9,7 @@ <h3>All Courses</h3>
         <mat-tab label="Beginners">
 
             <courses-card-list
-                    [courses]="beginnerCourses">
+                    [courses]="beginnerCourses$ | async">
 
             </courses-card-list>
 
@@ -18,7 +18,7 @@ <h3>All Courses</h3>
         <mat-tab label="Advanced">
 
             <courses-card-list
-                    [courses]="advancedCourses"
+                    [courses]="advancedCourses$ | async"
 
             ></courses-card-list>
 

src/app/home/home.component.ts

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {Course} from "../model/course";
-import {COURSES} from "../model/db-data";
+import {Observable} from "rxjs/Observable";
+import {CoursesService} from "../services/courses.service";
+import {map} from "rxjs/operators";
 
 @Component({
     selector: 'home',
@@ -9,21 +11,26 @@ import {COURSES} from "../model/db-data";
 })
 export class HomeComponent implements OnInit {
 
-    beginnerCourses: Course[];
+    beginnerCourses$: Observable<Course[]>;
 
-    advancedCourses: Course[];
+    advancedCourses$: Observable<Course[]>;
 
-    constructor() {
+    constructor(private coursesService: CoursesService) {
 
     }
 
     ngOnInit() {
 
-        const courses = Object.values(COURSES);
+        const courses$ = this.coursesService.findAllCourses();
 
-        this.beginnerCourses = courses.filter(course => course.category === 'BEGINNER');
+        this.beginnerCourses$ = courses$.pipe(
+          map(courses => courses.filter(course => course.category === 'BEGINNER') )
+        );
+
+        this.advancedCourses$ = courses$.pipe(
+            map(courses => courses.filter(course => course.category === 'ADVANCED') )
+        );
 
-        this.advancedCourses = courses.filter(course => course.category === 'ADVANCED');
     }
 
 }

src/app/services/course.resolver.ts

@@ -0,0 +1,24 @@
+
+
+
+import {Injectable} from "@angular/core";
+import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from "@angular/router";
+import {Course} from "../model/course";
+import {Observable} from "rxjs/Observable";
+import {CoursesService} from "./courses.service";
+
+
+
+@Injectable()
+export class CourseResolver implements Resolve<Course> {
+
+    constructor(private coursesService:CoursesService) {
+
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
+        return this.coursesService.findCourseById(route.params['id']);
+    }
+
+}
+

src/app/services/courses.service.ts

@@ -0,0 +1,34 @@
+
+
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs/Observable";
+import {Course} from "../model/course";
+import {map} from "rxjs/operators";
+
+
+@Injectable()
+export class CoursesService {
+
+    constructor(private http:HttpClient) {
+
+    }
+
+    findCourseById(courseId: number): Observable<Course> {
+        return this.http.get<Course>(`/api/courses/${courseId}`);
+    }
+
+    findAllCourses(): Observable<Course[]> {
+        return this.http.get('/api/courses')
+            .pipe(
+                map(res => res['payload'])
+            );
+    }
+
+    findLessons(courseId:number, filter = '', sortOrder = 'asc', pageNumber = 1, pageSize = 3) {
+
+
+
+    }
+
+}