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或服务器数据。