【Ionic+AngularJS 开发】之『个人日常管理』App（二）
准备工作
资源
预装工具
安装bower
|
1
|
npm install -g bower |
|
1
|
bower install ngCordova |
（*由于网络获取资源的原因，后面几次建项目后都无法下载到，自己便复制了原来的ngCordova目录（到YourProject\wwww\lib目录下），发现也是可以使用的）
下载好后，在项目的index.hmtl进行引用：
|
1
|
<script src="lib/ngCordova/dist/ng-cordova.js"> |
日历工具
安装插件
本项目需要（安装）的插件有：
| 插件名 | 说明 | 扩展阅读 |
|---|---|---|
| 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函数来监听数据变化。同时为了数据更新功能的便利性，在用户点击某一日弹框时，自动判断当日数据是否存在，不存在则插入空数据。
打包发布
生成Android平台安装包
使用命令：
|
1
2
|
cordova platform add androidcordova build android |
（*注意，如果以上步骤出错，常见原因有：
- 安装的Android SDK和打包的SDK版本不对，下载相应SDK
- 环境变量没有配置好
- 安装最新node.js
）
*附录
【源码文件】
【APK文件】
