HTML5技术

【Ionic+AngularJS 开发】之『个人日常管理』App(二) - Glife

字号+ 作者:H5之家 来源:H5之家 2017-02-10 11:01 我要评论( )

准备工作资源预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的) 下载好

准备工作 资源 预装工具

安装bower

npm install -g bower

 
安装ngCordova

bower install ngCordova

 
(*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的)


下载好后,在项目的index.hmtl进行引用:

<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 内容分享  


插件的安装基本命令是:

cordova plugin add XXXX

 
安装好后可在YourProject\wwww\lib目录下看到新增的插件目录,这样就可以在项目中引用了(不用使用<script src="xxx">)。
在生成platform后,或需再用

cordova prepare

该命令用以复制文件到平台(并更改一些xml文件的内容)

 

概念理解 service服务

AngularJS服务是一种单例对象,其主要功能是为实现应用的功能提供数据和对象,通过直接调用服务,可以将复杂的应用功能进行简化或分块化。 按功能的不同,分为内置服务和自定义服务。

AngularJS提供的常用内置服务有:$scope、$http、$window、$location等


自定义服务主要包含以下两种:
1)使用内置的$provide服务
2)调用模块中的服务注册(如factory、service、constant、value等方法)


本项目主要采用service来创建服务(service方法与factory不同的是,它可以接收一个构造函数)

 

设计与开发 app.js

1 angular.module('pdm' 2 , ['ionic' 3 , 'ngCordova' 4 ]) 5 .config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) { $ionicConfigProvider.tabs.position('bottom'); }) 13 .run(function ($ionicPlatform) { }) .service('$alertPopup', 19 ['$ionicPopup' 20 , function ($ionicPopup) { (content, title) { 22 if (title == undefined || title == null)title = '提示'; 23 var alertPopup = $ionicPopup.alert({ 24 title: title, 25 template: content 26 }); 27 28 alertPopup.then(function (res) { 29 log('alertPopup.then: ' + res); 30 }); 31 } 32 }]) .service('$db', ['$cordovaSQLite', '$alertPopup', '$cordovaToast' 36 , function ($cordovaSQLite, $alertPopup, $cordovaToast) { db = null; 39 try { 40 var _dbName = 'sk'; 41 if (!(window.cordova && window.SQLitePlugin)) { db = window.openDatabase(_dbName, '1.0', _dbName, 100 * 1024 * 1024); db.transaction( 48 function (transaction) { 49 transaction.executeSql("CREATE TABLE IF NOT EXISTS Finacial_KeepAccount " + 50 "( id integer primary key" + 51 ", account text " + 52 ", SuitType text " + 53 ", ItemText text " + 54 ", MoneyFlowDirect text " + 55 ", Cash REAL " + 56 ", AccountType text " + 57 ", RecordDate text " + 58 ", Remark text" + 59 ")"); 60 } 61 ); $cordovaSQLite.execute(db, 'CREATE TABLE IF NOT EXISTS Life_DailyActivity(id integer primary key' + 66 ', account text' + 67 ', Date text' + 68 ', Business text' + 69 ', Study text' + 70 ', Health text' + 71 ', Sport text' + 72 ', Others text' + 73 ', Remark text' + 74 ')'); 75 76 } 77 else { 78 $alertPopup('fail create ' + _dbName + '.db'); 79 } 80 } catch (e) { 81 $alertPopup('fail init: ' + e.toString(), '$db Err'); 82 } db_exec(sql, param, succ_callback, err_callback){ 86 if (param == undefined || param == null) param = []; 87 $cordovaSQLite.execute(db, sql, param) 88 .then(function (rst) { 89 if (succ_callback == undefined)log('exec: ' + sql); 90 else succ_callback(rst); 91 }, function (err) { 92 if (err_callback == undefined)$alertPopup('exec error: ' + err.message); 93 else err_callback(err); 94 }); 95 } { _exec: function (sql, param, succ_callback, err_callback) { 101 db_exec(sql, param, succ_callback, err_callback); 102 }, get: function (tbl, cndt, callback) { 105 var sql = 'SELECT * FROM ' + tbl + ' WHERE 1=1 '; 106 if (cndt != undefined && cndt != '')sql += (' AND ' + cndt); 107 db_exec(sql, [], 108 function (rst) { 109 var data = []; 110 for (var i = 0; i < rst.rows.length; i++) data.push(rst.rows.item(i)); 111 callback(data); 112 }); 113 }, add: function (tbl, fields, valueArr, silenceExec) { 116 var _param = ''; 117 for (var i = 0; i < fields.split(',').length; i++)_param += ',?'; 118 _param = _param.substr(1); 119 var sql = 'INSERT INTO ' + tbl + '(' + fields + ') values(' + _param + ')'; 120 db_exec(sql, valueArr, 121 function (rst) { 122 if (silenceExec == undefined || silenceExec != true) 123 if(!g_debug) 124 $cordovaToast.showShortCenter('add to ' + tbl + ' success'); 125 }); 126 }, update: function (tbl, fields, valueArr, cndt, silenceExec) { 129 var fv = ''; 130 var flds = fields.split(','); 131 for (var i = 0; i < flds.length; i++) fv += (', ' + flds[i] + '=? '); 132 fv = fv.substr(1); 133 var sql = 'UPDATE ' + tbl + ' SET ' + fv + ' WHERE ' + cndt; 134 db_exec(sql, valueArr, 135 function (rst) { 136 if (silenceExec == undefined || silenceExec != true) 137 if(!g_debug) 138 $cordovaToast.showShortCenter('update ' + tbl + ' success'); 139 }); 140 }, : function (tbl, cndt, silenceExec) { 143 var sql = 'DELETE FROM ' + tbl + ' WHERE ' + cndt; 144 db_exec(sql, [], 145 function (rst) { 146 if (silenceExec == undefined || silenceExec != true) 147 if(!g_debug) 148 $cordovaToast.showShortCenter('delete from ' + tbl + ' success'); 149 }); 150 } 151 152 } 153 }]) ;

View Code

自定义服务:$alertPopup

为方便项目内调用,对$ionicPopup进行封装,也方便日后扩展。

自定义服务:$db

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【福利大放送】不止是Android,Github超高影响力开源大放送,学习开发必备教科书 - 南尘

    【福利大放送】不止是Android,Github超高影响力开源大放送,学习开

    2017-02-09 12:04

  • 高性能移动端开发 - beidan

    高性能移动端开发 - beidan

    2017-02-09 12:00

  • 【Ionic+AngularJS 开发】之『个人日常管理』App(一) - Glife

    【Ionic+AngularJS 开发】之『个人日常管理』App(一) - Glife

    2017-02-08 14:00

  • 我的编程经历与我所热爱的游戏服务端开发 - 千年风雅丶

    我的编程经历与我所热爱的游戏服务端开发 - 千年风雅丶

    2017-02-04 16:00

网友点评
r