2015年11月18日

Ionic Framework 教學 - 2. 建立一個測試App

上一章

接著我們來試著建立一個測試  App
  ## create mysidemenu based on sidemenu project

  $ ionic start mysidemenu sidemenu

  ## go to mysidemenu folder

  $ cd mysidemenu

  ## list files

  $ ls  # on mac
  $ dir  # on windows

  ## open mysidemenu folder, take a look at the folder structure

  $ open .  # on mac
  $ explorer .  # on windows

  ## start running my app
  ## run this command in mysidemenu folder

  $ ionic serve

  ## (and choose 'localhost')

  ## Then, navigate your browser to http://localhost:8100
  ## At this moment, you may want to install Chrome if you don't have one.
  ## https://www.google.com/chrome/browser/desktop/index.html


這樣,我們就從 sidemenu 這個樣板建立了一個 mysidemenu 的 App,接著你就可以打開瀏覽器來測試看看,在 Chrome 裡面,你可以使用 Command + Option + i 來開啟開發人員工具(Windows 則使用 F12),在 Network 頁籤你可以看到載入訊息,在 Console 頁籤裡你可以看到錯誤訊息(如果有的話),並且你可以用 Command + Shift + m 來模擬手機螢幕,在這裡你可能會需要重新整理頁面來套用適當的版面。

如果你還沒有一個很好的程式編輯器,我們可以推薦幾個適合入門又強大的編輯器給你

1. Sublime Text
http://www.sublimetext.com/2
2. Atom
https://atom.io/
3. Visual Code
https://www.visualstudio.com/zh-tw/products/code-vs.aspx

前往下一章- 製作一個靜態頁面