咩嘢係 Kitchensink?Kitchen Sink 囉,即係咩 features 都有啲咁解,用嚟睇下啲 features 實際上個 look 係掂樣,改下啲 parameters 又會有咩唔同,主要係俾初哥用,我就攞嚟當作速成,學下 Ionic Framework。
第一步係整隻吉嘅 Ionic project:
ionic start ionic-kitchensink blank
ionic 會幫你準備,你耐心等就得。
順利完成,可以 run 嚟睇下:
cd ionic-kitchensink ionic serve
會自動 launch Safari,你 adjust 一下 Safari 個 windows size 就 okay:
咩都冇,淨係得個 Title。跟住用你喜歡嘅 editor 開始做嘢,我用 Intellij IDEA(有 community 版,免費嘅):
program source 可以抄現成嘅,無打到手指痛吖,GitHub 有 open source 借用一下:
<a href="https://github.com/krisrak/ionic-angularjs-kitchensink">https://github.com/krisrak/ionic-angularjs-kitchensink/</a>
首先搞 index.html,ionic generate 嘅 index.html 係咁樣嘅:
個 body 一般唔會咁長,不這,原作者採用一頁過,所以長咗啲,其實入面已經包括好幾頁,我哋照抄個 body,html tag 就要加番個 parameter,另外就係保留style.css 同更正 ionic.mini.js 個 path:
ionic serve --lab
最明顯嘅分別就係個 Tabs/Tab buttons,iOS 喺下面,Android 喺上面(剛好 under 個 Navigation Bar,不過有 bug,唔明顯)。
最後仲有一招,就係用 Intellij IDEA debugger:
Itellij IDEA 會啟動 debugger,debugger 又會自動開 Chrome(Chrome 要有 Intellij 個 plugin):