Refractoring

client/src/app/app.component.html

@@ -1,9 +1,5 @@
 <app-nav-bar></app-nav-bar>
 <div class="container" style="margin-top: 140px;">
     <h1>Welcome to {{title}}</h1>
-    <ul>
+    <app-shop></app-shop>
-        <li class="list-unstyled" *ngFor="let product of products">
-            {{product.name}}
-        </li>
-    </ul>
 </div>

client/src/app/app.component.ts

@@ -1,7 +1,4 @@
-import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import { IPagination } from './models/pagination';
-import { IProduct } from './models/product';
 
 @Component({
   selector: 'app-root',
@@ -10,17 +7,8 @@ import { IProduct } from './models/product';
 })
 export class AppComponent implements OnInit {
   title = 'E-Commerce';
-  products: IProduct[];
 
-  constructor(private http: HttpClient) {}
+  constructor() {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
-    this.http.get('https://localhost:5001/api/products?pageSize=50').subscribe(
-      {
-        next: (response: IPagination) => { this.products = response.data; },
-        error: (e: any) => { console.log(e); },
-        complete: () => { console.log('complete'); }
-      }
-    );
-  }
 }

client/src/app/app.module.ts

@@ -5,18 +5,20 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NavBarComponent } from './nav-bar/nav-bar.component';
+import { CoreModule } from './core/core.module';
+import { ShopModule } from './shop/shop.module';
 
 @NgModule({
   declarations: [
-    AppComponent,
+    AppComponent
-    NavBarComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    HttpClientModule
+    HttpClientModule,
+    CoreModule,
+    ShopModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavBarComponent } from './nav-bar/nav-bar.component';
+
+
+
+@NgModule({
+  declarations: [NavBarComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [NavBarComponent]
+})
+export class CoreModule { }

client/src/app/shared/shared.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class SharedModule { }

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class ShopRoutingModule { }

client/src/app/shop/shop.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li class="list-unstyled" *ngFor="let product of products">
+    {{product.name}}
+  </li>
+</ul>

client/src/app/shop/shop.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { IProduct } from '../shared/models/product';
+import { ShopService } from './shop.service';
+
+@Component({
+  selector: 'app-shop',
+  templateUrl: './shop.component.html',
+  styleUrls: ['./shop.component.scss']
+})
+export class ShopComponent implements OnInit {
+
+  products: IProduct[];
+
+  constructor(private shopService: ShopService) { }
+
+  ngOnInit(): void {
+    this.shopService.getProducts().subscribe(
+      {
+        next: (response) => { this.products = response.data; },
+        error: (e: any) => { console.log(e); },
+        complete: () => { console.log('complete'); }
+      }
+    );
+  }
+
+}

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

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

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

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { IPagination } from '../shared/models/pagination';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShopService {
+  baseURL = 'https://localhost:5001/api/'
+
+  constructor(private http: HttpClient) { }
+
+  getProducts(){
+    return this.http.get<IPagination>(this.baseURL + 'products');
+  }
+}