refactor(app): refactor forRoot & menu import

This commit is contained in:
Dmitry Nehaychik 2017-07-20 15:14:38 +03:00
parent d6cef06dcd
commit be69ccc058
6 changed files with 170 additions and 111 deletions

View file

@ -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 <ModuleWithProviders>{
ngModule: CoreModule,
providers: [
...NGA_CORE_PROVIDERS,
],
};
}
}

View file

@ -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 <ModuleWithProviders>{
ngModule: ThemeModule,
providers: [
...NGA_THEME_PROVIDERS,
],
};
}
}

View file

@ -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: [

View file

@ -2,102 +2,134 @@ import { NgaMenuItem } from '@akveo/nga-theme';
import { List } from 'immutable';
// TODO: refactor array styles
export const menuItems: List<NgaMenuItem> = 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<NgaMenuItem>([{
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<NgaMenuItem> = 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<NgaMenuItem>([
{
title: 'Tree',
link: '/pages/components/tree',
}, {
title: 'Toaster',
link: '/pages/components/toaster',
},
]),
}, {
title: 'Maps',
icon: 'ion ion-ios-location-outline',
children: List<NgaMenuItem>([{
title: 'Gmaps',
link: '/pages/maps/gmaps',
}, {
title: 'Leaflet',
link: '/pages/maps/leaflet',
}]),
}, {
title: 'Charts',
icon: 'ion ion-arrow-graph-up-right',
children: List<NgaMenuItem>([{
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<NgaMenuItem>([{
title: 'TinyMCE',
link: '/pages/editors/tinymce',
}, {
title: 'CKEditor',
link: '/pages/editors/ckeditor',
}]),
}, {
title: 'Forms',
icon: 'ion-compose',
children: List<NgaMenuItem>([{
title: 'Form Inputs',
link: '/pages/forms/inputs',
}, {
title: 'Form Layouts',
link: '/pages/forms/layouts',
}]),
}, {
title: 'Tables',
icon: 'ion-ios-grid-view',
children: List<NgaMenuItem>([{
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<NgaMenuItem>([
{
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<NgaMenuItem>([
{
title: 'Tree',
link: '/pages/components/tree',
}, {
title: 'Toaster',
link: '/pages/components/toaster',
},
]),
},
{
title: 'Maps',
icon: 'ion ion-ios-location-outline',
children: List<NgaMenuItem>([
{
title: 'Gmaps',
link: '/pages/maps/gmaps',
},
{
title: 'Leaflet',
link: '/pages/maps/leaflet',
},
]),
},
{
title: 'Charts',
icon: 'ion ion-arrow-graph-up-right',
children: List<NgaMenuItem>([
{
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<NgaMenuItem>([
{
title: 'TinyMCE',
link: '/pages/editors/tinymce',
},
{
title: 'CKEditor',
link: '/pages/editors/ckeditor',
},
]),
},
{
title: 'Forms',
icon: 'ion-compose',
children: List<NgaMenuItem>([
{
title: 'Form Inputs',
link: '/pages/forms/inputs',
},
{
title: 'Form Layouts',
link: '/pages/forms/layouts',
},
]),
},
{
title: 'Tables',
icon: 'ion-ios-grid-view',
children: List<NgaMenuItem>([
{
title: 'Smart Table',
link: '/pages/tables/smart-table',
},
]),
},
]);

View file

@ -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: `
<ngx-one-column-layout>
<nga-menu></nga-menu>
<nga-menu [items]="menu"></nga-menu>
<router-outlet></router-outlet>
</ngx-one-column-layout>
`,
})
export class PagesComponent {
menu = MENU_ITEMS;
}

View file

@ -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: [