router setting

src/app/app-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {ModuleDashboardComponent} from './module/module-dashboard/module-dashboard.component';
+import {ModuleUserComponent} from './module/module-user/module-user.component';
+import {ModuleSettingComponent} from './module/module-setting/module-setting.component';
+import {ModuleReportComponent} from './module/module-report/module-report.component';
+
+const router:Routes = [
+  {path:"",redirectTo:"dashboard",pathMatch:"full"},
+  {path:"dashboard",component:ModuleDashboardComponent},
+  {path:"user",component:ModuleUserComponent},
+  {path:"setting",component:ModuleSettingComponent},
+  {path:"report",component:ModuleReportComponent}
+]
+
+
+@NgModule({
+  
+  imports: [
+    RouterModule.forRoot(router)
+  ],
+  exports: [RouterModule]
+})
+
+export class AppRoutingModule { }

src/app/app.component.html

@@ -22,17 +22,14 @@
   <div id="app-main" class="pure-u-4-5">
     <app-main>
       <div id="app-base-container">
-        <p>Part 4</p>
+        <p>Part 4.5</p>
         <ul>
           <li>
-            Buat component module sesuai dengan menu disamping <br />
-            <code>ng generate component "module/module-dashboard"</code><br />
-            <code>ng generate component "module/module-user"</code><br />
-            <code>ng generate component "module/module-setting"</code><br />
-            <code>ng generate component "module/module-report"</code><br />
+            Install router <br />
+            <code>ng generate module app-routing --flat --module=app</code>
           </li>
           <li>
-            Setup angular router untuk membuat link yang dapat menampilkan tiap component sesuai menu yang dipilih
+            Configure router
           </li>
         </ul>
       </div>

src/app/app.module.ts

@@ -6,6 +6,11 @@ import { HeaderComponent } from './layout/header/header.component';
 import { SideBarComponent } from './layout/side-bar/side-bar.component';
 import { MainComponent } from './layout/main/main.component';
 import { FooterComponent } from './layout/footer/footer.component';
+import { ModuleDashboardComponent } from './module/module-dashboard/module-dashboard.component';
+import { ModuleUserComponent } from './module/module-user/module-user.component';
+import { ModuleSettingComponent } from './module/module-setting/module-setting.component';
+import { ModuleReportComponent } from './module/module-report/module-report.component';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   declarations: [
@@ -13,10 +18,15 @@ import { FooterComponent } from './layout/footer/footer.component';
     HeaderComponent,
     SideBarComponent,
     MainComponent,
-    FooterComponent
+    FooterComponent,
+    ModuleDashboardComponent,
+    ModuleUserComponent,
+    ModuleSettingComponent,
+    ModuleReportComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/module/module-dashboard/module-dashboard.component.html

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

src/app/module/module-dashboard/module-dashboard.component.spec.ts

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

src/app/module/module-dashboard/module-dashboard.component.ts

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

src/app/module/module-report/module-report.component.html

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

src/app/module/module-report/module-report.component.spec.ts

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

src/app/module/module-report/module-report.component.ts

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

src/app/module/module-setting/module-setting.component.html

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

src/app/module/module-setting/module-setting.component.spec.ts

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

src/app/module/module-setting/module-setting.component.ts

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

src/app/module/module-user/module-user.component.html

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

src/app/module/module-user/module-user.component.spec.ts

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

src/app/module/module-user/module-user.component.ts

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