HTML5手机APP开发入门(2)
使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面:
ListPage,DetailPage,AddItemPage
知识点:
(--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
系统会自动创建3个文件,非常方便
编辑add-item.html
编辑add-item.ts
OK 试运行一下
OK 今天就到这里
下次再将如何创建一个DataService,学习如何使用@Injectable,providers 实现Service注入