iT邦幫忙

DAY 4
1

開發 Mobile 手機的新一代霸主-ionic framework系列 第 4

建立第一個 Project

  • 分享至 

  • xImage
  •  

建立ionic Project 有二種方式,第一種可以使用 empty的方式,第二個是使用目前官方提供的二種 sample Project 來建立。

第一種blank方式

建立一個 ionic 空的Project 命名為 test2

第二種採用ionic 提供的sample方式

建立了一個 tabs的sample Project 命名成 tabProject

啟動 ionic serve,使用ionic serve 做 live reload 的開發

啟動後會自動帶啟瀏灠器,http://xxx.xxx.xxx.xxx:8100/#/tab/dash

預設開啟8100 port

預設的 sample Project js 包括 app.js 、controller.js 及 service.js

  • app : 負責 routes
  • controller: 定義所有 angular 的controller
  • service: 如果有開發相關的 angular service 就放在這邊

試著修改Dashboard

打開 template/tab-dash.html,簡單的在 ion-content 中間輸入一些文字,並且儲存

剛剛的Browser應該 liveReload 了你修改的內容

大功告成,你己經完成了建立ionic Project 並且修改 page,至於 route 、controller 及 view 的規則會在之後深入的說明。


上一篇
ionic 語法介紹
下一篇
ionic 中的 CSS components
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言