`

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启动加载首页以及配置了,下面学习具体的页面代码的编写

 

 

  • 大小: 3.9 KB
分享到:
评论

相关推荐

    最全的ionic+cordova+angularjs安装指南

    在开发跨平台移动应用时,使用Ionic、Cordova和AngularJS结合可以发挥各自的优势。Ionic提供了一套丰富的UI组件和交互模式,使得开发者能够创建外观和体验一致的应用;Cordova则充当桥接角色,它使得开发者能够利用...

    ionic3-cordova-barcode-qrcode-scanner-master_ionic3_phone_

    Cordova 插件是连接 web 应用和设备 API 的桥梁,"cordova-barcode-qrcode-scanner" 就是一个这样的插件,它为 Ionic 应用程序提供了扫描和解析条形码及二维码的能力。 在 "ionic3-cordova-barcode-qrcode-scanner-...

    ionic+phonegap 案例源码

    通过分析提供的文件,我们可以学习到如何组织一个完整的Ionic项目结构,使用Cordova插件来访问设备功能,以及如何利用CSS和JavaScript来实现应用的界面和交互。对于想要入门或者提升Ionic和PhoneGap开发技能的开发者...

    风速测量app。使用ionic+angular+cordava进行嵌入式app的前端开发。.zip

    《风速测量App的开发:基于Ionic+Angular+Cordova的前端技术详解》 在移动应用开发领域,构建跨平台的应用程序已经成为一种趋势。本篇文章将深入探讨如何利用Ionic、Angular和Cordova这三大技术框架,打造一款风速...

    使用Ionic2制作移动应用

    ##### 第二课:剖析Ionic2项目结构 - **项目文件夹**:了解项目的文件夹结构,如`src`存放源代码、`www`存放编译后的文件等。 - **组件文件**:每个页面或组件都有自己的`.html`、`.ts`和`.scss`文件。 - **配置文件...

    完整的Ionic项目实例

    【Ionic项目实例详解】 本文将深入探讨一个名为“ddcanzuo”的完整Ionic项目实例,该实例已经过Cordova编译处理,适用于个人自学。在理解这个项目之前,我们需要先了解 Ionic 和 Cordova 这两个关键的技术框架。 *...

    ionic2 demo

    【标题】:“Ionic2 Demo”项目解析 【描述】:“Ionic2 Demo”是一个基于Ionic2框架的移动应用示例项目,展示了如何使用Ionic2构建原生感观的跨平台移动应用。通过此项目,我们可以深入理解Ionic2的核心特性和开发...

    cordova-ionic-angular 一个完整的社区APP源码

    《基于Cordova、Ionic与Angular构建的社区APP详解》 在移动应用开发领域,Cordova、Ionic和Angular的结合提供了一种高效且跨平台的解决方案。本篇文章将深入探讨使用这些技术栈构建社区应用程序的过程,以及如何...

    Cordova融云即时通讯ionic的完整项目-iOS

    **Cordova融云即时通讯ionic项目详解** Cordova是一款开源的移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用程序。在这个项目中,Cordova与Ionic框架结合,提供了iOS平台上一个完整...

    comp7481as4:使用 IonicFramework 的 Cordova 网络应用程序

    《使用Ionic Framework构建Cordova网络应用详解》 在当今移动应用开发领域,混合应用开发框架如Ionic Framework和Cordova已经成为主流选择。它们结合了Web技术(HTML、CSS、JavaScript)的便捷性和原生应用的性能,...

    ionic模版源代码

    二、 Ionic 模板源代码解析 在Ionic项目中,`www`目录是项目的核心部分,它包含了应用的所有静态资源。以下是对 `www` 目录中主要文件和结构的解读: 1. `index.html`:这是应用的入口文件,通常包含应用的基本...

    ionic 知识

    ### ionic3知识详解 #### 一、绪论 **Ionic**是一款强大的开源框架,用于构建跨平台的移动应用程序。它结合了AngularJS、HTML5和Sass等现代Web技术,使得开发者能够利用熟悉的Web技术栈来开发高性能的移动应用。 ...

    ionic3自定义插件实现(包含jar包调用,文件结构详解)

    2. `src/android`:这个目录包含了所有与 Android 平台相关的代码。通常,这里会有一个 `src/android/com/yourcompany/yourplugin` 目录,其中包含一个继承自 `CordovaPlugin` 的 Java 类,它是与 JavaScript 交互的...

    ionic2example吃乎2一款美食app

    通常,一个Ionic2项目会包含`src`目录(源码)、`config.xml`(Cordova配置文件)、`package.json`(项目依赖)等,开发者可以通过这些文件了解和构建项目。 6. **优化与性能提升**:“吃乎2”作为升级版,强调了更...

    training-vxpower:这是使用Ionic 5 + PHP后端的健身应用程序

    1. **跨平台兼容性**:Ionic 5 可以通过 Cordova 或 Capacitor 在 iOS、Android 和 Web 平台上运行,实现一次编写,多处部署。 2. **Angular 集成**:Angular 的强大功能,如依赖注入、模板驱动和响应式编程,使得...

    基于ionic3的项目基础模板

    - 构建与发布:使用`ionic build`命令进行构建,`ionic cordova prepare`将Web内容打包进原生项目,然后通过各自平台的打包工具(如Xcode或Android Studio)进行发布。 总结,基于Ionic 3的项目基础模板为开发者...

    ionic-best-practices.pdf_ionic_

    **标题解析:** "ionic-best-practices.pdf" 这个标题暗示了文件内容可能是关于Ionic框架的最佳实践指导,特别强调了“5”,这可能是指Ionic框架的第五个主要版本,即Ionic 5。最佳实践通常包括编码规范、设计模式、...

    ionicapp实例

    **IonicApp实例详解** 本文将深入探讨`IonicApp`,这是一个基于 Ionic 框架构建的移动应用实例。Ionic 是一款流行的开源框架,用于构建原生感观的混合移动应用程序,它利用 HTML5、CSS3 和 JavaScript 技术,使得...

    ionic3开发笔记

    #### 三、项目目录结构解析 Ionic项目生成后,通常包含以下关键文件夹: - **hooks**:存放编译过程中可能需要执行的脚本命令。 - **node_modules**:存储项目依赖的第三方库。 - **resources**:包含项目的图标和...

    ionic3官网demo-sidemenu

    4. **Ionic3 示例**:"ionic3官网demo-sidemenu" 提供了完整的代码结构和实现,包括配置文件、页面组件、服务等,可以帮助开发者理解如何在 Ionic3 中创建和管理 sidemenu。通过分析这些示例代码,开发者可以学习到...

Global site tag (gtag.js) - Google Analytics