Skip to content
Permalink
Browse files

Create shared module and layouts module

  • Loading branch information...
Stivin committed Feb 12, 2018
1 parent 8d60cfe commit 39ffe26aea124a9c097b03fa95cf0695bc116519
@@ -20,7 +20,8 @@
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
"styles.scss",
"styles/main.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
@@ -1,12 +1 @@
<nav>
<ul>
<li><button (click)="changeLang('en')">EN</button></li>
<li><button (click)="changeLang('ru')">RU</button></li>
</ul>
<ul>
<li><a [routerLink]="['']" [routerLinkActive]="['router-link-active']">home</a></li>
<li><a [routerLink]="['/mock']" [routerLinkActive]="['router-link-active']">mock</a></li>
<li><a [routerLink]="['/back']" [routerLinkActive]="['router-link-active']">back http</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
@@ -14,6 +14,7 @@ import { PageTitlePositioning } from '@ngx-meta/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { PrebootModule } from 'preboot';
import { SharedModule } from '@shared/shared.module';

export function metaFactory(): MetaLoader {
const setting: MetaSettings = {
@@ -50,6 +51,7 @@ export function httpLoaderFactory(http: HttpClient) {
AppRoutes,
TransferHttpModule,
BrowserAnimationsModule,
SharedModule.forRoot(),
MetaModule.forRoot({
provide: MetaLoader,
useFactory: metaFactory,
@@ -1,27 +1,32 @@
import { Routes, RouterModule } from '@angular/router';
import { MetaGuard } from '@ngx-meta/core';

import { WrapperComponent } from '@shared/layouts/wrapper/wrapper.component';

const routes: Routes = [
{
path: '', loadChildren: './home/home.module#HomeModule',
data: {
// for override default meta
meta: {
title: 'home title',
override: true,
description: 'home description'
}
},
// need for default meta
canActivateChild: [MetaGuard],
},
// without meta
{ path: 'mock', loadChildren: './mock-server-browser/mock-server-browser.module#MockServerBrowserModule' },
// with meta
{ path: 'back', loadChildren: './transfer-back/transfer-back.module#TransferBackModule', canActivateChild: [MetaGuard]},
// 404
{ path: '404', loadChildren: './not-found/not-found.module#NotFoundModule' },
{ path: '**', redirectTo: '404', pathMatch: 'full' }
path: '', component: WrapperComponent, children: [
{
path: '', loadChildren: './home/home.module#HomeModule',
data: {
// for override default meta
meta: {
title: 'home title',
override: true,
description: 'home description'
}
},
// need for default meta
canActivateChild: [MetaGuard],
},
// without meta
{ path: 'mock', loadChildren: './mock-server-browser/mock-server-browser.module#MockServerBrowserModule' },
// with meta
{ path: 'back', loadChildren: './transfer-back/transfer-back.module#TransferBackModule', canActivateChild: [MetaGuard] },
// 404
{ path: '**', loadChildren: './not-found/not-found.module#NotFoundModule' },
]
}
];
// must use {initialNavigation: 'enabled'}) - for one load page, without reload
export const AppRoutes = RouterModule.forRoot(routes, { initialNavigation: 'enabled' });
@@ -0,0 +1,4 @@
<ul>
<li><button (click)="changeLang('en')">EN</button></li>
<li><button (click)="changeLang('ru')">RU</button></li>
</ul>
@@ -0,0 +1,8 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent {
}
@@ -0,0 +1,23 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { FooterComponent } from './footer/footer.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { WrapperComponent } from './wrapper/wrapper.component';

@NgModule({
imports: [
CommonModule,
RouterModule,
],
declarations: [
FooterComponent,
SidebarComponent,
ToolbarComponent,
WrapperComponent
]
})
export class LayoutsModule {
}
@@ -0,0 +1,7 @@
<nav>
<ul>
<li><a [routerLink]="['']" [routerLinkActive]="['router-link-active']">home</a></li>
<li><a [routerLink]="['/mock']" [routerLinkActive]="['router-link-active']">mock</a></li>
<li><a [routerLink]="['/back']" [routerLinkActive]="['router-link-active']">back http</a></li>
</ul>
</nav>
@@ -0,0 +1,8 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})
export class SidebarComponent {
}
@@ -0,0 +1 @@
<span>Angular RU Universal Starter</span>
@@ -0,0 +1,8 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-toolbar',
templateUrl: './toolbar.component.html'
})
export class ToolbarComponent {
}
@@ -0,0 +1,8 @@
<app-toolbar></app-toolbar>
<div id="wrapper-content">
<app-sidebar></app-sidebar>
<main role="main">
<router-outlet></router-outlet>
</main>
</div>
<app-footer></app-footer>
@@ -0,0 +1,8 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-wrapper',
templateUrl: './wrapper.component.html'
})
export class WrapperComponent {
}
@@ -0,0 +1,15 @@
import { ModuleWithProviders, NgModule } from '@angular/core';

import { LayoutsModule } from './layouts/layouts.module';

@NgModule({
exports: [
LayoutsModule
],
providers: []
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return { ngModule: SharedModule };
}
}
@@ -0,0 +1,23 @@
* {
box-sizing: border-box;
&:active, &:hover, &:focus {
outline: 0;
}
}

html {
height: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
width: 100%;
height: 100%;
background-color: $body-color-bg;
color: $body-color-text;
font: 14px Roboto, "Helvetica Neue", sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
}
@@ -0,0 +1,14 @@
$color-primary: #3f51b5;

// Body
$body-color-bg: #eee;
$body-color-text: #444;

// Toolbar
$toolbar-height: 56px;

// Sidebar
$sidebar-width: 64px;

// Footer
$footer-height: 49px;
@@ -0,0 +1,12 @@
app-footer {
display: flex;
flex-direction: column;
flex: 0 0 auto;
height: $footer-height;
line-height: $footer-height;
color: #7d7d7d;
border-top: 1px solid #d5d5d5;
font-size: 12px;
margin: 0 15px;
overflow: hidden;
}
@@ -0,0 +1,5 @@
app-sidebar {
display: block;
width: 200px;
border-right: 2px solid $color-primary;
}
@@ -0,0 +1,12 @@
app-toolbar {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: $toolbar-height;
background-color: $color-primary;
color: #fafafa;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
z-index: 10;
}
@@ -0,0 +1,15 @@
app-wrapper {
display: flex;
flex-direction: column;
height: 100%;
#wrapper-content {
display: flex;
flex-direction: row;
flex: 1 0 auto;
padding: 70px 0 0 0;
main {
flex: auto;
padding: 0 15px;
}
}
}
@@ -0,0 +1,11 @@
// Resets
@import 'resets/normalize';
@import 'resets/print';
// Core
@import 'core/variables';
@import 'core/base';
// Layouts
@import 'layouts/footer';
@import 'layouts/sidebar';
@import 'layouts/toolbar';
@import 'layouts/wrapper';

0 comments on commit 39ffe26

Please sign in to comment.
You can’t perform that action at this time.