【Ionic+AngularJS 開發】之『我的平常管理』App（二）

 

 

準備工做

資源

預裝工具

安裝bower

1	npm  install  -g bower

 
安裝ngCordova

1	bower  install  ngCordova

 
（*因爲網絡獲取資源的緣由，後面幾回建項目後都沒法下載到，本身便複製了原來的ngCordova目錄（到YourProject\wwww\lib目錄下），發現也是可使用的）

下載好後，在項目的index.hmtl進行引用：

1	< script  src="lib/ngCordova/dist/ng-cordova.js">

 

日曆工具

FullCalendar

 

安裝插件

本項目須要（安裝）的插件有：

插件名	說明	擴展閱讀
cordova-plugin-x-toast	消息提示，使用方法如：$cordovaToast.showShortBottom('屏幕下方提示'); （*僅限平臺運行，瀏覽器調試無效，因此在PC調試時應注意其引發的錯誤而致使後面代碼沒執行）	cordova ionic消息提示
cordova-sqlite-storage	sqlite數據庫	cordova調用本地SQLite數據庫的方法  more...
cordova-plugin-x-socialsharing	內容分享

插件的安裝基本命令是：

1	cordova plugin add XXXX

 
安裝好後可在YourProject\wwww\lib目錄下看到新增的插件目錄，這樣就能夠在項目中引用了（不用使用<script src="xxx">）。
在生成platform後，或需再用

1	cordova prepare

該命令用以複製文件到平臺（並更改一些xml文件的內容）

 

概念理解

service服務

AngularJS服務是一種單例對象，其主要功能是爲實現應用的功能提供數據和對象，經過直接調用服務，能夠將複雜的應用功能進行簡化或分塊化。 按功能的不一樣，分爲內置服務和自定義服務。 

AngularJS提供的經常使用內置服務有：$scope、$http、$window、$location等

自定義服務主要包含如下兩種：
1）使用內置的$provide服務
2）調用模塊中的服務註冊（如factory、service、constant、value等方法）

本項目主要採用service來建立服務（service方法與factory不一樣的是，它能夠接收一個構造函數）

 

設計與開發

app.js

  View Code

自定義服務：$alertPopup

爲方便項目內調用，對$ionicPopup進行封裝，也方便往後擴展。

自定義服務：$db

此$db服務基本就是一個DAL層了，封裝了基本的CRUD功能，並根據項目須要作了一些「默認處理」（在程序初始化時，自動建立記帳和平常表等）。 
（*這個sqlite文件物理路徑很難找，有什麼方法能夠快速定位，還望知道的園友賜教:)）

記帳視圖

HTML部分

  View Code

JavaScript部分

  View Code

說明：

• arrageData()函數根據（按日期倒序）排序好的數據，設置當日最後一條數據（由於是倒序，因此採用最後一條）的ext_displayDivider屬性爲none，如此實如今「日期-當日各項收支項」的顯示效果——按日分割後來發覺也能夠用Ionic的Card，固然也許也有第三方控件能夠直接用了。
• $ionicModal調用的彈窗功能，彈出的是一個完整的頁面，本項目爲了簡便，就直接寫在了同頁面裏「< script id="detail.html" type="text/ng-template">」

 

平常視圖

HTML部分

  View Code

JavaScript部分

  View Code

說明：

• 平常數據的錄入，採用了「即變即更新」的模式，這裏使用$watch函數來監聽數據變化。同時爲了數據更新功能的便利性，在用戶點擊某一日彈框時，自動判斷當日數據是否存在，不存在則插入空數據。

擴展閱讀

AngularJS數據監聽函數$watch

 

打包發佈

生成Android平臺安裝包

使用命令：

1 2	cordova platform add android cordova build android

 （*注意，若是以上步驟出錯，常見緣由有：

• 安裝的Android SDK和打包的SDK版本不對，下載相應SDK
• 環境變量沒有配置好
• 安裝最新node.js

）

*附錄

【源碼文件】

【APK文件】

 

---

做者：Ken 
出處： http://www.cnblogs.com/glife/  本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。