chore: base layout

src/app/@core/core.module.ts

@@ -0,0 +1,16 @@
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { throwIfAlreadyLoaded } from './module-import-guard';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: []
+})
+export class CoreModule {
+  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+}

src/app/@core/module-import-guard.ts

@@ -0,0 +1,5 @@
+export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
+  if (parentModule) {
+    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
+  }
+}

src/app/@theme/layouts/index.ts

@@ -0,0 +1 @@
+export * from './one-coll-layout/one-coll.layout';

src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'one-coll-layout',
+  template: `
+    <nga-layout>
+      <nga-layout-header fixed></nga-layout-header>
+      <nga-sidebar fixed></nga-sidebar>
+      <nga-layout-column>
+        <ng-content></ng-content>
+      </nga-layout-column>
+      <nga-layout-footer fixed></nga-layout-footer>
+    </nga-layout>
+  `,
+})
+export class RootLayoutComponent {
+  constructor() { }
+}

src/app/@theme/styles/default.theme.scss

@@ -0,0 +1,3 @@
+@import '~@nga/theme/styles/themes/nga.theme.default';
+
+@include nga-theme();

src/app/@theme/styles/styles.scss

@@ -0,0 +1 @@
+@import "default.theme";

src/app/@theme/theme.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import {
+  NgaCardModule,
+  NgaLayoutModule,
+  NgaTabsetModule,
+  NgaRouteTabsetModule,
+  NgaSidebarModule,
+  NgaMenuModule
+} from '@nga/theme';
+
+import { RootLayoutComponent } from './layouts';
+
+const BASE_MODULES = [
+  CommonModule,
+  FormsModule,
+  ReactiveFormsModule
+];
+
+const NGA_MODULES = [
+  NgaCardModule,
+  NgaLayoutModule,
+  NgaTabsetModule,
+  NgaRouteTabsetModule,
+  NgaSidebarModule,
+  NgaMenuModule
+];
+
+const LAYOUT_COMPONENTS = [
+  RootLayoutComponent
+];
+
+@NgModule({
+  imports: [
+    ...BASE_MODULES,
+    ...NGA_MODULES,
+  ],
+  exports: [
+    ...BASE_MODULES,
+    ...NGA_MODULES,
+    ...LAYOUT_COMPONENTS
+  ],
+  declarations: [
+    ...LAYOUT_COMPONENTS
+  ]
+})
+export class ThemeModule {
+}

src/app/app-routing.module.ts

@@ -0,0 +1,20 @@
+import { ExtraOptions, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+const routes: Routes = [
+  // {path: 'admin'}
+  {path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule'},
+  {path: '', redirectTo: 'pages', pathMatch: 'full'},
+  {path: '**', redirectTo: 'pages'}
+];
+
+const config: ExtraOptions = {
+  useHash: true
+};
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, config)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -1,11 +0,0 @@
-<nga-card status="danger">
-  <nga-card-header>
-    <span>Header</span>
-  </nga-card-header>
-  <nga-card-body>
-    <span>Body</span>
-  </nga-card-body>
-  <nga-card-footer>
-    <span>Footer</span>
-  </nga-card-footer>
-</nga-card>

src/app/app.component.scss

@@ -1,9 +1 @@
-/**
+@import "@theme/styles/styles";
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-@import '~@nga/theme/styles/themes/nga.theme.default';
-
-@include nga-theme();

src/app/app.component.ts

@@ -6,10 +6,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'nga-app-root',
+  selector: 'app',
-  templateUrl: './app.component.html',
+  template: '<router-outlet></router-outlet>',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'app works!';
 }

src/app/app.module.ts

@@ -5,37 +5,31 @@
  */
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+
 import {
-  NgaThemeModule,
-  NgaCardModule,
-  NgaLayoutModule,
   NgaMenuModule,
-  NgaRouteTabsetModule,
   NgaSidebarModule,
-  NgaTabsetModule,
+  NgaThemeModule
 } from '@nga/theme';
 
 import { AppComponent } from './app.component';
+import { CoreModule } from './@core/core.module';
+import { PagesModule } from './pages/pages.module';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent,
-  ],
   imports: [
     BrowserModule,
-    FormsModule,
     HttpModule,
-    NgaThemeModule,
+    NgaThemeModule.forRoot(),
-    NgaCardModule,
+    NgaSidebarModule.forRoot(),
-    NgaLayoutModule,
+    AppRoutingModule,
-    NgaMenuModule,
+    CoreModule,
-    NgaRouteTabsetModule,
+    PagesModule
-    NgaSidebarModule,
-    NgaTabsetModule,
   ],
-  providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/pages/dashboard/dashboard.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent {
+}

src/app/pages/pages-routing.module.ts

@@ -0,0 +1,23 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { PagesComponent } from './pages.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PagesComponent,
+    children: [
+      {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
+      {path: 'dashboard', component: DashboardComponent}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PagesRoutingModule {
+}

src/app/pages/pages.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'pages',
+  template: `
+    <one-coll-layout>
+      <router-outlet></router-outlet>
+    </one-coll-layout>
+  `
+})
+export class PagesComponent {
+}

src/app/pages/pages.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+
+import { PagesComponent } from './pages.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { PagesRoutingModule } from './pages-routing.module';
+import { ThemeModule } from '../@theme/theme.module';
+
+@NgModule({
+  imports: [
+    PagesRoutingModule,
+    ThemeModule
+  ],
+  declarations: [
+    PagesComponent,
+    DashboardComponent
+  ]
+})
+export class PagesModule {
+}

src/index.html

@@ -2,13 +2,13 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>@nga/framework</title>
+  <title>NgX Admin Demo</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <nga-app-root>Loading...</nga-app-root>
+  <app>Loading...</app>
 </body>
 </html>