【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/  本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。