Ionic2开发笔记(2)创建子页面及其应用
1. 当你第一次产生ionic2应用程序,这是生成的项目结构
├── ├── config.xml 这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备。
├── hooks
├── ionic.config.json ionic版本信息 "name": "Ion2","app_id": "","v2": true,"typescript": true
├── node_modules 包含了npm包
├── package.json 这些都是包构建ionic应用程序所必需的
├── platforms 这就是平台的具体构建,构建工具和包/库存储.例如,添加一个平台, ionic platform add android,这将文件夹安卓文件夹添加到文件夹中。
├── plugins 这就是cordova plugins。cordova插件允许你的应用在移动设备本地功能,e。g访问的媒体存储设备,甚至蓝牙API。
├── resources 这也包含特定于平台的资源(如图标和启动屏幕)
├── src 这就是我们花费我们大部分的时间建立应用程序。它包含结构化程序的源代码。
├── tsconfig.json
├── tslint.json
我们几乎总是会花90%的时间在src文件夹,这就是应用程序逻辑。然而整个应用程序通常从一个简单的src /index.html文件,它在构建复制到一个新文件夹www
2. 上篇说道创建了一个空的demo,现在来创建子页面,进入项目文件(我的项目放在C盘)
$ cd demo
$ ionic g page new
创建了一个new页面,此时项目的pages会多了一个文件夹,包含html,scss,ts文件。
3.创建完成后只是一个文件,它并未和程序关联起来,
首先,在app文件夹下打开app.module.ts
然后,把html页面导入进来 import { NewPage } from '../pages/new/new';
其次,在declarations和entryComponents把NewPage加上 。
再次,打开想要从哪里跳转的页面的HTML文件,加上一个(单击)事件<button ion-button color="secondary" (click)="info()">跳转</button>
之后,打开它的TS文件把要跳转的页面导入进来 import { NewPage } from '../pages/new/new';
最后,在它的TS页面中export class ContactPage{}加上 点击方法 info(){this.navCtrl.push(NewPage);}
这样一个跳转就完成了,创建components和providers和page一样,不同的是在app.module.ts下放入相应的位置例如:
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},getData],getData就是一个providers自定义服务名。
4. 下一节讲解http读取本地JSON或服务器数据。