00 start

server/db.json

@@ -1,11 +1,24 @@
 {
   "courses": [
     {
-      "id": 1,
+      "id": "1",
       "title": "Angular 13 Fundamentals",
       "description": "Learn the fundamentals of Angular 13",
       "percentComplete": 26,
       "favorite": true
+    },
+    {
+      "id": "PZi4n6c",
+      "title": "java core",
+      "description": "Trying to learn new skills",
+      "percentComplete": 0,
+      "favorite": true
+    }
+  ],
+  "lessons": [
+    {
+      "id": "2",
+      "title": "Componenets Driven Architecture"
     }
   ]
 }

src/README.md

@@ -0,0 +1,6 @@
+# Angular 13
+## Common folder for shared state.
+- Template Driven Form: create interface - `ng g interface common/models/course`
+- Services: create using `ng g s common/services/courses`
+- Lessons service: `ng g s common/services/lessons`
+- Component driven architecture: Stateflow parents class components & Event binding from presentations child components`ng g c courses/courses-list -m app.module.ts -d` and `ng g c courses/course-details -m app.module.ts`

src/app/app.component.html

@@ -19,6 +19,12 @@
 <mat-sidenav-container>
   <mat-sidenav #sidenav mode="side" opened class="app-sidenav">
     <!-- Sidenav Menu -->
+    <nav>
+      <a mat-button class="nav-link" *ngFor="let link of links" [routerLink]="link.path" routerLinkActive="active">
+        <mat-icon>{{link.icon}}</mat-icon>
+        {{link.title}}
+      </a>
+    </nav>
   </mat-sidenav>
 
   <div class="container">

src/app/app.module.ts

@@ -8,16 +8,20 @@ import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
 import { HomeComponent } from './home/home.component';
 import { CoursesComponent } from './courses/courses.component';
