Angular Material Course

Author: jhades

package-lock.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",

package.json

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

proxy.json

@@ -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);
+}

src/app/model/db-data.ts renamed to server/db-data.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/get-courses.route.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);
+});
+
+
+
+

server/search-lessons.route.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: "**",

server/server.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/app-routing.module.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);
 
     }