【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/  本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。