Ionic+AngularJS 开发之『个人日常管理』App

Posted Pеcu❤lian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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函数来监听数据变化。同时为了数据更新功能的便利性,在用户点击某一日弹框时,自动判断当日数据是否存在,不存在则插入空数据。

 

打包发布

生成android平台安装包

使用命令:

1
2
cordova platform add android
cordova build android

 (*注意,如果以上步骤出错,常见原因有:

  • 安装的Android SDK和打包的SDK版本不对,下载相应SDK
  • 环境变量没有配置好
  • 安装最新node.js

*附录

【源码文件】

【APK文件】

 

以上是关于Ionic+AngularJS 开发之『个人日常管理』App的主要内容,如果未能解决你的问题,请参考以下文章

Ionic+AngularJS 开发之『个人日常管理』App

Ionic+AngularJS 开发之『个人日常管理』App

Ionic+AngularJS 开发之『个人日常管理』App

技术干货前端开发之IONIC移动端开发

Ionic之数据绑定ng-model

Ionic实战:基于AngularJS的移动混合应用开发