Ionic 筆記

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.keyst 大专栏  Ionic 筆記ore 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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(); }); }); })

1 2 3 4 5 6 7 8 9

<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