Add navigation service and fix page components (DevExpress#4)

* Add navigation service and fix page components * Add type of navigation
marcwittke · Aug 31, 2018 · 7a78420 · 7a78420
1 parent ba56bf8
commit 7a78420
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 49 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { ProfileComponent, ProfileModule } from './pages/profile/profile.component';
-import { SettingsComponent, SettingsModule } from './pages/settings/settings.component';
-import { AboutComponent, AboutModule } from './pages/about/about.component';
+import { ProfileComponent } from './pages/profile/profile.component';
+import { SettingsComponent } from './pages/settings/settings.component';
+import { AboutComponent } from './pages/about/about.component'
 
 const routes: Routes = [{
     path: '',
@@ -26,12 +26,9 @@ const routes: Routes = [{
 
 @NgModule({
     imports: [
-        RouterModule,
-        RouterModule.forRoot(routes),
-        SettingsModule,
-        ProfileModule,
-        AboutModule
+        RouterModule.forRoot(routes)
     ],
-    exports: [ RouterModule ]
+    exports: [ RouterModule ],
+    declarations: [AboutComponent, SettingsComponent, ProfileComponent]
 })
 export class PagesRoutingModule {}
diff --git a/src/app/pages/about/about.component.ts b/src/app/pages/about/about.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     templateUrl: 'about.template.html'
@@ -7,9 +7,3 @@ import { Component, NgModule } from '@angular/core';
 export class AboutComponent {
     constructor() {}
 }
-
-@NgModule({
-    imports: [],
-    declarations: [AboutComponent]
-})
-export class AboutModule { }
diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     templateUrl: 'profile.template.html'
@@ -7,9 +7,3 @@ import { Component, NgModule } from '@angular/core';
 export class ProfileComponent {
     constructor() {}
 }
-
-@NgModule({
-    imports: [],
-    declarations: [ProfileComponent]
-})
-export class ProfileModule { }
diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     templateUrl: 'settings.template.html'
@@ -7,9 +7,3 @@ import { Component, NgModule } from '@angular/core';
 export class SettingsComponent {
     constructor() {}
 }
-
-@NgModule({
-    imports: [],
-    declarations: [SettingsComponent]
-})
-export class SettingsModule { }
diff --git a/src/app/services/navigation/navigation.service.spec.ts b/src/app/services/navigation/navigation.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NavigationService } from './navigation.service';
+
+describe('NavigationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NavigationService]
+    });
+  });
+
+  it('should be created', inject([NavigationService], (service: NavigationService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/services/navigation/navigation.service.ts b/src/app/services/navigation/navigation.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+
+export class Navigation {
+  text: string;
+  expanded?: boolean;
+  icon?: string;
+  path?: string;
+  items?: any;
+}
+
+let navigationData: Navigation[] = [
+  {
+    "text": "Home",
+    "expanded": true,
+    "icon": "home",
+    "items": [
+      {
+        "text": "Profile",
+        "path": "profile"
+      },
+      {
+        "text": "Settings",
+        "path": "settings"
+      }
+    ]
+  },
+  {
+    "text": "About",
+    "icon": "info",
+    "path": "about"
+  }
+]
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavigationService {
+  getNavigationData() {
+    return navigationData;
+  }
+}
diff --git a/src/app/shared/components/navigation-menu/navigation-menu.component.ts b/src/app/shared/components/navigation-menu/navigation-menu.component.ts
@@ -1,5 +1,6 @@
 import { Component, NgModule, Output, EventEmitter } from '@angular/core';
 import { DxTreeViewModule } from 'devextreme-angular/ui/tree-view';
+import { NavigationService, Navigation } from '../../../services/navigation/navigation.service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -10,30 +11,17 @@ import { Router } from '@angular/router';
             display: block;
             height: 100%;
         }
-    `]
+    `],
+    providers: [NavigationService]
 })
 export class NavigationMenuComponent {
     @Output() selectedItemChanged = new EventEmitter<string>();
 
-    menuItems = [{
-        text: 'Home',
-        expanded: true,
-        icon: 'home',
-        items: [{
-            text: 'Profile',
-            path: 'profile'
-        }, {
-            text: 'Settings',
-            path: 'settings'
-        }]
-    }, {
-        text: 'About',
-        icon: 'info',
-        path: 'about'
-    }
-  ];
+    menuItems: Navigation[];
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, navigationService: NavigationService) {
+      this.menuItems = navigationService.getNavigationData();
+  }
 
   onItemSelectionChanged(event) {
       this.selectedItemChanged.emit(event.itemData.text);