HTML5手機APP開發入門(2)

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，一般都是網絡的延時造成的；還是得翻牆。

 

$ 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目錄下的源代碼就可以了

修改源文件

1. Home.html，修改成 List.html

通過修改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注入