Ionic 筆記

Ionic v1

What Technologies does it use?

1. AngularJS https://angularjs.org/
2. Apache Cordova https://cordova.apache.org/
3. Node.js https://nodejs.org/
4. Bower https://bower.io/
5. Sass http://sass-lang.com/
6. Gulp http://gulpjs.com/
7. Git https://git-scm.com/

Apache Cordova API

類似JVM跟OS溝通 所以可以跨平台
三層

1. HTML
2. Cordova
3. Mobile OS

Install

$ npm install cordova ionic bower -g
$ ionic --help
echo $PATH

Basic Use

ionic start [options] <PATH> [template]
ionic start app123 tabs
ionic start hello blank

[template]:

1. tabs: 最下面三個tab
2. sidemenu: 按hambarger
3. blank: 空白

Web
ionic serve

打開ios simulator
ionic run ios

好用網站

Docs http://ionicframework.com/docs/
Icon http://ionicons.com/
Ionic Cloud https://ionic.io/cloud
線上模擬 http://play.ionic.io/
Config.xml http://cordova.apache.org/docs/en/latest/config_ref/index.html
Cordova Plugin https://cordova.apache.org/docs/en/latest/
ngCordova Plugin http://ngcordova.com/docs/plugins/

Ionic Server

[–nobrowser|-b]
ionic serve -b
阻止自動開啟瀏覽器

[–lab|-l]
ionic serve -l
http://localhost:8100/ionic-lab
會秀出ios 跟 android長怎樣

ADB

在~/Library/Android/sdk/platform-tools
$ adb install [path-to-your-apk-file]
待補

Publishing 發布

詳細：http://ionicframework.com/docs/guide/publishing.html

Android

下載SDK or Android Studio
ionic platform add android
ionic build android --release
取得了一個未簽名的apk

前往該資料夾
$ cd /platforms/android/build/outputs/apk/ => HelloWorld-release-unsigned.apk

產生金鑰
$ keytool -genkey -v -keystore my-release-key.keystore -alias your_alias_name -keyalg RSA -keysize 2048 -validity 10000

簽名apk檔
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk your_alias_name

前往android sdk資料夾
$ ~/Library/Android/sdk/build-tools/25.0.0

將以簽名的apk檔優化
$ ./zipalign -v 4 /platforms/android/build/outputs/apk/HelloWorld-release-unsigned.apk HelloWorld.apk

iOS

ionic platform add ios
ionic build ios --release
Open Xcode

Packages

$ bower install ngCordova --save
www/index.html加上
<script src="lib/ngCordova/dist/ng-cordova.js"></script>

偵測裝置資訊

$ cordova plugin add cordova-plugin-device

angular.module('starter', ['ionic', 'ngCordova'])

...

.controller('DeviceCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
    $ionicPlatform.ready(function() {
        $scope.$apply(function() {
            $scope.device = $cordovaDevice.getDevice();
            $scope.model = $cordovaDevice.getModel();
            $scope.platform = $cordovaDevice.getPlatform();
            $scope.uuid = $cordovaDevice.getUUID();
            $scope.version = $cordovaDevice.getVersion();
        });
    });
})

<ion-content ng-controller="DeviceCtrl">
  <ion-list>
    <ion-item>{{ device }}</ion-item>
    <ion-item>{{ model }}</ion-item>
    <ion-item>{{ platform }}</ion-item>
    <ion-item>{{ uuid }}</ion-item>
    <ion-item>{{ version }}</ion-item>
  </ion-list>
</ion-content>

開發人員工具

chrome://inspect

tags: Ionic HTML