Ionic2开发笔记(2)创建子页面及其应用

时间:2024-10-25 22:03:14

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