From a95f79a04f34fb5364324371e35abf1705369fb8 Mon Sep 17 00:00:00 2001 From: Xi Xiao Date: Wed, 31 May 2017 22:35:38 +0300 Subject: [PATCH] add lazy load for template --- src/app/app.component.ts | 7 ++--- src/app/app.module.ts | 31 +------------------ src/pages/about/about.module.ts | 16 ++++++++++ src/pages/about/about.ts | 2 ++ src/pages/account/account.module.ts | 16 ++++++++++ src/pages/account/account.ts | 6 ++-- src/pages/login/login.module.ts | 16 ++++++++++ src/pages/login/login.ts | 12 +++---- src/pages/settings/settings.module.ts | 16 ++++++++++ src/pages/settings/settings.ts | 12 +++---- src/pages/signup/signup.module.ts | 16 ++++++++++ src/pages/signup/signup.ts | 10 +++--- src/pages/tabs/tabs.module.ts | 16 ++++++++++ src/pages/tabs/tabs.ts | 9 +++--- src/pages/tasks-create/tasks-create.module.ts | 16 ++++++++++ src/pages/tasks-create/tasks-create.ts | 11 ++++--- src/pages/tasks/tasks.module.ts | 16 ++++++++++ src/pages/tasks/tasks.ts | 17 +++++----- 18 files changed, 167 insertions(+), 78 deletions(-) create mode 100644 src/pages/about/about.module.ts create mode 100644 src/pages/account/account.module.ts create mode 100644 src/pages/login/login.module.ts create mode 100644 src/pages/settings/settings.module.ts create mode 100644 src/pages/signup/signup.module.ts create mode 100644 src/pages/tabs/tabs.module.ts create mode 100644 src/pages/tasks-create/tasks-create.module.ts create mode 100644 src/pages/tasks/tasks.module.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1615934..8c1f359 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,9 +3,6 @@ import { Config, Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; -import { TabsPage } from '../pages/tabs/tabs'; -import { LoginPage } from '../pages/login/login'; - import { User } from '../providers/user'; @@ -26,11 +23,11 @@ export class MyApp { platform.ready().then(() => { user.isAuthenticated().then(() => { console.log('you are authenticated!'); - this.rootPage = TabsPage; + this.rootPage = 'TabsPage'; globalActions(); }).catch(() => { console.log('you are not authenticated..'); - this.rootPage = LoginPage; + this.rootPage = 'LoginPage'; globalActions(); }); }); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 836d8da..6dd7f8c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,35 +6,15 @@ import { Camera } from '@ionic-native/camera'; import { AwsConfig } from './app.config'; import { MyApp } from './app.component'; -import { LoginPage } from '../pages/login/login'; -import { SignupPage } from '../pages/signup/signup'; -import { ConfirmPage } from '../pages/confirm/confirm'; -import { SettingsPage } from '../pages/settings/settings'; -import { AboutPage } from '../pages/about/about'; -import { AccountPage } from '../pages/account/account'; -import { TabsPage } from '../pages/tabs/tabs'; -import { TasksPage } from '../pages/tasks/tasks'; -import { TasksCreatePage } from '../pages/tasks-create/tasks-create'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; -import { User } from '../providers/user'; -import { Cognito } from '../providers/aws.cognito'; -import { DynamoDB } from '../providers/aws.dynamodb'; +import { User, Cognito, DynamoDB } from '../providers/providers'; @NgModule({ declarations: [ MyApp, - LoginPage, - SignupPage, - ConfirmPage, - SettingsPage, - AboutPage, - AccountPage, - TabsPage, - TasksPage, - TasksCreatePage ], imports: [ BrowserModule, @@ -43,15 +23,6 @@ import { DynamoDB } from '../providers/aws.dynamodb'; bootstrap: [IonicApp], entryComponents: [ MyApp, - LoginPage, - SignupPage, - ConfirmPage, - SettingsPage, - AboutPage, - AccountPage, - TabsPage, - TasksPage, - TasksCreatePage ], providers: [ StatusBar, diff --git a/src/pages/about/about.module.ts b/src/pages/about/about.module.ts new file mode 100644 index 0000000..aab6f7c --- /dev/null +++ b/src/pages/about/about.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { AboutPage } from './about'; + +@NgModule({ + declarations: [ + AboutPage, + ], + imports: [ + IonicPageModule.forChild(AboutPage), + ], + exports: [ + AboutPage + ] +}) +export class AboutPageModule {} \ No newline at end of file diff --git a/src/pages/about/about.ts b/src/pages/about/about.ts index 9ca806b..5c6896c 100644 --- a/src/pages/about/about.ts +++ b/src/pages/about/about.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; +import { IonicPage } from 'ionic-angular'; +@IonicPage() @Component({ selector: 'page-about', templateUrl: 'about.html' diff --git a/src/pages/account/account.module.ts b/src/pages/account/account.module.ts new file mode 100644 index 0000000..eda9713 --- /dev/null +++ b/src/pages/account/account.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { AccountPage } from './account'; + +@NgModule({ + declarations: [ + AccountPage, + ], + imports: [ + IonicPageModule.forChild(AccountPage), + ], + exports: [ + AccountPage + ] +}) +export class AccountPageModule { } \ No newline at end of file diff --git a/src/pages/account/account.ts b/src/pages/account/account.ts index a3587a6..cf3ad46 100644 --- a/src/pages/account/account.ts +++ b/src/pages/account/account.ts @@ -1,13 +1,11 @@ import { Component, ViewChild } from '@angular/core'; - -import { Config, LoadingController, NavController } from 'ionic-angular'; - +import {IonicPage, Config, LoadingController, NavController } from 'ionic-angular'; import { Camera, CameraOptions } from '@ionic-native/camera'; - import { DynamoDB, User } from '../../providers/providers'; declare var AWS: any; +@IonicPage() @Component({ selector: 'page-account', templateUrl: 'account.html' diff --git a/src/pages/login/login.module.ts b/src/pages/login/login.module.ts new file mode 100644 index 0000000..97928fa --- /dev/null +++ b/src/pages/login/login.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { LoginPage } from './login'; + +@NgModule({ + declarations: [ + LoginPage, + ], + imports: [ + IonicPageModule.forChild(LoginPage), + ], + exports: [ + LoginPage + ] +}) +export class LoginPageModule { } \ No newline at end of file diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index ac23f25..9b518b4 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,10 +1,7 @@ import { Component } from '@angular/core'; -import { NavController, LoadingController } from 'ionic-angular'; +import {IonicPage, NavController, LoadingController } from 'ionic-angular'; -import { TabsPage } from '../tabs/tabs'; -import { SignupPage } from '../signup/signup'; -import { ConfirmPage } from '../confirm/confirm'; import { User } from '../../providers/providers'; @@ -13,6 +10,7 @@ export class LoginDetails { password: string; } +@IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html' @@ -38,11 +36,11 @@ export class LoginPage { this.user.login(details.username, details.password).then((result) => { console.log('result:', result); loading.dismiss(); - this.navCtrl.setRoot(TabsPage); + this.navCtrl.setRoot('TabsPage'); }).catch((err) => { if (err.message === "User is not confirmed.") { loading.dismiss(); - this.navCtrl.push(ConfirmPage, { 'username': details.username }); + this.navCtrl.push('ConfirmPage', { 'username': details.username }); } console.log('errrror', err); loading.dismiss(); @@ -50,7 +48,7 @@ export class LoginPage { } signup() { - this.navCtrl.push(SignupPage); + this.navCtrl.push('SignupPage'); } } diff --git a/src/pages/settings/settings.module.ts b/src/pages/settings/settings.module.ts new file mode 100644 index 0000000..b6aa20b --- /dev/null +++ b/src/pages/settings/settings.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { SettingsPage } from './settings'; + +@NgModule({ + declarations: [ + SettingsPage, + ], + imports: [ + IonicPageModule.forChild(SettingsPage), + ], + exports: [ + SettingsPage + ] +}) +export class SettingsPageModule { } \ No newline at end of file diff --git a/src/pages/settings/settings.ts b/src/pages/settings/settings.ts index c1b3baf..c2c2e9a 100644 --- a/src/pages/settings/settings.ts +++ b/src/pages/settings/settings.ts @@ -1,25 +1,23 @@ import { Component } from '@angular/core'; -import { App } from 'ionic-angular'; -import { LoginPage } from '../login/login'; -import { AboutPage } from '../about/about'; -import { AccountPage } from '../account/account'; +import {IonicPage, App } from 'ionic-angular'; import { User } from '../../providers/providers'; +@IonicPage() @Component({ templateUrl: 'settings.html' }) export class SettingsPage { - public aboutPage = AboutPage; - public accountPage = AccountPage; + public aboutPage = 'AboutPage'; + public accountPage = 'AccountPage'; constructor(public user: User, public app: App) { } logout() { this.user.logout(); - this.app.getRootNav().setRoot(LoginPage); + this.app.getRootNav().setRoot('LoginPage'); } } diff --git a/src/pages/signup/signup.module.ts b/src/pages/signup/signup.module.ts new file mode 100644 index 0000000..5f464b6 --- /dev/null +++ b/src/pages/signup/signup.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import {SignupPage} from './signup'; + +@NgModule({ + declarations: [ + SignupPage, + ], + imports: [ + IonicPageModule.forChild(SignupPage), + ], + exports: [ + SignupPage + ] +}) +export class SignupPageModule { } \ No newline at end of file diff --git a/src/pages/signup/signup.ts b/src/pages/signup/signup.ts index 31f2286..b0493d1 100644 --- a/src/pages/signup/signup.ts +++ b/src/pages/signup/signup.ts @@ -1,9 +1,6 @@ import { Component } from '@angular/core'; -import { NavController, LoadingController } from 'ionic-angular'; - -import { LoginPage } from '../login/login'; -import { ConfirmPage } from '../confirm/confirm'; +import {IonicPage, NavController, LoadingController } from 'ionic-angular'; import { User } from '../../providers/user'; @@ -13,6 +10,7 @@ export class UserDetails { password: string; } +@IonicPage() @Component({ selector: 'page-signup', templateUrl: 'signup.html' @@ -42,7 +40,7 @@ export class SignupPage { this.user.register(details.username, details.password, {'email': details.email}).then((user) => { console.log('hooray', user); loading.dismiss(); - this.navCtrl.push(ConfirmPage, { username: details.username }); + this.navCtrl.push('ConfirmPage', { username: details.username }); }).catch((err) => { loading.dismiss(); this.error = err; @@ -50,7 +48,7 @@ export class SignupPage { } login() { - this.navCtrl.push(LoginPage); + this.navCtrl.push('LoginPage'); } } diff --git a/src/pages/tabs/tabs.module.ts b/src/pages/tabs/tabs.module.ts new file mode 100644 index 0000000..0689377 --- /dev/null +++ b/src/pages/tabs/tabs.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { TabsPage } from './tabs'; + +@NgModule({ + declarations: [ + TabsPage, + ], + imports: [ + IonicPageModule.forChild(TabsPage), + ], + exports: [ + TabsPage + ] +}) +export class TabsPageModule { } \ No newline at end of file diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts index 7171d0c..98f947f 100644 --- a/src/pages/tabs/tabs.ts +++ b/src/pages/tabs/tabs.ts @@ -1,15 +1,14 @@ import { Component } from '@angular/core'; +import { IonicPage } from 'ionic-angular'; -import { SettingsPage } from '../settings/settings'; -import { TasksPage } from '../tasks/tasks'; - +@IonicPage() @Component({ templateUrl: 'tabs.html' }) export class TabsPage { - tab1Root = TasksPage; - tab2Root = SettingsPage; + tab1Root = 'TasksPage'; + tab2Root = 'SettingsPage'; constructor() { diff --git a/src/pages/tasks-create/tasks-create.module.ts b/src/pages/tasks-create/tasks-create.module.ts new file mode 100644 index 0000000..e60e250 --- /dev/null +++ b/src/pages/tasks-create/tasks-create.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { TasksCreatePage } from './tasks-create'; + +@NgModule({ + declarations: [ + TasksCreatePage, + ], + imports: [ + IonicPageModule.forChild(TasksCreatePage), + ], + exports: [ + TasksCreatePage + ] +}) +export class TasksCreatePageModule { } \ No newline at end of file diff --git a/src/pages/tasks-create/tasks-create.ts b/src/pages/tasks-create/tasks-create.ts index 252f15f..988a6f3 100644 --- a/src/pages/tasks-create/tasks-create.ts +++ b/src/pages/tasks-create/tasks-create.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ViewController, Platform } from 'ionic-angular'; +import { IonicPage, NavController, NavParams, ViewController, Platform } from 'ionic-angular'; +@IonicPage() @Component({ selector: 'page-tasks-create', templateUrl: 'tasks-create.html' @@ -15,9 +16,9 @@ export class TasksCreatePage { constructor(public navCtrl: NavController, - public navParams: NavParams, - public viewCtrl: ViewController, - public platform: Platform) { + public navParams: NavParams, + public viewCtrl: ViewController, + public platform: Platform) { this.isAndroid = platform.is('android'); this.item = { 'taskId': navParams.get('id'), @@ -34,7 +35,7 @@ export class TasksCreatePage { this.viewCtrl.dismiss(); } - done() { + done() { this.viewCtrl.dismiss(this.item); } } diff --git a/src/pages/tasks/tasks.module.ts b/src/pages/tasks/tasks.module.ts new file mode 100644 index 0000000..3b336c7 --- /dev/null +++ b/src/pages/tasks/tasks.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { TasksPage } from './tasks'; + +@NgModule({ + declarations: [ + TasksPage, + ], + imports: [ + IonicPageModule.forChild(TasksPage), + ], + exports: [ + TasksPage + ] +}) +export class TasksPageModule {} \ No newline at end of file diff --git a/src/pages/tasks/tasks.ts b/src/pages/tasks/tasks.ts index ac6a397..00fef6a 100644 --- a/src/pages/tasks/tasks.ts +++ b/src/pages/tasks/tasks.ts @@ -1,12 +1,11 @@ import { Component } from '@angular/core'; - import { NavController, ModalController } from 'ionic-angular'; -import { TasksCreatePage } from '../tasks-create/tasks-create'; - import { DynamoDB, User } from '../../providers/providers'; +import { IonicPage } from 'ionic-angular'; declare var AWS: any; +@IonicPage() @Component({ selector: 'page-tasks', templateUrl: 'tasks.html' @@ -18,9 +17,9 @@ export class TasksPage { private taskTable: string = 'ionic-mobile-hub-tasks'; constructor(public navCtrl: NavController, - public modalCtrl: ModalController, - public user: User, - public db: DynamoDB) { + public modalCtrl: ModalController, + public user: User, + public db: DynamoDB) { this.refreshTasks(); } @@ -60,7 +59,7 @@ export class TasksPage { var charLength = chars.length; var result = ""; let randoms = window.crypto.getRandomValues(new Uint32Array(len)); - for(var i = 0; i < len; i++) { + for (var i = 0; i < len; i++) { result += chars[randoms[i] % charLength]; } return result.toLowerCase(); @@ -68,7 +67,7 @@ export class TasksPage { addTask() { let id = this.generateId(); - let addModal = this.modalCtrl.create(TasksCreatePage, { 'id': id }); + let addModal = this.modalCtrl.create('TasksCreatePage', { 'id': id }); let self = this; addModal.onDidDismiss(item => { if (item) { @@ -78,7 +77,7 @@ export class TasksPage { 'TableName': self.taskTable, 'Item': item, 'ConditionExpression': 'attribute_not_exists(id)' - }, function(err, data) { + }, function (err, data) { if (err) { console.log(err); } self.refreshTasks(); });