整番隻 Ionic Framework 嘅 Kitchensink Project

咩嘢係 Kitchensink?Kitchen Sink 囉,即係咩 features 都有啲咁解,用嚟睇下啲 features 實際上個 look 係掂樣,改下啲 parameters 又會有咩唔同,主要係俾初哥用,我就攞嚟當作速成,學下 Ionic Framework。

第一步係整隻吉嘅 Ionic project:


ionic start ionic-kitchensink blank

Screen Shot 2015-09-25 at 2.08.15 am

ionic 會幫你準備,你耐心等就得。

Screen Shot 2015-09-25 at 2.08.47 amionic 進行中:

Screen Shot 2015-09-25 at 2.09.55 am

順利完成,可以 run 嚟睇下:


cd ionic-kitchensink

ionic serve

Screen Shot 2015-09-25 at 2.10.40 am

會自動 launch Safari,你 adjust 一下 Safari 個 windows size 就 okay:

Screen Shot 2015-09-25 at 2.11.21 am咩都冇,淨係得個 Title。跟住用你喜歡嘅 editor 開始做嘢,我用 Intellij IDEA(有 community 版,免費嘅):

Screen Shot 2015-09-25 at 2.14.35 amprogram source 可以抄現成嘅,無打到手指痛吖,GitHub 有 open source 借用一下:


<a href="https://github.com/krisrak/ionic-angularjs-kitchensink">https://github.com/krisrak/ionic-angularjs-kitchensink/</a>

Screen Shot 2015-09-25 at 2.16.55 am下載,解壓:

Screen Shot 2015-09-25 at 2.17.39 am首先搞 index.html,ionic generate 嘅 index.html 係咁樣嘅:

Screen Shot 2015-09-25 at 2.18.16 am好簡短,借用嘅 index.html 就比較長:

Screen Shot 2015-09-25 at 2.19.11 am個 body 一般唔會咁長,不這,原作者採用一頁過,所以長咗啲,其實入面已經包括好幾頁,我哋照抄個 body,html tag 就要加番個 parameter,另外就係保留style.css 同更正 ionic.mini.js 個 path:

Screen Shot 2015-09-25 at 2.26.49 am

Screen Shot 2015-09-25 at 2.27.30 am然後搞 app.js,全部照搬過嚟就啱哂:

Screen Shot 2015-09-25 at 2.28.07 am返轉頭睇下個 Safari,畫面改哂:

Screen Shot 2015-09-25 at 2.29.39 am可以試下 click 啲 buttons,應該有反應:

Screen Shot 2015-09-25 at 2.30.13 am

Screen Shot 2015-09-25 at 2.30.31 am

Screen Shot 2015-09-25 at 2.30.45 am

Screen Shot 2015-09-25 at 2.31.04 am

Screen Shot 2015-09-25 at 2.31.13 am

Screen Shot 2015-09-25 at 2.31.26 am

Screen Shot 2015-09-25 at 2.31.36 am要試試 Android 嘛?好簡單:


ionic serve --lab

Screen Shot 2015-09-25 at 2.32.00 amSafari 就會出現一左一右嘅畫面,左邊:

Screen Shot 2015-09-25 at 2.32.59 am最明顯嘅分別就係個 Tabs/Tab buttons,iOS 喺下面,Android 喺上面(剛好 under 個 Navigation Bar,不過有 bug,唔明顯)。

最後仲有一招,就係用 Intellij IDEA debugger:

Screen Shot 2015-09-25 at 2.44.11 am

Screen Shot 2015-09-25 at 2.44.41 am

Itellij IDEA 會啟動 debugger,debugger 又會自動開 Chrome(Chrome 要有 Intellij 個 plugin):

Screen Shot 2015-09-25 at 2.44.51 am唔係好䚍啫?未算,要 launch 個 Developer Tools:

Screen Shot 2015-09-25 at 2.45.38 am

Screen Shot 2015-09-25 at 2.46.04 am留意左上方,可以選不同的手機:

Screen Shot 2015-09-25 at 2.46.52 am

Screen Shot 2015-09-25 at 2.47.11 am也可以揀 iPhone 5:

Screen Shot 2015-09-25 at 2.47.46 am