Ionic Framework Hello World App

完成所有設定後,製作 Hello World App

  • 要建立簡單空白應用程式,請在終端上執行以下命令:
ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory
  • 在 subline / webstrome IDE 中開啟 HelloWorld 專案:
    • 在 www / ditectory 中編輯 index.html
 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Hello World App</h1>
     </ion-header-bar>
     <ion-content>
        <div class="center">Hello World..!</div>
     </ion-content>
    </ion-pane>
 </body>
  • 要從終端在瀏覽器中執行:
ionic serve                  // run the app in browser
  • 要新增平臺:
ionic platform add android   // add android platform
ionic platform add ios       // add ios platform
  • 要在裝置上執行:
adb devices                  // to check devices is connected
ionic run android            // to run on android devices
ionic run ios                // to run on ios devices
  • 要在 livereload 中執行:
ionic run android -c -s -l    // to check app in live reload with console.