【Ionic+AngularJS 開發】之『個人日常管理』App（一）

標籤：分享   模板   項目建立   csdn   項目   one   framework   com   簡單   

寫在前面的話

過去一年自己接觸了不少手機前端開發，得益於現在手機效能的提升和4G普及，感覺使用混合技術開發手機App已經可以滿足越來越多的應用情境了。新年伊始，對自己2016年所學知識做一個階段性總結，記錄一個自製的“小而萌”Hybrid App開發曆程，共勉！

〖擴充閱讀〗

企業行動裝置 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-npm2 cd PDM3 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/ 

本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。 

 

【Ionic+AngularJS 開發】之『個人日常管理』App（一）