【Ionic+AngularJS 开发】之『个人日常管理』App(一)
写在前面的话
过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和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(一)的更多相关文章
- 【Ionic+AngularJS 开发】之『个人日常管理』App(二)
准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后 ...
- 实践分享:开始用Cordova+Ionic+AngularJS开发App
http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...
- Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究
ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index- ...
- ionic+angularjs开发hybrid App(环境配置+创建测试项目)
本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...
- Cordova Ionic AngularJS
实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- WebApp开发框架Ionic+AngularJS+Cordova
目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用 ...
- HybridAPP开发框架Ionic+AngularJS+Cordova搭建
Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lis ...
- linux 的基本操作(linux系统的日常管理)
系统的日常管理 笔者在前面介绍的内容都为linux系统基础类的,如果你现在把前面的内容全部很好的掌握了,那最好了.不过笔者要说的是,即使你完全掌握了,你现在还是不能作为一名合格的linux系统管理员的 ...
随机推荐
- DOM相关操作的案例
1 . 模态框案例 示例 : 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 <!DOCTYPE html> <htm ...
- (linux)BSP(板上支持包)概述
1. BSP概述 BSP即Board Support Package,板级支持包. 它来源于嵌入式操作系统与硬件无关的设计思想,操作系统被设计为运行在虚拟的硬件平台上. 对于具体的硬件平台,与硬件相关 ...
- 使用jedisPool管理jedis,使用jedis操作redis
ps:jedis是redis在java中的客户端操作工具 package com.test; 2 3 import java.util.HashMap; 4 import java.util.Iter ...
- [原创]Java集成PageOffice在线打开编辑word文件 - Spring Boot
开发环境:JDK1.8.Eclipse.Sping Boot + Thymeleaf框架. 一. 构建Sping Boot + Thymeleaf框架的项目(不再详述): 1. 新建一个maven p ...
- codeforces 651E E. Table Compression(贪心+并查集)
题目链接: E. Table Compression time limit per test 4 seconds memory limit per test 256 megabytes input s ...
- Posix线程编程指南(3)
这是一个关于Posix线程编程的专栏.作者在阐明概念的基础上,将向您详细讲述Posix线程库API.本文是第三篇将向您讲述线程同步. 一.互斥锁尽管在Posix Thread中同样可以使用IPC的信号 ...
- 集训Day8
旧试题Day2... bzoj3436 有若干个集合和一些信息 信息有3种: I.集合A比集合B至少多C个元素 II.集合A比集合B至多多C个元素 III.集合A和集合B元素一样多 求这些信息是否有矛 ...
- python之系统编程 --进程
1.调试(PDB) 代码: [root@master gaoji]# vim test2.py 1 #!/usr/local/bin/python3 2 # -*- coding:utf-8 -*- ...
- nginx中共享内存的使用
在nginx的进程模型下,类似流量统计.流量控制.数据共享.等需要多个工作进程共同配合完成任务,共享内存是一个重要的进程通讯的方案.本文介绍在nginx的代码中与共享内存相关的功能,包括ngx_shm ...
- ACM学习历程——HDU2227 Find the nondecreasing subsequences(线段树 && dp)
Description How many nondecreasing subsequences can you find in the sequence S = {s1, s2, s3, ...., ...