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启动加载首页以及配置了,下面学习具体的页面代码的编写
相关推荐
在开发跨平台移动应用时,使用Ionic、Cordova和AngularJS结合可以发挥各自的优势。Ionic提供了一套丰富的UI组件和交互模式,使得开发者能够创建外观和体验一致的应用;Cordova则充当桥接角色,它使得开发者能够利用...
Cordova 插件是连接 web 应用和设备 API 的桥梁,"cordova-barcode-qrcode-scanner" 就是一个这样的插件,它为 Ionic 应用程序提供了扫描和解析条形码及二维码的能力。 在 "ionic3-cordova-barcode-qrcode-scanner-...
通过分析提供的文件,我们可以学习到如何组织一个完整的Ionic项目结构,使用Cordova插件来访问设备功能,以及如何利用CSS和JavaScript来实现应用的界面和交互。对于想要入门或者提升Ionic和PhoneGap开发技能的开发者...
《风速测量App的开发:基于Ionic+Angular+Cordova的前端技术详解》 在移动应用开发领域,构建跨平台的应用程序已经成为一种趋势。本篇文章将深入探讨如何利用Ionic、Angular和Cordova这三大技术框架,打造一款风速...
##### 第二课:剖析Ionic2项目结构 - **项目文件夹**:了解项目的文件夹结构,如`src`存放源代码、`www`存放编译后的文件等。 - **组件文件**:每个页面或组件都有自己的`.html`、`.ts`和`.scss`文件。 - **配置文件...
【Ionic项目实例详解】 本文将深入探讨一个名为“ddcanzuo”的完整Ionic项目实例,该实例已经过Cordova编译处理,适用于个人自学。在理解这个项目之前,我们需要先了解 Ionic 和 Cordova 这两个关键的技术框架。 *...
【标题】:“Ionic2 Demo”项目解析 【描述】:“Ionic2 Demo”是一个基于Ionic2框架的移动应用示例项目,展示了如何使用Ionic2构建原生感观的跨平台移动应用。通过此项目,我们可以深入理解Ionic2的核心特性和开发...
《基于Cordova、Ionic与Angular构建的社区APP详解》 在移动应用开发领域,Cordova、Ionic和Angular的结合提供了一种高效且跨平台的解决方案。本篇文章将深入探讨使用这些技术栈构建社区应用程序的过程,以及如何...
**Cordova融云即时通讯ionic项目详解** Cordova是一款开源的移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用程序。在这个项目中,Cordova与Ionic框架结合,提供了iOS平台上一个完整...
《使用Ionic Framework构建Cordova网络应用详解》 在当今移动应用开发领域,混合应用开发框架如Ionic Framework和Cordova已经成为主流选择。它们结合了Web技术(HTML、CSS、JavaScript)的便捷性和原生应用的性能,...
二、 Ionic 模板源代码解析 在Ionic项目中,`www`目录是项目的核心部分,它包含了应用的所有静态资源。以下是对 `www` 目录中主要文件和结构的解读: 1. `index.html`:这是应用的入口文件,通常包含应用的基本...
### ionic3知识详解 #### 一、绪论 **Ionic**是一款强大的开源框架,用于构建跨平台的移动应用程序。它结合了AngularJS、HTML5和Sass等现代Web技术,使得开发者能够利用熟悉的Web技术栈来开发高性能的移动应用。 ...
2. `src/android`:这个目录包含了所有与 Android 平台相关的代码。通常,这里会有一个 `src/android/com/yourcompany/yourplugin` 目录,其中包含一个继承自 `CordovaPlugin` 的 Java 类,它是与 JavaScript 交互的...
通常,一个Ionic2项目会包含`src`目录(源码)、`config.xml`(Cordova配置文件)、`package.json`(项目依赖)等,开发者可以通过这些文件了解和构建项目。 6. **优化与性能提升**:“吃乎2”作为升级版,强调了更...
1. **跨平台兼容性**:Ionic 5 可以通过 Cordova 或 Capacitor 在 iOS、Android 和 Web 平台上运行,实现一次编写,多处部署。 2. **Angular 集成**:Angular 的强大功能,如依赖注入、模板驱动和响应式编程,使得...
- 构建与发布:使用`ionic build`命令进行构建,`ionic cordova prepare`将Web内容打包进原生项目,然后通过各自平台的打包工具(如Xcode或Android Studio)进行发布。 总结,基于Ionic 3的项目基础模板为开发者...
**标题解析:** "ionic-best-practices.pdf" 这个标题暗示了文件内容可能是关于Ionic框架的最佳实践指导,特别强调了“5”,这可能是指Ionic框架的第五个主要版本,即Ionic 5。最佳实践通常包括编码规范、设计模式、...
**IonicApp实例详解** 本文将深入探讨`IonicApp`,这是一个基于 Ionic 框架构建的移动应用实例。Ionic 是一款流行的开源框架,用于构建原生感观的混合移动应用程序,它利用 HTML5、CSS3 和 JavaScript 技术,使得...
#### 三、项目目录结构解析 Ionic项目生成后,通常包含以下关键文件夹: - **hooks**:存放编译过程中可能需要执行的脚本命令。 - **node_modules**:存储项目依赖的第三方库。 - **resources**:包含项目的图标和...
4. **Ionic3 示例**:"ionic3官网demo-sidemenu" 提供了完整的代码结构和实现,包括配置文件、页面组件、服务等,可以帮助开发者理解如何在 Ionic3 中创建和管理 sidemenu。通过分析这些示例代码,开发者可以学习到...