From be69ccc058a43fb36b005f1909904c97aaa549cf Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Thu, 20 Jul 2017 15:14:38 +0300 Subject: [PATCH] refactor(app): refactor forRoot & menu import --- src/app/@core/core.module.ts | 16 ++- src/app/@theme/theme.module.ts | 21 ++- src/app/app.module.ts | 3 + src/app/pages/pages-menu.ts | 226 ++++++++++++++++++------------- src/app/pages/pages.component.ts | 5 +- src/app/pages/pages.module.ts | 10 -- 6 files changed, 170 insertions(+), 111 deletions(-) diff --git a/src/app/@core/core.module.ts b/src/app/@core/core.module.ts index 7440131d..fe00bd77 100644 --- a/src/app/@core/core.module.ts +++ b/src/app/@core/core.module.ts @@ -1,7 +1,12 @@ -import { NgModule, Optional, SkipSelf } from '@angular/core'; +import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; import { CommonModule } from '@angular/common'; import { throwIfAlreadyLoaded } from './module-import-guard'; +import { DataModule } from './data/data.module'; + +const NGA_CORE_PROVIDERS = [ + ...DataModule.forRoot().providers, +]; @NgModule({ imports: [ @@ -13,4 +18,13 @@ export class CoreModule { constructor(@Optional() @SkipSelf() parentModule: CoreModule) { throwIfAlreadyLoaded(parentModule, 'CoreModule'); } + + static forRoot(): ModuleWithProviders { + return { + ngModule: CoreModule, + providers: [ + ...NGA_CORE_PROVIDERS, + ], + }; + } } diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 8ad23d68..e277d2ef 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -1,8 +1,9 @@ -import { NgModule } from '@angular/core'; +import { ModuleWithProviders, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { + NgaThemeModule, NgaCardModule, NgaLayoutModule, NgaTabsetModule, @@ -45,6 +46,7 @@ const NGA_MODULES = [ NgaUserModule, NgaActionsModule, NgaSearchModule, + NgaSidebarModule, ]; const COMPONENTS = [ @@ -61,11 +63,17 @@ const PIPES = [ RoundPipe, ]; +const NGA_THEME_PROVIDERS = [ + ...NgaThemeModule.forRoot({ name: 'cosmic' }).providers, + ...NgaSidebarModule.forRoot().providers, + ...NgaSidebarModule.forRoot().providers, + ...NgaMenuModule.forRoot().providers, +]; + @NgModule({ imports: [ ...BASE_MODULES, ...NGA_MODULES, - NgaSidebarModule.forRoot(), ], exports: [ ...BASE_MODULES, @@ -79,4 +87,13 @@ const PIPES = [ ], }) export class ThemeModule { + + static forRoot(): ModuleWithProviders { + return { + ngModule: ThemeModule, + providers: [ + ...NGA_THEME_PROVIDERS, + ], + }; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 29b6568f..d24f2c36 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import { CoreModule } from './@core/core.module'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; +import { ThemeModule } from './@theme/theme.module'; @NgModule({ declarations: [AppComponent], @@ -22,6 +23,8 @@ import { AppRoutingModule } from './app-routing.module'; HttpModule, AppRoutingModule, CoreModule, + ThemeModule.forRoot(), + CoreModule.forRoot(), ], bootstrap: [AppComponent], providers: [ diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 392df887..47e858d3 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -2,102 +2,134 @@ import { NgaMenuItem } from '@akveo/nga-theme'; import { List } from 'immutable'; -// TODO: refactor array styles -export const menuItems: List = List([{ - title: 'Dashboard', - icon: 'ion ion-ios-home-outline', - link: '/pages/dashboard', - home: true, -}, { - title: 'FEATURES', - group: true, -}, { - title: 'UI Features', - icon: 'ion ion-ios-keypad-outline', - link: '/pages/ui-features', - children: List([{ - title: 'Buttons', - link: '/pages/ui-features/buttons', - }, { - title: 'Grid', - link: '/pages/ui-features/grid', - }, { - title: 'Icons', - link: '/pages/ui-features/icons', - }, { - title: 'Modals', - link: '/pages/ui-features/modals', - }, { - title: 'Typography', - link: '/pages/ui-features/typography', - }, { - title: 'Animated Searches', - link: '/pages/ui-features/search-fields', +export const MENU_ITEMS: List = List([ + { + title: 'Dashboard', + icon: 'ion ion-ios-home-outline', + link: '/pages/dashboard', + home: true, }, { - title: 'Tabs', - link: '/pages/ui-features/tabs', - }]), -}, { - title: 'Components', - icon: 'ion ion-ios-gear-outline', - children: List([ - { - title: 'Tree', - link: '/pages/components/tree', - }, { - title: 'Toaster', - link: '/pages/components/toaster', - }, - ]), -}, { - title: 'Maps', - icon: 'ion ion-ios-location-outline', - children: List([{ - title: 'Gmaps', - link: '/pages/maps/gmaps', - }, { - title: 'Leaflet', - link: '/pages/maps/leaflet', - }]), -}, { - title: 'Charts', - icon: 'ion ion-arrow-graph-up-right', - children: List([{ - title: 'Echarts', - link: '/pages/charts/echarts', - }, { - title: 'D3', - link: '/pages/charts/d3', - }, { - title: 'Charts.js', - link: '/pages/charts/chartjs', - }]), -}, { - title: 'Editors', - icon: 'ion ion-edit', - children: List([{ - title: 'TinyMCE', - link: '/pages/editors/tinymce', - }, { - title: 'CKEditor', - link: '/pages/editors/ckeditor', - }]), -}, { - title: 'Forms', - icon: 'ion-compose', - children: List([{ - title: 'Form Inputs', - link: '/pages/forms/inputs', - }, { - title: 'Form Layouts', - link: '/pages/forms/layouts', - }]), -}, { - title: 'Tables', - icon: 'ion-ios-grid-view', - children: List([{ - title: 'Smart Table', - link: '/pages/tables/smart-table', - }]), -}]); + title: 'FEATURES', + group: true, + }, + { + title: 'UI Features', + icon: 'ion ion-ios-keypad-outline', + link: '/pages/ui-features', + children: List([ + { + title: 'Buttons', + link: '/pages/ui-features/buttons', + }, + { + title: 'Grid', + link: '/pages/ui-features/grid', + }, + { + title: 'Icons', + link: '/pages/ui-features/icons', + }, + { + title: 'Modals', + link: '/pages/ui-features/modals', + }, + { + title: 'Typography', + link: '/pages/ui-features/typography', + }, + { + title: 'Animated Searches', + link: '/pages/ui-features/search-fields', + }, + { + title: 'Tabs', + link: '/pages/ui-features/tabs', + }, + ]), + }, + { + title: 'Components', + icon: 'ion ion-ios-gear-outline', + children: List([ + { + title: 'Tree', + link: '/pages/components/tree', + }, { + title: 'Toaster', + link: '/pages/components/toaster', + }, + ]), + }, + { + title: 'Maps', + icon: 'ion ion-ios-location-outline', + children: List([ + { + title: 'Gmaps', + link: '/pages/maps/gmaps', + }, + { + title: 'Leaflet', + link: '/pages/maps/leaflet', + }, + ]), + }, + { + title: 'Charts', + icon: 'ion ion-arrow-graph-up-right', + children: List([ + { + title: 'Echarts', + link: '/pages/charts/echarts', + }, + { + title: 'D3', + link: '/pages/charts/d3', + }, + { + title: 'Charts.js', + link: '/pages/charts/chartjs', + }, + ]), + }, + { + title: 'Editors', + icon: 'ion ion-edit', + children: List([ + { + title: 'TinyMCE', + link: '/pages/editors/tinymce', + }, + { + title: 'CKEditor', + link: '/pages/editors/ckeditor', + }, + ]), + }, + { + title: 'Forms', + icon: 'ion-compose', + children: List([ + { + title: 'Form Inputs', + link: '/pages/forms/inputs', + }, + + { + title: 'Form Layouts', + link: '/pages/forms/layouts', + }, + ]), + }, + { + title: 'Tables', + icon: 'ion-ios-grid-view', + children: List([ + { + title: 'Smart Table', + link: '/pages/tables/smart-table', + }, + ]), + }, +]); diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 82baa2d0..0a6d9698 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,15 +1,18 @@ import { Component } from '@angular/core'; import 'style-loader!../@theme/styles/styles.scss'; +import { MENU_ITEMS } from './pages-menu'; @Component({ selector: 'ngx-pages', template: ` - + `, }) export class PagesComponent { + + menu = MENU_ITEMS; } diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 1ea3622a..3492c5d2 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -1,14 +1,9 @@ import { NgModule } from '@angular/core'; -import { NgaMenuModule, NgaSidebarModule, NgaThemeModule } from '@akveo/nga-theme'; - -import { menuItems } from './pages-menu'; - import { PagesComponent } from './pages.component'; import { DashboardModule } from './dashboard/dashboard.module'; import { PagesRoutingModule } from './pages-routing.module'; import { ThemeModule } from '../@theme/theme.module'; -import { DataModule } from '../@core/data/data.module'; const PAGES_COMPONENTS = [ PagesComponent, @@ -16,13 +11,8 @@ const PAGES_COMPONENTS = [ @NgModule({ imports: [ - // TODO: why here? review the modules structure - NgaThemeModule.forRoot({ name: 'cosmic' }), - NgaSidebarModule.forRoot(), - NgaMenuModule.forRoot({ items: menuItems }), PagesRoutingModule, ThemeModule, - DataModule.forRoot(), DashboardModule, ], declarations: [