写在前面的话

过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了。新年伊始,对自己2016年所学知识做一个阶段性总结,记录一个自制的“小而萌”Hybrid App开发历程,共勉!

App预览

(*模糊化的个人数据)

简介

个人日常管理App,简称PDM(Personal Daily Management),大数据时代的小数据记录工具,可进行日常记账、活动记录、事项规划,科学合理安排个人消费、办公学习。

使用技术

Ionic+AngularJS+SQLite

设计与开发

开发环境搭建(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文件是控制器代码)

具体可查看源码文件

运行效果如下:

*【源码文件


作者:Ken 
出处:http://www.cnblogs.com/glife/

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

转载

【Ionic+AngularJS 开发】之『个人日常管理』App(一)的更多相关文章

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

    准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后 ...

  2. 实践分享:开始用Cordova+Ionic+AngularJS开发App

    http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...

  3. Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

    ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index- ...

  4. ionic+angularjs开发hybrid App(环境配置+创建测试项目)

    本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...

  5. Cordova Ionic AngularJS

    实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html

  6. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  7. WebApp开发框架Ionic+AngularJS+Cordova

    目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用 ...

  8. HybridAPP开发框架Ionic+AngularJS+Cordova搭建

    Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lis ...

  9. linux 的基本操作(linux系统的日常管理)

    系统的日常管理 笔者在前面介绍的内容都为linux系统基础类的,如果你现在把前面的内容全部很好的掌握了,那最好了.不过笔者要说的是,即使你完全掌握了,你现在还是不能作为一名合格的linux系统管理员的 ...

随机推荐

  1. Qt & MySQL

    Qt中如何进行MySQL连接与操作步骤: 1.向工程中的.pro文件增加QT += sql; 2.写一个通用的数据库连接类(Connect),一个static方法(CreateConnection), ...

  2. 深入浅出理解linux inode结构【转】

    本文转载自:https://blog.csdn.net/fantasyhujian/article/details/9151615 一.inode是什么? 参考文档:http://tech.diann ...

  3. 虚拟化网络之OpenvSwitch

    OpenvSwitch简称OVS,官网(http://openvswitch.org/) OVS是一个高质量.多层的虚拟交换软件,即虚拟交换机. OpenvSwitch的见的相关组件: ovs-vsw ...

  4. .net 常用的插件列表

    1,.net 分布式Session 解决方案RedisSessionStateProvider 2,c# 表达式树查看工具 Expression Tree Visualizer 3,sqlbuilde ...

  5. 灰色大气企业html5模板

    灰色大气企业html网页模板是一款以灰色为背景的大气简洁企业html5网站模板. 下载地址:http://www.huiyi8.com/sc/10860.html

  6. UVA 111 简单DP 但是有坑

    题目传送门:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18201 其实是一道不算难的DP,但是搞了好久,才发现原来是题目没 ...

  7. zoj 3813 Alternating Sum(2014ACMICPC Regional 牡丹江站网络赛 E)

    1.http://blog.csdn.net/dyx404514/article/details/39122743 思路:题目意思很清楚了,这里只说思路. 设区间[L,R],区间长度为len=(R-L ...

  8. leetcode 102 Binary Tree Level Order Traversal(DFS||BFS)

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  9. 洛谷 P2285 [HNOI2004]打鼹鼠

    题目描述 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探出头来透透气. ...

  10. 洛谷 1131 [ZJOI2007]时态同步——树形dp

    题目:https://www.luogu.org/problemnew/show/P1131 因为越高,调节一个影响到的越多,所以底下只要把子树间的差异消除了就行了,与其他部分的差异由更高的边调节. ...