HTML5手机APP开发入门(2)
HTML5手机APP开发入门(2)
课程内容
使用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目录下的源代码就可以了
修改源文件
通过修改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注入
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix