Modules explained

Author: abhishekrathore

src/app/app.component.html

@@ -1,4 +1,4 @@
-<h1>cart : {{cart.length}}
+<h1>cart : {{cart.length}} {{title | shorten :3}}
 <!-- <app-home></app-home>  -->
 <button class="btn btn-outline-primary" routerLink="/">Home</button>
 <button class="btn btn-outline-primary" routerLink="/cart">Cart</button>

src/app/app.module.ts

@@ -1,34 +1,28 @@
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppComponent } from './app.component';
-import { CartComponent } from './cart/cart.component';
-import { ShortenPipe } from './shorten.pipe';
 import { HomeComponent } from './home/home.component';
 import { RouterModule, Routes } from '@angular/router';
-import { ProductComponent } from './product/product.component';
+import { CartModule } from './cart/cart.module';
+import { SharedModule } from './shared/shared.module';
+import { DataService } from './data.service';
 
 
 const routes:Routes = [
   {path:'',component:HomeComponent},
-  {path:'cart',component:CartComponent},
-  {path:'product/:fruit',component:ProductComponent},
 ]
 @NgModule({
   declarations: [
     AppComponent,
-    CartComponent,
-    ShortenPipe,
     HomeComponent,
-    ProductComponent
   ],
   imports: [
     BrowserModule,
-    FormsModule,
-    RouterModule.forRoot(routes)
+    RouterModule.forRoot(routes),
+    CartModule,
+    SharedModule
   ],
-  providers: [],
+  providers: [DataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/cart/cart.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CartComponent } from './components/cart/cart.component';
+import { ProductComponent } from './components/product/product.component';
+import { RouterModule, Routes } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../shared/shared.module';
+
+const routes : Routes = [
+  {path:'cart',component:CartComponent},
+  {path:'product/:fruit',component:ProductComponent},
+]
+
+@NgModule({
+  declarations: [
+    CartComponent,
+    ProductComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule.forRoot(routes),
+    SharedModule
+  ]
+})
+export class CartModule { }

src/app/cart/cart.component.css src/app/cart/components/cart/cart.component.css

@@ -19,7 +19,7 @@ <h1 class="grey">{{componentName}}</h1>
         (click)="gotoProduct(it.name)">
         <!-- routerLink="/product/{{it.name}}"> -->
 
-           {{i+1}}. {{it.name | shorten: 4 | uppercase}} ({{it.time | date : 'dd/MMM'}})
+           {{i+1}}. {{it.name | shorten:3 | uppercase}} ({{it.time | date : 'dd/MMM'}})
         </li>
     </ul>
     <ng-template #alert>

src/app/cart/cart.component.html src/app/cart/components/cart/cart.component.html

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit,EventEmitter, Output, OnChanges } from '@angular/core';
 import { Router } from '@angular/router';
-import { DataService } from '../data.service';
+import { DataService } from '../../../data.service';
 
 @Component({
   selector: 'app-cart',

src/app/cart/cart.component.spec.ts src/app/cart/components/cart/cart.component.spec.ts

@@ -1,8 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class DataService {
   cart = [];
   name='dummyName';

src/app/cart/cart.component.ts src/app/cart/components/cart/cart.component.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ShortenPipe } from './pipes/shorten.pipe';
+
+
+
+@NgModule({
+  declarations: [ShortenPipe],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+    ShortenPipe
+  ]
+})
+export class SharedModule { }