【Ionic+AngularJS 開發】之『個人日常管理』App（二）

標籤：xxxx   border   current   快速   屬性   複製檔案   lca   life   函數   

準備工作資源預裝工具

安裝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 CodeJavaScript部分 View Code

說明：

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

 

日常視圖HTML部分 View CodeJavaScript部分 View Code

說明：

• 日常資料的錄入，採用了“即變即更新”的模式，這裡使用$watch函數來監聽資料變化。同時為了資料更新功能的便利性，在使用者點擊某一日彈框時，自動判斷當日資料是否存在，不存在則插入空資料。

擴充閱讀

AngularJS資料監聽函數$watch

 

打包發布產生Android平台安裝包

使用命令：

12	cordova platform add androidcordova build android

 （*注意，如果以上步驟出錯，常見原因有：

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

）

*附錄【源碼檔案】【APK檔案】

 

Ken 
出處：http://www.cnblogs.com/glife/ 

本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。 

【Ionic+AngularJS 開發】之『個人日常管理』App（二）