ionic2+ 基础
一 项目入口
1.index.html
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 {}