HTML5手机APP开发入门(2)
2016-03-22 13:15
696 查看
[b]HTML5手机APP开发入门(2) [/b]
ListPage,DetailPage,AddItemPage
知识点:
如何添加新的模块(page)
如何实现页面导航
如何实现对数据的绑定
$ 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.
以下是创建的项目结构,只要修改pages目录下的源代码就可以了
通过修改homePage 学习ionic是如何加载view,view-controller的关系
List.html相当于mvc中view,list.ts就是controller
修改list.html,联系人使用list来显示信息
修改list.ts 加载contacts
运行结果如下
做一个新建联系人的page,单击New button时页面导航到新增页面
打开cmd 执行添加页面的命令
$ ionic g page AddItem
系统会自动创建3个文件,非常方便
编辑add-item.html
编辑add-item.ts
编辑list.ts 添加导航,页面切换到add-item
NavController,NavParams 用于页面导航
参考
http://ionicframework.com/docs/v2/api/components/nav/NavController/
再添加一个DetailItemPage 单击list Item 页面跳转到DetailPage
$ ionic g page DetailItem
修改DetailItem.html
修改detail-item.ts
修改list.ts 添加导航
OK 试运行一下
OK 今天就到这里
下次再将如何创建一个DataService,学习如何使用@Injectable,providers 实现Service注入
课程内容
使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面:ListPage,DetailPage,AddItemPage
知识点:
如何添加新的模块(page)
如何实现页面导航
如何实现对数据的绑定
创建项目
(--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目录下的源代码就可以了
修改源文件
Home.html,修改成 List.html通过修改homePage 学习ionic是如何加载view,view-controller的关系
List.html相当于mvc中view,list.ts就是controller
修改list.html,联系人使用list来显示信息
修改list.ts 加载contacts
运行结果如下
做一个新建联系人的page,单击New button时页面导航到新增页面
打开cmd 执行添加页面的命令
$ ionic g page AddItem
系统会自动创建3个文件,非常方便
编辑add-item.html
编辑add-item.ts
编辑list.ts 添加导航,页面切换到add-item
NavController,NavParams 用于页面导航
参考
http://ionicframework.com/docs/v2/api/components/nav/NavController/
再添加一个DetailItemPage 单击list Item 页面跳转到DetailPage
$ ionic g page DetailItem
修改DetailItem.html
修改detail-item.ts
修改list.ts 添加导航
OK 试运行一下
OK 今天就到这里
下次再将如何创建一个DataService,学习如何使用@Injectable,providers 实现Service注入
相关文章推荐
- 将状态栏交给application管理
- Android frameworks层按键处理流程
- android 图标解决方案汇总
- 获取Android SHA1与Package
- iOS 原生二维码扫描crush([AVCaptureMetadataOutput setMetadataObjectTypes:] - unsupported type found. Use -)
- You third iOS app,解决1The identity used to sign the executable is no longer valid 2.A valid provisioning profile for this executable was not found。
- android launcher3 home页简易分析
- swift2使用sqlite数据库及常见错误总结(模拟机下)
- iOS开发 选择目录未找到
- Web App、Hybrid App、 Native App
- Unity Shaders and Effects Cookbook (2-1) 修改 UV 坐标实现纹理贴图的滚动 模拟水流效果
- WebView 返回键 onReceivedTitle 不触发 问题解决
- Android之CookieStore的持久化
- Swift函数和闭包
- WIn32中CInternetSession运行异常(afxCurrentAppName 为空)
- Android的multidex使用及优化
- Android新手入门2016(11)--非阻塞对话框AlertDialog
- iOS-AutoresizesSubviews 属性详解
- iOS 百度推送
- APP界面设计之页面布局的22条基本原则