Adds a new template for the beginning of a new front end

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

@@ -0,0 +1,21 @@
+import { HomeComponent } from './components/home/home.component';
+import { AboutComponent } from './components/about/about.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: HomeComponent
+    },
+    {
+        path:'about',
+        component: AboutComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, {useHash: true})],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }

web/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

web/src/app/app.component.spec.ts

@@ -0,0 +1,24 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+import { ElectronService } from 'app/providers/electron.service';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+      providers : [
+        ElectronService
+      ],
+      imports: [RouterTestingModule]
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});

web/src/app/app.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { ElectronService } from './providers/electron.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  constructor(public electronService: ElectronService) {
+
+    if (electronService.isElectron()) {
+      console.log('Mode electron');
+      // Check if electron is correctly injected (see externals in webpack.config.js)
+      console.log('c', electronService.ipcRenderer);
+      // Check if nodeJs childProcess is correctly injected (see externals in webpack.config.js)
+      console.log('c', electronService.childProcess);
+    } else {
+      console.log('Mode web');
+    }
+  }
+}

web/src/app/app.module.ts

@@ -0,0 +1,32 @@
+import 'zone.js/dist/zone-mix';
+import 'reflect-metadata';
+import 'polyfills';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { HomeComponent } from './components/home/home.component';
+import { AboutComponent } from './components/about/about.component';
+
+import { AppRoutingModule } from './app-routing.module';
+
+import { ElectronService } from './providers/electron.service';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    AboutComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    AppRoutingModule
+  ],
+  providers: [ElectronService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

web/src/app/components/about/about.component.html

@@ -0,0 +1,3 @@
+<p>
+  about works!
+</p>

web/src/app/components/about/about.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/components/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

web/src/app/components/home/home.component.html

@@ -0,0 +1,6 @@
+<div class="container">
+  <h1 class="title">
+    {{title}}
+  </h1>
+  <a routerLink="/about" routerLinkActive="active" >hello</a>
+</div>

web/src/app/components/home/home.component.scss

@@ -0,0 +1,17 @@
+.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;
+  }
+
+}

web/src/app/components/home/home.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+   it(`should have as title 'App works !'`, async(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('App works !');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('App works !');
+  }));
+});

web/src/app/components/home/home.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  title = `App works !`;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

web/src/app/providers/electron.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+// If you import a module but never use any of the imported values other than as TypeScript types,
+// the resulting javascript file will look as if you never imported the module at all.
+import { ipcRenderer } from 'electron';
+import * as childProcess from 'child_process';
+
+@Injectable()
+export class ElectronService {
+
+  ipcRenderer: typeof ipcRenderer;
+  childProcess: typeof childProcess;
+
+  constructor() {
+    // Conditional imports
+    if (this.isElectron()) {
+      this.ipcRenderer = window.require('electron').ipcRenderer;
+      this.childProcess = window.require('child_process');
+    }
+  }
+
+  isElectron = () => {
+    return window && window.process && window.process.type;
+  }
+
+}