ionic2 + cordova 目录结构解析

2.1 前置技能（欢迎加入Q群一起学习讨论657185219）

2.1.1 typeScript 教程

2.1.2 angular2 教程

2.1.3 sass教程

2.1.4 ionic2教程

2.1.5 基本知识

2.1.5.1Component 

视图的控制类说白了就是ctrl层（把angular1 的controller 和 Directive 合并了）

包含3部分

//#########导入依赖#########
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

//#########基本信息设置#########
@Component({
  selector: 'page-contact',//设置样式
  templateUrl: 'contact.html'//设置页面
})
//#########导出配置ContactPage 方便调用#########
export class ContactPage {
  constructor(public navCtrl: NavController) {
  }
}

 

2.1.5.2 providers 服务

2.1.5.3 NgModule 模块类似于控件

2.1.5.4 Pipe 管道

2.2 项目结构

2.2.1 App 入口（src/app）

 

 2.2.1.1 app.module.ts 入口文件（可从main.ts查看）

 

 

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//加入angularHTTP模块，需要的的angular模块在此统一声明
import {  HttpModule} from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

//所有静态页面对应component.ts在此导入(也可以Page放入Module中引入Module),页面跳转都以对应component.ts对象为准
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import {PaipaiPage} from "../pages/paipai/paipai";
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//自己的service全局的在此声明，其他可在对应页面声明
import {HttpService} from "../service/HttpService";
import {StorageService} from "../service/StorageService";

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    PaipaiPage,
    TabsPage,
    LoginPage
  ],
  imports: [
    //加入angularHTTP模块，需要的的angular模块在此统一声明
    BrowserModule,HttpModule,
    //设置启动的首页
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  //导入所有入口ts
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    PaipaiPage,
    TabsPage,
    LoginPage

  ],
  providers: [
    //自己的service全局的在此声明，其他可在对应页面声明
    HttpService,
    StorageService,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

 2.2.1.2 app.component.ts 首页控制文件

import { Component } from '@angular/core';//必须引入Component 这个是基础
import { Platform } from 'ionic-angular';//加入ionic特性
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

//配置首页
@Component({
  templateUrl: 'app.html'//首页路径
})
//APP首页控制器
export class MyApp {
  //设置首页4个TabsPage
  rootPage:any = TabsPage;//对应../pages/tabs/tabs

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

 对应的view ion-nav root属性值 rootPage(tabs),其他ionic的标签属性可自行参考ionic文档

<ion-nav [root]="rootPage"></ion-nav>

 

 2.2.1.3上述 基本上这就是APP启动加载首页以及配置了，下面学习具体的页面代码的编写