【Ionic+AngularJS 开发】之『我的平常管理』App（一）

写在前面的话

过去一年本身接触了很多手机前端开发，得益于如今手机性能的提高和4G普及，感受使用混合技术开发手机App已经能够知足愈来愈多的应用场景了。新年伊始，对本身2016年所学知识作一个阶段性总结，记录一个自制的“小而萌”Hybrid App开发历程，共勉！

〖扩展阅读〗

企业移动应用开发 混合开发成香饽饽

2016年JavaScript领域中最受欢迎的“明星”们

Hybrid APP混合开发的一些经验和总结

 

App预览

 

（*模糊化的我的数据）

 

简介

我的平常管理App，简称PDM（Personal Daily Management），大数据时代的小数据记录工具，可进行平常记帐、活动记录、事项规划，科学合理安排我的消费、办公学习。

 

使用技术

Ionic+AngularJS+SQLite

〖扩展阅读〗

关于AngularJS学习整理---核心特性

 

设计与开发

开发环境搭建（Android）

• 安装node
• 安装Android SDK
• 安装Python（后面安装npm插件什么的可能用到）
• 安装cnpm（npm大中华版，安装好node后命令行：npm install -g cnpm）

〖扩展阅读〗 

搭建开发环境，并建立工程

 

建立ionic项目

1 ionic start PDM

原本是一条命令就能简单搞定的事，在国内就行不太通了——网络卡半天。这里介绍另外一种“曲折立项”的方法，命令行分裂式开始：

1 ionic start PDM --v1 --skip-npm
2 cd PDM
3 cnpm install --save

至此，项目建立好，命令行在项目所在目录，输入：

1  ionic serve

就可看到（官方Tabs模板的）运行效果了

搭建框架

目录一览

 

项目的主要功能实现都在www目录下，重点看如下文件：

• www/js/app.js ——项目初始化，自定义各类功能等
• www/views/* —— 这是本项目各个界面的实现代码（按一个界面一个子目录区分开来，html文件时视图，js文件是控制器代码）

 

具体可查看源码文件

运行效果以下：

 

 

〖扩展阅读〗

ionic示例app目录结构说明

Ionic的项目结构-工程目录

 

*【源码文件】

 

---

做者：Ken 
出处： http://www.cnblogs.com/glife/  本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。