From 386ce679750ef75c00e21dec8ac9806cd7f61860 Mon Sep 17 00:00:00 2001 From: Maxime GRIS Date: Mon, 20 Apr 2020 19:17:15 +0200 Subject: [PATCH] ref/ make app reloading/working with and without usehash routing strategy --- main.ts | 2 +- package.json | 4 ++-- src/app/app-routing.module.ts | 11 +++++++-- src/app/app.component.scss | 3 +++ src/app/app.module.ts | 2 ++ src/app/detail/detail-routing.module.ts | 18 ++++++++++++++ src/app/detail/detail.component.html | 7 ++++++ src/app/detail/detail.component.scss | 3 +++ src/app/detail/detail.component.spec.ts | 35 +++++++++++++++++++++++++++ src/app/detail/detail.component.ts | 14 +++++++++++ src/app/detail/detail.module.ts | 13 ++++++++++ src/app/home/home.component.html | 2 ++ src/app/home/home.component.scss | 19 +++------------ src/app/home/home.component.spec.ts | 3 ++- src/app/home/home.component.ts | 3 ++- src/assets/i18n/en.json | 9 +++++-- src/index.html | 4 ++-- src/styles.scss | 42 +++++++++++++++++++++++++++++++++ 18 files changed, 167 insertions(+), 27 deletions(-) create mode 100644 src/app/detail/detail-routing.module.ts create mode 100644 src/app/detail/detail.component.html create mode 100644 src/app/detail/detail.component.scss create mode 100644 src/app/detail/detail.component.spec.ts create mode 100644 src/app/detail/detail.component.ts create mode 100644 src/app/detail/detail.module.ts diff --git a/main.ts b/main.ts index 533b406..8001f8c 100644 --- a/main.ts +++ b/main.ts @@ -4,7 +4,7 @@ import * as url from 'url'; let win: BrowserWindow = null; const args = process.argv.slice(1), - serve = args.some(val => val === '--serve'); + serve = args.some(val => val === '--serve'); function createWindow(): BrowserWindow { diff --git a/package.json b/package.json index eb22cd6..7155ffc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-electron", - "version": "7.0.3", + "version": "7.0.4", "description": "Angular 9 with Electron (Typescript + SASS + Hot Reload)", "homepage": "https://github.com/maximegris/angular-electron", "author": { @@ -22,7 +22,7 @@ "postinstall": "electron-builder install-app-deps", "ng": "ng", "start": "npm-run-all -p electron:serve ng:serve", - "build": "npm run electron:serve-tsc && ng build", + "build": "npm run electron:serve-tsc && ng build --base-href ./", "build:dev": "npm run build -- -c dev", "build:prod": "npm run build -- -c production", "ng:serve": "ng serve", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 56201ff..4f03ff5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,6 +2,9 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { PageNotFoundComponent } from './shared/components'; +import { HomeRoutingModule } from './home/home-routing.module'; +import { DetailRoutingModule } from './detail/detail-routing.module'; + const routes: Routes = [ { path: '', @@ -15,7 +18,11 @@ const routes: Routes = [ ]; @NgModule({ - imports: [RouterModule.forRoot(routes, { useHash: true })], + imports: [ + RouterModule.forRoot(routes), + HomeRoutingModule, + DetailRoutingModule + ], exports: [RouterModule] }) -export class AppRoutingModule {} +export class AppRoutingModule { } diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..89a6d1f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b2f66c7..f94fe5c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { HomeModule } from './home/home.module'; +import { DetailModule } from './detail/detail.module'; import { AppComponent } from './app.component'; @@ -32,6 +33,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader { CoreModule, SharedModule, HomeModule, + DetailModule, AppRoutingModule, TranslateModule.forRoot({ loader: { diff --git a/src/app/detail/detail-routing.module.ts b/src/app/detail/detail-routing.module.ts new file mode 100644 index 0000000..984d0ed --- /dev/null +++ b/src/app/detail/detail-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Routes, RouterModule } from '@angular/router'; +import { DetailComponent } from './detail.component'; + +const routes: Routes = [ + { + path: 'detail', + component: DetailComponent + } +]; + +@NgModule({ + declarations: [], + imports: [CommonModule, RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DetailRoutingModule {} diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html new file mode 100644 index 0000000..1d5b906 --- /dev/null +++ b/src/app/detail/detail.component.html @@ -0,0 +1,7 @@ +
+

+ {{ 'PAGES.DETAIL.TITLE' | translate }} +

+ + {{ 'PAGES.DETAIL.BACK_TO_HOME' | translate }} +
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss new file mode 100644 index 0000000..89a6d1f --- /dev/null +++ b/src/app/detail/detail.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/detail/detail.component.spec.ts b/src/app/detail/detail.component.spec.ts new file mode 100644 index 0000000..bdf757e --- /dev/null +++ b/src/app/detail/detail.component.spec.ts @@ -0,0 +1,35 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailComponent } from './detail.component'; +import { TranslateModule } from '@ngx-translate/core'; + +import { RouterTestingModule } from '@angular/router/testing'; + +describe('DetailComponent', () => { + let component: DetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DetailComponent], + imports: [TranslateModule.forRoot(), RouterTestingModule] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should render title in a h1 tag', async(() => { + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain( + 'PAGES.DETAIL.TITLE' + ); + })); +}); diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts new file mode 100644 index 0000000..a58ee2d --- /dev/null +++ b/src/app/detail/detail.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-detail', + templateUrl: './detail.component.html', + styleUrls: ['./detail.component.scss'] +}) +export class DetailComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { } + +} diff --git a/src/app/detail/detail.module.ts b/src/app/detail/detail.module.ts new file mode 100644 index 0000000..7123cca --- /dev/null +++ b/src/app/detail/detail.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { DetailRoutingModule } from './detail-routing.module'; + +import { DetailComponent } from './detail.component'; +import { SharedModule } from '../shared/shared.module'; + +@NgModule({ + declarations: [DetailComponent], + imports: [CommonModule, SharedModule, DetailRoutingModule] +}) +export class DetailModule {} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 79972a9..4023a06 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -2,4 +2,6 @@

