准备工作

资源

预装工具

安装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/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/lianzhibin/p/6384681.html

【Ionic+AngularJS 开发】之『个人日常管理』App（二）相关推荐

[日推荐]『班级成绩管理』班主任必配装备
2019独角兽企业重金招聘Python工程师标准>>> 又是一年开学季,上学的娃儿们又要投入水深火热的题山书海里了,班主任和家长们也要开始为班上的娃儿们操碎心,为了帮他们减轻负担,小 ...
Android ADB工具-管理设备 app(二)
Android ADB工具-管理设备 app(二) 标签(空格分隔): Android 4.管理设备 app 命令功能 adb install [-r|-s] <apkfile> 安装 ...
实践分享：开始用Cordova+Ionic+AngularJS开发App
http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...
ionic+angularjs开发hybrid App(环境配置+创建测试项目)
本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...
python全栈开发下载_python全栈开发神器 - 『精品软件区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn...
将安卓手机打造成你的python全栈开发利器超神利器- 相信多数安卓用户都使用过Qpython这款移动端的Python编辑器吧?之前我也研究过一阵子这个工具,但因为一次简单的爬虫让我对它失望之极.Q ...
建模助手丨我没卷，但『 Dynamo节点管理』真的好牛啊
上学时,总有人告诉你:我没有复习;然而成绩比谁都好; 职场上,总有人告诉你:我不追热点;然而一抓一个准,推文还贼快; 而我,建模助手,一个小编,被内卷得只剩下"心酸"? " ...
SAP系统日常管理常见 t-code (二)
5 常用事务代码及菜单路径 Trans-action Title Menu Path SM50 Work Process Overview Tools->Administrati ...
『Android基础入门』APP打包发布
[日推荐]『众跑联盟』懒癌拯救者
2019独角兽企业重金招聘Python工程师标准>>> 好不容易放假,懒癌发作,就想瘫在家里不动,正在厨房做饭的老妈让你去楼下卖瓶酱油,怎么破? 万能的小编这就奉上一款小程序拯救你, ...

【Ionic+AngularJS 开发】之『个人日常管理』App（二）

准备工作

资源

预装工具

日历工具

安装插件

概念理解

service服务

设计与开发

app.js

自定义服务：$alertPopup

自定义服务：$db

记账视图

HTML部分

JavaScript部分

日常视图

HTML部分

JavaScript部分

打包发布

生成Android平台安装包

*附录

【源码文件】

【APK文件】

【Ionic+AngularJS 开发】之『个人日常管理』App（二）相关推荐

最新文章

热门文章