HTML5手机APP开发入门(2)

Ionic v2+Angular2 APP开发
本教程介绍如何使用Ionic Framework v2结合Angular2构建一个基本的手机应用,包括创建项目、添加新模块、实现页面导航及数据绑定等功能。

HTML5手机APP开发入门(2)

课程内容

使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面:

ListPage,DetailPage,AddItemPage

知识点:

  1. 如何添加新的模块(page)
  2. 如何实现页面导航
  3. 如何实现对数据的绑定

创建项目

(--ts:表示使用typescript语法)

$ ionic start contact-app blank –v2 --ts

 

创建完成后 运行一下看看

注意:这里又有可能出现很多error,warn,一般都是网络的延时造成的;还是得FQ。

 

$ cd contact-app

$ ionic serve

 

注意:这里有一个bug

This error is caused by incompatibility between TypeScript and Angular and will be resolved with the next Ionic2 release (beta.4) because the master is already updated to Angular2 beta.8.

 

开始开发

打开ATOM->Open folder(contact-app)

以下是创建的项目结构,只要修改pages目录下的源代码就可以了

修改源文件

通过修改homePage 学习ionic是如何加载view,view-controller的关系

List.html相当于mvc中view,list.ts就是controller

 

  1. 修改list.html,联系人使用list来显示信息

  1. 修改list.ts 加载contacts

  1. 运行结果如下

 

  1. 做一个新建联系人的page,单击New button时页面导航到新增页面

    打开cmd 执行添加页面的命令

    $ ionic g page AddItem

 

系统会自动创建3个文件,非常方便

编辑add-item.html

编辑add-item.ts

  1. 编辑list.ts 添加导航,页面切换到add-item

    NavController,NavParams 用于页面导航

    参考

    http://ionicframework.com/docs/v2/api/components/nav/NavController/

     

  1. 再添加一个DetailItemPage 单击list Item 页面跳转到DetailPage

    $ ionic g page DetailItem

  1. 修改DetailItem.html

  2. 修改detail-item.ts

  1. 修改list.ts 添加导航

 

OK 试运行一下

 

OK 今天就到这里

 

下次再将如何创建一个DataService,学习如何使用@Injectable,providers 实现Service注入

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值