Base mobile template

ngx-rocket/generator-ngx-rocket#72

package.json

@@ -29,30 +29,31 @@
     "@angular/platform-browser": "^4.1.0",
     "@angular/platform-browser-dynamic": "^4.1.0",
     "@angular/router": "^4.1.0",
-    "@ngx-translate/core": "^7.0.0",
     "@ionic-native/core": "^3.9.2",
+    "@ionic-native/keyboard": "^3.13.1",
     "@ionic-native/splash-screen": "^3.9.2",
     "@ionic-native/status-bar": "^3.9.2",
-    "sw-toolbox": "^3.6.0",
-    "ionic": "^3.1.2",
+    "@ngx-translate/core": "^7.0.0",
+    "core-js": "^2.4.1",
     "ionic-angular": "^3.2.1",
     "ionicons": "^3.0.0",
-    "core-js": "^2.4.1",
     "lodash": "^4.17.4",
     "rxjs": "^5.4.0",
+    "sw-toolbox": "^3.6.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "cordova": "^7.0.0",
     "@angular/cli": "^1.1.3",
     "@angular/compiler-cli": "^4.1.0",
     "@angular/language-service": "^4.0.0",
     "@biesbjerg/ngx-translate-extract": "^2.3.1",
+    "@ionic/app-scripts": "^2.0.0",
     "@types/jasmine": "^2.5.52",
     "@types/jasminewd2": "^2.0.2",
     "@types/lodash": "^4.14.52",
     "@types/node": "^8.0.0",
     "codelyzer": "~3.1.1",
+    "cordova": "^7.0.0",
     "env2json": "^1.0.0",
     "hads": "^1.3.4",
     "htmlhint": "^0.9.13",

src/app/about/about.component.html

@@ -1,10 +1,18 @@
-<div class="container-fluid">
-  <div class="jumbotron text-center">
-    <h1>
-      <span translate>APP_NAME</span>
-    </h1>
-    <p>
-      <i class="fa fa-bookmark-o"></i> <span translate>Version</span> {{version}}
-    </p>
-  </div>
-</div>
+<ion-header>
+  <ion-navbar color="primary">
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title><span translate>About</span></ion-title>
+  </ion-navbar>
+</ion-header>
+<ion-content>
+  <ion-card text-center>
+    <ion-card-content>
+      <ion-card-title translate>APP_NAME</ion-card-title>
+      <p>
+        <ion-icon name="code"></ion-icon> <span translate>Version</span> {{version}}
+      </p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/about/about.module.ts

@@ -1,15 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { IonicPageModule } from 'ionic-angular';
 
-import { AboutRoutingModule } from './about-routing.module';
 import { AboutComponent } from './about.component';
 
 @NgModule({
   imports: [
     CommonModule,
     TranslateModule,
-    AboutRoutingModule
+    IonicPageModule.forChild(AboutComponent)
+  ],
+  entryComponents: [
+    AboutComponent
   ],
   declarations: [
     AboutComponent

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<ion-nav #content [root]="rootPage"></ion-nav>

src/app/app.component.ts

@@ -5,17 +5,18 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
 
 import { Component, OnInit } from '@angular/core';
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs/Observable';
 import { Platform } from 'ionic-angular';
+import { Keyboard } from '@ionic-native/keyboard';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { environment } from '../environments/environment';
 import { Logger } from './core/logger.service';
 import { I18nService } from './core/i18n.service';
+import { ShellComponent } from './shell/shell.component';
 
 const log = new Logger('App');
 
@@ -25,11 +26,13 @@ const log = new Logger('App');
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+
+  public rootPage: any = ShellComponent;
+
   constructor(private platform: Platform,
+              private keyboard: Keyboard,
               private statusBar: StatusBar,
               private splashScreen: SplashScreen,
-              private router: Router,
-              private activatedRoute: ActivatedRoute,
               private titleService: Title,
               private translateService: TranslateService,
               private i18nService: I18nService) { }
@@ -46,28 +49,32 @@ export class AppComponent implements OnInit {
     this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);
 
     // Change page title on navigation or language change, based on route data
-    const onNavigationEnd = this.router.events.filter(event => event instanceof NavigationEnd);
-    Observable.merge(this.translateService.onLangChange, onNavigationEnd)
-      .map(() => {
-        let route = this.activatedRoute;
-        while (route.firstChild) {
-          route = route.firstChild;
-        }
-        return route;
-      })
-      .filter(route => route.outlet === 'primary')
-      .mergeMap(route => route.data)
-      .subscribe(event => {
-        const title = event['title'];
-        if (title) {
-          this.titleService.setTitle(this.translateService.instant(title));
-        }
-      });
+    // const onNavigationEnd = this.router.events.filter(event => event instanceof NavigationEnd);
+    // Observable.merge(this.translateService.onLangChange, onNavigationEnd)
+    //   .map(() => {
+    //     let route = this.activatedRoute;
+    //     while (route.firstChild) {
+    //       route = route.firstChild;
+    //     }
+    //     return route;
+    //   })
+    //   .filter(route => route.outlet === 'primary')
+    //   .mergeMap(route => route.data)
+    //   .subscribe(event => {
+    //     const title = event['title'];
+    //     if (title) {
+    //       this.titleService.setTitle(this.translateService.instant(title));
+    //     }
+    //   });
 
     // Cordova platform and plugins initialization
     this.platform.ready().then(() => {
-      this.statusBar.styleDefault();
-      this.splashScreen.hide();
+
+      if (window['cordova']) {
+        this.keyboard.hideKeyboardAccessoryBar(true);
+        this.statusBar.styleDefault();
+        this.splashScreen.hide();
+      }
     });
   }
 

src/app/app.module.ts

@@ -1,15 +1,17 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { ErrorHandler, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
+import { Keyboard } from '@ionic-native/keyboard';
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
+import { ShellModule } from './shell/shell.module';
 import { HomeModule } from './home/home.module';
 import { AboutModule } from './about/about.module';
 import { LoginModule } from './login/login.module';
@@ -20,16 +22,22 @@ import { LoginModule } from './login/login.module';
     FormsModule,
     HttpModule,
     TranslateModule.forRoot(),
-    NgbModule.forRoot(),
     CoreModule,
     SharedModule,
+    ShellModule,
     HomeModule,
     AboutModule,
     LoginModule,
-    AppRoutingModule
+    IonicModule.forRoot(AppComponent),
   ],
+  entryComponents: [AppComponent],
   declarations: [AppComponent],
-  providers: [],
-  bootstrap: [AppComponent]
+  providers: [
+    StatusBar,
+    SplashScreen,
+    Keyboard,
+    { provide: ErrorHandler, useClass: IonicErrorHandler }
+  ],
+  bootstrap: [IonicApp]
 })
 export class AppModule { }

src/app/core/authentication/authentication.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
+import { Logger } from '../logger.service';
+
 export interface Credentials {
   // Customize received credentials here
   username: string;
@@ -13,6 +15,7 @@ export interface LoginContext {
   remember?: boolean;
 }
 
+const log = new Logger('AuthenticationService');
 const credentialsKey = 'credentials';
 
 /**
@@ -61,6 +64,18 @@ export class AuthenticationService {
     return !!this.credentials;
   }
 
+  checkAuthentication(): boolean {
+    if (this.isAuthenticated()) {
+      return true;
+    }
+
+    log.debug('Not authenticated, redirecting...');
+
+    // TODO: redirect
+
+    return false;
+  }
+
   /**
    * Gets the user credentials.
    * @return {Credentials} The user credentials or null if the user is not authenticated.