Routing and Lazy Loading

client/src/app/app-routing.module.ts

@@ -1,7 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { ProductDetailsComponent } from './shop/product-details/product-details.component';
+import { ShopComponent } from './shop/shop.component';
+
+const routes: Routes = [
+  {path: '', component: HomeComponent},
+  {path: 'shop', loadChildren: ()=> import('./shop/shop.module').then(mod => mod.ShopModule)},
+  {path: '**', redirectTo: '', pathMatch: 'full'}
+];
 
-const routes: Routes = [];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

client/src/app/app.component.html

@@ -1,4 +1,4 @@
 <app-nav-bar></app-nav-bar>
 <div class="container" style="margin-top: 140px;">
-    <app-shop></app-shop>
+  <router-outlet></router-outlet>
 </div>

client/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CoreModule } from './core/core.module';
 import { ShopModule } from './shop/shop.module';
+import { HomeModule } from './home/home.module';
 
 @NgModule({
   declarations: [
@@ -18,7 +19,7 @@ import { ShopModule } from './shop/shop.module';
     BrowserAnimationsModule,
     HttpClientModule,
     CoreModule,
-    ShopModule
+    HomeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

client/src/app/core/core.module.ts

@@ -1,13 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
+import { RouterModule } from '@angular/router';
 
 
 
 @NgModule({
   declarations: [NavBarComponent],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   exports: [NavBarComponent]
 })

client/src/app/core/nav-bar/nav-bar.component.html

@@ -1,9 +1,9 @@
 <div class="d-flex flex-column flex-md-row align-items-center justify-content-between p-3 px-md-4 mb-3 bg-white border-bottom shadown-sm fixed-top">
-    <img src="/assets/images/logo.png" style="max-height: 70px;" alt="logo">
+    <img class="logo" src="/assets/images/logo.png" style="max-height: 70px;" alt="logo" routerLink="/">
     <nav class="me-3 my-md-0 mr-md-3 text-uppercase" style="font-size: larger;">
-        <a class="me-3 py-2 text-dark" href="#">Home</a>
+        <a class="me-3 py-2" [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
-        <a class="me-3 py-2 text-dark" href="#">Shop</a>
+        <a class="me-3 py-2" routerLink="/shop" routerLinkActive="active">Shop</a>
-        <a class="me-3 py-2 text-dark" href="#">Contact</a>
+        <a class="me-3 py-2">Contact</a>
     </nav>
     <div class="d-flex align-items-center">
         <a class="position-relative">

client/src/app/core/nav-bar/nav-bar.component.scss

@@ -10,3 +10,19 @@
     top: -12px;
     right: 5px;
 }
+
+a {
+  text-decoration: none;
+  color: #343a40;
+
+  &.active {
+    color: orange;
+  }
+}
+
+.logo {
+  cursor: pointer;
+  &:focus{
+    outline: none;
+  }
+}

client/src/app/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

client/src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

client/src/app/home/home.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HomeComponent } from './home.component';
+
+
+
+@NgModule({
+  declarations: [
+    HomeComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [HomeComponent]
+})
+export class HomeModule { }

client/src/app/shop/product-details/product-details.component.html

@@ -0,0 +1,22 @@
+<div class="row" *ngIf="product">
+  <div class="col-6">
+    <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid w-100">
+  </div>
+  <div class="col-6">
+    <h3>{{product.name}}</h3>
+    <p>{{product.price | currency}}</p>
+    <div class="d-flex justify-content-start align-items-center">
+      <i class="fa fa-minus-circle text-warning me-2" style="cursor: pointer; font-size: 2em"></i>
+      <span class="font-weight-bold" style="font-size: 1.5em;">2</span>
+      <i class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em"></i>
+      <button class="btn btn-outline-secondary btn-lg ms-4">Ad to Cart</button>
+    </div>
+  </div>
+  <div class="row mt-5">
+    <div class="col-12 ms-3">
+      <h4>Description</h4>
+      <p>{{product.description}}</p>
+    </div>
+  </div>
+</div>
+

client/src/app/shop/product-details/product-details.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IProduct } from 'src/app/shared/models/product';
+import { ShopService } from '../shop.service';
+
+@Component({
+  selector: 'app-product-details',
+  templateUrl: './product-details.component.html',
+  styleUrls: ['./product-details.component.scss']
+})
+export class ProductDetailsComponent implements OnInit {
+  product: IProduct;
+
+  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.loadProduct();
+  }
+
+  loadProduct(){
+    this.shopService.getProduct(+this.activatedRoute.snapshot.paramMap.get('id')).subscribe(
+      {
+        next: (product) => { this.product = product; },
+        error: (e: any) => { console.log(e); },
+        complete: () => { console.log('complete'); }
+      }
+    );
+  }
+
+}

client/src/app/shop/product-item/product-item.component.html

@@ -1,13 +1,13 @@
 <div class="card h-100 shadow-sm">
   <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light">
   <div class="card-body d-flex flex-column">
-    <a href="">
+    <a routerLink="/shop/{{product.id}}">
       <h6 class="text-uppercase">{{product.name}}</h6>
     </a>
     <span class="mb-2">{{product.price | currency}}</span>
       <div class="btn-group mt-auto">
         <button type="button" class="btn btn-sm btn-outline-secondary fa fa-shopping-cart me-2"></button>
-        <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+        <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-outline-secondary">View</button>
       </div>
   </div>
 </div>

client/src/app/shop/shop-routing.module.ts

@@ -1,12 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { ShopComponent } from './shop.component';
+import { ProductDetailsComponent } from './product-details/product-details.component';
 
-
+const routes: Routes = [
+  {path: '', component: ShopComponent},
+  {path: ':id', component: ProductDetailsComponent},
+]
 
 @NgModule({
   declarations: [],
   imports: [
-    CommonModule
+    RouterModule.forChild(routes)
-  ]
+  ],
+  exports: [RouterModule]
 })
 export class ShopRoutingModule { }

client/src/app/shop/shop.module.ts

@@ -3,18 +3,21 @@ import { CommonModule } from '@angular/common';
 import { ShopComponent } from './shop.component';
 import { ProductItemComponent } from './product-item/product-item.component';
 import { SharedModule } from '../shared/shared.module';
+import { ProductDetailsComponent } from './product-details/product-details.component';
+import { ShopRoutingModule } from './shop-routing.module';
 
 
 
 @NgModule({
   declarations: [
     ShopComponent,
-    ProductItemComponent
+    ProductItemComponent,
+    ProductDetailsComponent
   ],
   imports: [
     CommonModule,
-    SharedModule
+    SharedModule,
-  ],
+    ShopRoutingModule
-  exports: [ShopComponent]
+  ]
 })
 export class ShopModule { }

client/src/app/shop/shop.service.ts

@@ -5,6 +5,7 @@ import { IPagination } from '../shared/models/pagination';
 import { IType } from '../shared/models/producttype';
 import { map } from 'rxjs/operators'
 import { ShopParams } from '../shared/models/shopparams';
+import { IProduct } from '../shared/models/product';
 
 @Injectable({
   providedIn: 'root'
@@ -41,6 +42,10 @@ export class ShopService {
       );
   }
 
+  getProduct(id: number){
+    return this.http.get<IProduct>(this.baseURL + 'products/' + id);
+  }
+
   getBrands(){
     return this.http.get<IBrand[]>(this.baseURL + 'products/brands');
   }