Folderfilebestpractice

src/app/components/account-menu.ts → src/app/account-menu.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'account-menu',
-  styleUrls: ['../styles/account-menu.css'],
+  styleUrls: ['./account-menu.component.css'],
   template: `
     <div class="account">
       <span class="welcome" *ngIf="user">

src/app/app-routing.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CoursesComponent } from './components/courses';
-import { RegisterComponent } from './components/sign-in';
-import { SignInComponent } from './components/sign-in';
+import { catalogComponent } from './catalog/catalog.component';
+import { RegisterComponent } from './users/register.component';
+import { SignInComponent } from './users/sign-in.component';
 
 const routes: Routes = [
-  { path: 'catalog', component: CoursesComponent, },
+  { path: 'catalog', component: catalogComponent, },
   { path: 'users/register', component: RegisterComponent, },
   { path: 'users/sign-in', component: SignInComponent, },
   { path: '', redirectTo: '/catalog', pathMatch: 'full' },

src/app/app.module.ts

@@ -3,20 +3,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms'
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './components/app';
-import { NavBarComponent } from './components/nav-bar';
-import { CoursesComponent } from "./components/courses";
-import { RegisterComponent } from "./components/sign-in";
-import { SignInComponent } from "./components/sign-in";
-import { LoadingComponent } from "./components/loading-spinner";
-import { DataRepositoryService } from "./services/data-repository"
-import { AccountMenuComponent } from "./components/account-menu";
+import { AppComponent } from './app.component';
+import { NavBarComponent } from './nav-bar.component';
+import { catalogComponent } from "./catalog/catalog.component";
+import { RegisterComponent } from "./users/register.component";
+import { SignInComponent } from "./users/sign-in.component";
+import { LoadingComponent } from "./components/loading-spinner.component";
+import { DataRepositoryService } from "./services/data-repository.service"
+import { AccountMenuComponent } from "./account-menu.component";
 
 @NgModule({
   declarations: [
     AppComponent,
     NavBarComponent,
-    CoursesComponent,
+    catalogComponent,
     RegisterComponent,
     SignInComponent,
     LoadingComponent,

src/app/templates/catalog.html → src/app/catalog/catalog.component.html

@@ -1,3 +1,7 @@
+<!--
+  1. filename best practice.
+  2. folder best practice
+-->
 <div class="departments">
   <button (click)="applyFilter('CH')">Charms</button>
   <button (click)="applyFilter('PO')">Potions</button>
@@ -35,4 +39,4 @@
       </tr>
     </tbody>
   </table>
-</div>
+</div>

src/app/components/courses.ts → src/app/catalog/catalog.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 
-import { DataRepositoryService } from "../services/data-repository"
-import { IClass } from '../services/class.model';
+import { DataRepositoryService } from "../services/data-repository.service"
+import { IClass } from './class.model';
 
 @Component({
-  styleUrls: ['../styles/catalog.css'],
-  templateUrl: '../templates/catalog.html'
+  styleUrls: ['./catalog.component.css'],
+  templateUrl: './catalog.component.html'
 })
-export class CoursesComponent {
+export class catalogComponent {
   classes: IClass[] = [];
   visibleClasses: IClass[] = [];
 

src/app/components/nav-bar.ts → src/app/nav-bar.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
-import { DataRepositoryService } from "../services/data-repository";
+import { DataRepositoryService } from "../app/services/data-repository.service";
 
 @Component({
   selector: 'nav-bar',
-  styleUrls: [`../styles/nav-bar.css`],
+  styleUrls: [`./nav-bar.component.css`],
   template: `
     <div class="nav-bar">
       <img class="logo" src="/assets/images/whitebeard-logo.png" alt="Whitebeard Logo" />

src/app/services/data-repository.ts → src/app/services/data-repository.service.ts

@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject, EMPTY, throwError, timer } from 'rxjs';
 
 
-import { IUser } from '../services/user.model';
-import { IClass, ICourse } from '../services/class.model';
+import { IUser } from '../users/user.model';
+import { IClass, ICourse } from '../catalog/class.model';
 
 @Injectable()
 export class DataRepositoryService {

src/app/users/register.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router'
+
+import { DataRepositoryService } from '../services/data-repository.service'
+import { IUser } from './user.model';
+
+
+
+@Component({
+  styleUrls: ['./register.component.css'],
+  templateUrl: './register.component.html'
+})
+
+export class RegisterComponent {
+  registerForm: FormGroup;
+  firstName: FormControl;
+  lastName: FormControl;
+  email: FormControl;
+  password: FormControl;
+  saving: boolean = false;
+
+  constructor(private router: Router, private dataRepository: DataRepositoryService) {
+    this.firstName = new FormControl('', Validators.required);
+    this.lastName = new FormControl('', Validators.required);
+    this.email = new FormControl('', Validators.required);
+    this.password = new FormControl('', Validators.required);
+
+    this.registerForm = new FormGroup({
+      firstName: this.firstName,
+      lastName: this.lastName,
+      email: this.email,
+      password: this.password
+    });
+  }
+
+
+  registerUser(user: IUser) {
+    this.saving = true;
+    this.dataRepository.saveUser(user)
+      .subscribe({
+        error: () => this.saving = false,
+        complete: () => this.router.navigate(['/catalog'])
+      });
+  }
+
+  cancel() {
+    this.router.navigate(['/']);
+  }
+}

src/app/components/sign-in.ts → src/app/users/sign-in.component.ts

@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router'
+import { DataRepositoryService } from '../services/data-repository.service'
 
-import { DataRepositoryService } from '../services/data-repository'
-import { IUser } from '../services/user.model';
 
 @Component({
   styles: [`
@@ -93,44 +91,3 @@ export class SignInComponent {
   }
 }
 
-@Component({
-  styleUrls: ['../styles/register.css'],
-  templateUrl: '../templates/register.html'
-})
-
-export class RegisterComponent {
-  registerForm: FormGroup;
-  firstName: FormControl;
-  lastName: FormControl;
-  email: FormControl;
-  password: FormControl;
-  saving: boolean = false;
-
-  constructor(private router: Router, private dataRepository: DataRepositoryService) {
-    this.firstName = new FormControl('', Validators.required);
-    this.lastName = new FormControl('', Validators.required);
-    this.email = new FormControl('', Validators.required);
-    this.password = new FormControl('', Validators.required);
-
-    this.registerForm = new FormGroup({
-      firstName: this.firstName,
-      lastName: this.lastName,
-      email: this.email,
-      password: this.password
-    });
-  }
-
-
-  registerUser(user: IUser) {
-    this.saving = true;
-    this.dataRepository.saveUser(user)
-      .subscribe({
-        error: () => this.saving = false,
-        complete: () => this.router.navigate(['/catalog'])
-      });
-  }
-
-  cancel() {
-    this.router.navigate(['/']);
-  }
-}