ionic2+ 基础

Posted 2020-10-26 final-elysion

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 {}