{{ 'PAGES.HOME.TITLE' | translate }}

+ + {{ 'PAGES.HOME.GO_TO_DETAIL' | translate }} diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 42f4957..89a6d1f 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,16 +1,3 @@ -.container { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - background: url(../../assets/background.jpg) no-repeat center fixed; - -webkit-background-size: cover; /* pour anciens Chrome et Safari */ - background-size: cover; /* version standardisée */ - - .title { - color: white; - margin: 0; - padding: 50px 20px; - } -} +:host { + +} \ No newline at end of file diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts index 583b01d..4507a0b 100644 --- a/src/app/home/home.component.spec.ts +++ b/src/app/home/home.component.spec.ts @@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HomeComponent } from './home.component'; import { TranslateModule } from '@ngx-translate/core'; +import { RouterTestingModule } from '@angular/router/testing'; describe('HomeComponent', () => { let component: HomeComponent; @@ -10,7 +11,7 @@ describe('HomeComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [HomeComponent], - imports: [TranslateModule.forRoot()] + imports: [TranslateModule.forRoot(), RouterTestingModule] }).compileComponents(); })); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index ec5d465..a272626 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-home', @@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core'; }) export class HomeComponent implements OnInit { - constructor() { } + constructor(private router: Router) { } ngOnInit(): void { } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index ca16dfb..95c3bbc 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -1,7 +1,12 @@ { "PAGES": { "HOME": { - "TITLE": "App works !" - } + "TITLE": "App works !", + "GO_TO_DETAIL": "Go to Detail" + }, + "DETAIL": { + "TITLE": "Detail page !", + "BACK_TO_HOME": "Back to Home" + } } } diff --git a/src/index.html b/src/index.html index 73b06fc..d5a77cc 100644 --- a/src/index.html +++ b/src/index.html @@ -2,8 +2,8 @@ - AngularElectron - + Angular Electron + diff --git a/src/styles.scss b/src/styles.scss index 5472c80..098f305 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,4 +4,46 @@ html, body { padding: 0; height: 100%; + font-family: Arial, Helvetica, sans-serif; +} + +/* CAN (MUST) BE REMOVED ! Sample Global style */ +.container { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + background: url(./assets/background.jpg) no-repeat center fixed; + -webkit-background-size: cover; /* pour anciens Chrome et Safari */ + background-size: cover; /* version standardisée */ + + .title { + color: white; + margin: 0; + padding: 50px 20px; + } + + a { + color: #fff !important; + text-transform: uppercase; + text-decoration: none; + background: #ed3330; + padding: 20px; + border-radius: 5px; + display: inline-block; + border: none; + transition: all 0.4s ease 0s; + + &:hover { + background: #fff; + color: #ed3330 !important; + letter-spacing: 1px; + -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); + -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); + box-shadow: 5px 40px -10px rgba(0,0,0,0.57); + transition: all 0.4s ease 0s; + } + } }