Category Archives: Ionic Framework

Ionic Icon front Free – 免費的 Ionic Icon font ionicons.com

今天為自己寫了一個筆記..
方便自己在開發用Ionic Framework寫的 Mobile Applications
時加 icon / button icon

像我這一類的沒有藝術感/美感的 developer..
找到些Bootstrap / icon / graphic pack 或容易用的framework來解決手機程式介面設計十分重要
很多時候我的程式開發停滯完成不了..主要是因為想不到怎樣完成UI/UX

今天和大家介紹的這個一網頁..他有很多的Icon Font
Ionicons
http://ionicons.com/
Ionicons.com

當大家開始寫Ionic時..這些Icon font已經包含在你的Project上
但是怎樣知道怎樣可以apply 這些Icon font

使用方法十分簡單
我們只需要在 HTML/Ionic tag上加上相對的CSS Class 便可以
E.G.
如果我想在我程式上的 Button 加上一個 volume的 icon 我可以 用以下的Mark up

  <button class="button button-balanced icon ion-volume-high"></button>

怎樣知道那個Icon Font的CSS Class是什麼?
http://ionicons.com/
當大家進入了網頁之後..
只需要選擇想使用的Icon之後他便會顯示相對的CSS Class 名稱..
Font Icon for Ionic Framework Application

Hope you find it useful

Ionic Uncaught ReferenceError: $rootScope is not defined

今天在ionic application 上需要使用到 $rootScope
當我執行這個app時出現了以下的錯誤信息

Uncaught ReferenceError: $rootScope is not defined
解決方法十分簡單
我們只需要在 function上加上 $rootScope 這個dependency 便可以了

E.G.

.run(function ($ionicPlatform, <strong> $rootScope</strong>) {
    $rootScope.$on("", function(){});
  
  }

Hope you find it useful

Ionic Error: EXDEV, cross-device link not permitted

今天當我嘗試在我的 Ionic Framework Project 安裝 cordova plugin 時出現了以下的錯誤信息..

<code class="language-text" data-lang="text"><a href="https://github.com/phonegap-build/PushPlugin.git" target="_blank">cordova plugin add https://github.com/phonegap-build/PushPlugin.git</a></code>

Error: EXDEV, cross-device link not permitted
Ionic Error: EXDEV, cross-device link not permitted
做了一會research 之後發現..
應該是 電腦上安裝了的 Corodova 版本有問題..
所以只需要 安裝舊一些的版本便可以解決這個問題

解決方法
command prompt 上執行以下指令去安裝 指定版本的 cordova

npm install -g cordova@5.0.0

npm install -g cordova@ version
安裝完了再次嘗試安裝 這個cordova plugin..
e.g. Ionic / Cordova Push Notification plugin

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

Able to install Cordova plugin

成功安裝

Hope you find it useful

Ionic Publish Android application – 在Ionic 上如何發佈 Android 程式

回到英國之後.. 開始專注使用Ionic Framework來開發程式

因為常常想到新的功能..所以便常常要再發佈更新到 Google PlayStore

為了方便自己.還是寫一個筆記方便自己將來發佈 Android 程式

我相信大家還是在你的 Ionic Project Directory
你可以使用以下指令 去建立 一個”Release Build

cordova build --release android

Ionic Release Build
之後我們便需要去到輸出 apk 檔的 資料夾 以方便之前的動作
通常在Ionic Project上的 platforms\android\ant-build 資料夾上
Ionic Build directory

e.g.

cd platforms\android\ant-build

之後我們便會看到 ionic generateunsigned release apk檔案
CordovaApp-release-unsigned.apk on Ionic Build Folder

之後我們便可以 Sign 這個 unsigned releaseapk
Ionic defaultunsigned release apk名是這樣的 “CordovaApp-release-unsigned.apk

我們可以用以下指令到簽署unsigned apk

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [Full filename and path.keystore / 你的keystore的 路徑和檔案名] CordovaApp-release-unsigned.apk [alias name / 別名] 

e.g.

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore D:\Ionic\SampleProject\keystores\SharechiwaiDemoReleaseKey.keystore CordovaApp-release-unsigned.apk ShareChiWaiDemoReleaseKey 

之後他們叫你輸入之前在這個keystore上設定的 密碼
use jarsinger to sign unsigned apk
* keystore 是在之前的網誌上有介紹給大家如何建立自己的sign key

詳情可以參考以下網誌

Useful command for Android Development 1 – 一些有用的在開發Android程式時幾有用的指令筆記

Ionic Android Signed Apk
完成後便可以使用 “zipalign” 功具來 優化 Android 程式.. 主要用來壓縮apk內的 圖/資料檔等等..
以便減輕記憶體/RAM 的使用量

zipalign -v 4 CordovaApp-release-unsigned.apk [Your APK name / 你想出現的檔案名].apk

e.g.

zipalign -v 4 CordovaApp-release-unsigned.apk sharechiwai_demo.apk

zipalign - compress apk
可以準備 Upload 你的 APK 了
Signed APK with zipalign

Hope you find it useful