HTML5手機APP開發入門(2)

阿新發表於2016-03-22
HTMLAPP

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注入

 

相關文章