欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic2 + cordova 目录结构解析

程序员文章站 2022-03-03 14:59:30
...

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)

 
ionic2 + cordova 目录结构解析
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangular中文教程 
 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启动加载首页以及配置了,下面学习具体的页面代码的编写

 

 

  • ionic2 + cordova 目录结构解析
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangular中文教程 
  • 大小: 3.9 KB