ionic2+ 基礎

ionic2+ 基礎

一 項目入口

1.index.html

<ion-app></ion-app>

2.main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
//設置AppModule爲引導模塊
platformBrowserDynamic().bootstrapModule(AppModule);

3. app.module.ts

imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp]

4. app.components.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {}

二 定義模塊&組件

組件定義

import { Component } from '@angular/core';

@Component({
    templateUrl: 'home-page.html'
})
export class HomePage {

    constructor() {

    }
}

service 定義

import {Injectable} from "@angular/core";

//聲明爲可注入服務  單例
@Injectable()
export class HomeService {
  constructor() {
    
  }
}

模塊定義

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';

import { HomePage } from './home.page'
import { HomeService } from './home.service'
@NgModule({
    //引入其餘模塊
    imports: [
        IonicModule
    ],
    //聲明組件
    declarations: [
        HomePage
    ],
    //導出組件標籤
    exports:[
        
    ], 
    //導出組件類
    entryComponents: [
        HomePage
    ],
    //導出服務
    providers: [
        HomeService
    ]
})
export class HomeModule {}

主模塊引用其餘模塊

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MyApp } from './app.component';
import { TabsPage } from './tabs/tabs';
//引入自定義模塊
import { HomeModule } from './home/home.module';
@NgModule({
    declarations: [
        MyApp,
        TabsPage
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        //導入自定義模塊
        HomeModule
    ],
    bootstrap: [IonicApp],
        entryComponents: [
        MyApp,
        TabsPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
})
export class AppModule {}