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)
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启动加载首页以及配置了,下面学习具体的页面代码的编写
下一篇: Rails/Ruby 新闻-资源-教程