+import { FormsModule } from '@angular/forms';
+import { CoursesListComponent } from './courses/courses-list/courses-list.component';
+import { CourseDetailsComponent } from './courses/course-details/course-details.component';
 
 @NgModule({
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    FormsModule,
     MaterialModule,
     HttpClientModule,
   ],
-  declarations: [AppComponent, HomeComponent, CoursesComponent],
+  declarations: [AppComponent, HomeComponent, CoursesComponent, CoursesListComponent, CourseDetailsComponent],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/common/models/course.ts

@@ -0,0 +1,7 @@
+export interface Course {
+  id: string;
+  title: string;
+  description: string;
+  percentComplete: number;
+  favorite: boolean;
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CoursesService } from './courses.service';
+
+describe('CoursesService', () => {
+  let service: CoursesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CoursesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,67 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Course } from '../models/course';
+
+const BASE_URL = 'http://localhost:3000'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CoursesService {
+  model = 'courses';
+
+  constructor(private http: HttpClient){}
+
+  all() {
+    return this.http.get(this.getUrl());
+  }
+
+  find(id) {
+    return this.http.get(this.getUrlWithID(id));
+  }
+
+  create(course) {
+    return this.http.post(this.getUrl(), course)
+  }
+
+  update(course) {
+    return this.http.put(this.getUrlWithID(course.id), course);
+  }
+
+  delete(id) {
+    return this.http.delete(this.getUrlWithID(id));
+  }
+
+  private getUrl() {
+    return `${BASE_URL}/${this.model}`;
+  }
+
+  private getUrlWithID(id) {
+    return `${this.getUrl()}/${id}`;
+  }
+
+
+  // courses: Course[] = [
+  //   {
+  //     id: '1',
+  //     title: 'Angular 13 Fundamentals',
+  //     description: 'Learn the fundamentals of Angular 13',
+  //     percentComplete: 66,
+  //     favorite: true,
+  //   },
+  //   {
+  //     id: '2',
+  //     title: 'Javascript Fundamentals',
+  //     description: 'Learn the Javascript fundamentals of Angular 13',
+  //     percentComplete: 98,
+  //     favorite: true,
+  //   },
+  //   {
+  //     id: '3',
+  //     title: 'Python Fundamentals',
+  //     description: 'Learn the Python fundamentals  ',
+  //     percentComplete: 78,
+  //     favorite: true,
+  //   },
+  // ];
+}

src/app/common/services/lessons.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LessonsService } from './lessons.service';
+
+describe('LessonsService', () => {
+  let service: LessonsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LessonsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/common/services/lessons.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { from } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LessonsService {
+  lessons = [
+    { title: 'Hello Angular' },
+    { title: 'Component Fundamentals' },
+    { title: 'Template Driven Forms' },
+    { title: 'Angular Services' },
+    { title: 'Server Communication' },
+    { title: 'Component Driven Architecture' },
+    { title: 'Angular Routing' },
+    { title: 'Unit Testing Fundamentals' },
+  ];
+  lessons$ = from(this.lessons);
+}

src/app/courses/course-details/course-details.component.html

@@ -0,0 +1,42 @@
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>
+          <span *ngIf="currentCourse?.id; else elseBlock">
+            {{originalTitle | titlecase}}
+          </span>
+          <ng-template #elseBlock> Select a Course</ng-template>
+        </mat-card-title>
+      </mat-card-header>
+      <!-- COURSE FORM -->
+      <form #form="ngForm" (submit)="saved.emit(currentCourse)">
+        <mat-card-content>
+          <mat-form-field class="full-width">
+            <input matInput placeholder="Title" [(ngModel)]="currentCourse.title" name="title" required type="text" />
+          </mat-form-field>
+          <mat-form-field class="full-width">
+            <input matInput placeholder="Description" [(ngModel)]="currentCourse.description" name="Description"
+              type="text" />
+          </mat-form-field>
+          <section class="full-width">
+            <h4>{{currentCourse.percentComplete}}% Complete</h4>
+            <mat-slider class="full-width" min="0" max="100" thumbLabel [(ngModel)]="currentCourse.percentComplete"
+              name="percentComplete">
+            </mat-slider>
+          </section>
+          <section>
+            <mat-checkbox [(ngModel)]="currentCourse.favorite" name="favorate">
+              Favorate
+            </mat-checkbox>
+          </section>
+        </mat-card-content>
+        <mat-card-actions>
+          <!-- COURSE ACTIONS -->
+          <button type="submit" [disabled]="form.invalid" mat-button color="primary">Save</button>
+          <button type="button" mat-button (click)="cancelled.emit()">Cancel</button>
+
+        </mat-card-actions>
+      </form>
+      <hr>
+      <pre>{{form.value | json}}</pre>
+      <pre>{{form.valid | json}}</pre>
+    </mat-card>

src/app/courses/course-details/course-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CourseDetailsComponent } from './course-details.component';
+
+describe('CourseDetailsComponent', () => {
+  let component: CourseDetailsComponent;
+  let fixture: ComponentFixture<CourseDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CourseDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CourseDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/courses/course-details/course-details.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Course } from 'src/app/common/models/course';
+
+@Component({
+  selector: 'app-course-details',
+  templateUrl: './course-details.component.html',
+  styleUrls: ['./course-details.component.scss'],
+})
+export class CourseDetailsComponent {
+  currentCourse: Course;
+  originalTitle = '';
+
+  @Output() saved = new EventEmitter();
+  @Output() cancelled = new EventEmitter();
+
+  // break the sharing
+  @Input() set course(value) {
+    if (!value) return
+    this.currentCourse = { ...value }
+    this.originalTitle = this.currentCourse.title; 
+  }
+}

src/app/courses/courses-list/courses-list.component.html

@@ -0,0 +1,22 @@
+<h1>COURES LIST</h1>
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      Course List
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-list>
+      <mat-list-item *ngFor="let course of courses" (click)="selected.emit(course)">
+        <h3 matLine>{{course.title | titlecase }}</h3>
+        <p matLine>
+          {{course.description}}
+        </p>
+
+        <button mat-icon-button color="warn" (click)="deleted.emit(course.id); $event.stopImmediatePropagation()">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </mat-list-item>
+    </mat-list>
+  </mat-card-content>
+</mat-card>

src/app/courses/courses-list/courses-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoursesListComponent } from './courses-list.component';
+
+describe('CoursesListComponent', () => {
+  let component: CoursesListComponent;
+  let fixture: ComponentFixture<CoursesListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CoursesListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoursesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/courses/courses-list/courses-list.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Course } from 'src/app/common/models/course';
+
+
+@Component({
+  selector: 'app-courses-list',
+  templateUrl: './courses-list.component.html',
+  styleUrls: ['./courses-list.component.scss'],
+})
+export class CoursesListComponent {
+  @Input() courses: Course[] = [];
+  @Output() selected = new EventEmitter();
+  @Output() deleted = new EventEmitter();
+}