ionic 實作(8)：歷史訂購(下)

說明

歷史訂購功能，主要是用來查看過去的訂購記錄，在這個部份會有master － Detail 的作法在裡面，接下來要介紹的是detail 的部份如何實作。

UI 畫面

設計的畫面如下

打開 tab-history-detail.html 修改內容如下，這次直接在撰寫 AngularJS，所以一樣使用 ng-repeat 來做 order_list 清單的呈現

畫面如下，當然選擇歷史訂購主檔後，才會進到消費明細表

點選單筆資料，在歷史訂購的URI會從  tab/history 變成 tab/history/{id}

Controller 撰寫

接著修改controller，從 js/app.js 的function 中可以看到本月消費的tab-historyDetail.html 對應的controller為 HistoryDetailCtrl

最後接著我們再修改 HistoryDetailCtrl 中，新增一個 order_list 的陣列

大功告成，之後在取得歷史訂購會在介紹到$http時會再refactor

ionic 實作(7)：歷史訂購(上)

說明

歷史訂購功能，主要是用來查看過去的訂購記錄，在這個部份會有master － Detail 的作法在裡面。

UI 畫面

設計的畫面如下

打開 tab-history.html 修改內容如下，在list中先輸入幾筆 item，另外這邊有使用了 inline style 去處理，這個部份在之後refactor的介紹會再做調整

測試出來的畫面如下

Controller 撰寫

接著修改controller，從 js/app.js 的function 中可以看到歷史訂購的tab-history.html 對應的controller為 HistoryCtrl

成功後，我們試著在Controller中去新增一個 history_list 的陣列

接著我們在把剛新增的item方式改成 angular ng-repeat 的寫法

以上完成了歷史訂購的主畫面，接下來我們要讓點選每筆row後，可以查看每次訂購的明細

待續...

ionic 實作(6)：本月消費

說明

本月消費功能，主要是要用來統計當月消費的記錄與總金額。

UI 畫面

設計的畫面如下

打開 tab-consumer.html 修改內容如下，在這邊有使用了 inline style 去處理，這個部份在之後refactor的介紹會再做調整

測試出來的畫面如下

Controller 撰寫

接著修改controller，從 js/app.js 的function 中可以看到本月消費的tab-consumer.html 對應的controller為 ConsumerCtrl

打開controller.js ，找到 ConsumerCtrl修改內容如下，把list($scope.order_list)部份先以陣列的資料來呈現

最後把tab-consumer.html 的內容改抓取controller 中的變數

大功告成，之後在取得今日訂餐會在介紹到$http時會再refactor

ionic 實作(4)：登入畫面

說明

大部份的app如果需要有身份的認證，通常的作法不是使用 facebook、google 或其它第三方登入以外，就是自己有一個會員的帳號登入，今天要實作的部份就是使用帳號密碼登入在 ionic 中應該如何開發。

UI 畫面

首先打開編輯 tab-login.html，加上 username 及 password的二個輸入框及一個button元件

畫面如下，畫面

Controller 撰寫

在來要在對應的controller 中做編輯，我們回去看一下 js/app.js 中的routing設定，tab-login.html 的controller 是 LoginCtrl

打開 controller.js檔案 ，編輯檔案中的 LoginCtrl function，在function 中加入 username及password 的變數，並且同時加上一個login的function，用來讓 button  綁定 click 使用

tab-login.html 加上 ng-model 及ng-click

大功告成，畫面如下，可以按下登入的button測試是否有alert 訊息

P.S 登入的實作在之後介紹到$http時會再refactor

ionic 實作(5)：今日訂餐

說明

今日訂餐功能，主要是要顯示今天中午要訂購的便當店，所以在設計上要有 title 、圖片及menu(菜單)三個部份。

UI 畫面

設計的畫面如下

這邊使用 list card 來排版，程式內容如下

畫面排版可以參考 http://ionicframework.com/docs/components/#card-showcase

清單的部份可以參考 http://ionicframework.com/docs/components/#item-icons

Controller 撰寫

今日訂餐的tab-order.html 對應的controller為 OrderCtrl

打開js/controller.js ，找到 OrderCtrl 的 function 修改如下

我們試著將商家名稱、電話及清單修改為如下

試著再打開 tab-order.html 修改如下

大功告成，之後在取得今日訂餐會在介紹到$http時會再refactor

ionic 實作(3)：設定 Routing

Sample source Code : https://github.com/jimmy0328/ourmeal

Routing 我們用來設定每個 URL的導頁設定方式，首先使用編輯器開啟 js/app.js

先定義所有 url 要對應的 template url 及controller

另外在tab menu 也一定要設定，內容包括了今日訂餐／本月消費／歷史訂購及登入，這邊每個tab必須要與 routing state 名稱要對應才可以。打開 tabs.html 修改內容如下圖

 打開 js/ Controller.js  的設定，把每個page要對應的controller 都先設定好

當然對應的html也要先把名稱改好

最後請先確認是否有啟用 server

剛修改的Tabs在Browser測試畫面應該如下

icon 可以參考 ： http://ionicons.com/

大功告成，如果到這一步都可以順利完成，那代表 ionic 整個Project 都己經設定好了，接下來幾天就是準備要動手逐一的把功能實作出來

ionic 實作(2)：Project 建立及架構介紹

以下的開發環境是在 mac 環境上開發，若有在 window or linux 開發與我撰寫這邊不保證一定可以work。

首先 建立 ionc Project

這邊使用tab sample project 來修改

使用sublime 還其它編輯器軟體打開此project

hooks	用來客制化撰寫codova的地方，在這個Project 沒有使用到
plugins	預設有三個 plugs
scss	會撰寫scss的人可以直接在這邊直接開發，否則只能回index.html 寫css
www	css 客制化CSS的檔案 img images 檔案目錄 js 主要的核心程式 包括了 app.js 、controller.js及 service.js lib ionic 整合外部的地方，主要是 angularjs及 css components templates 畫面檔案的目錄 index.html 程式進入點的檔案

以上的程式目錄看起來很複雜，其它這邊會只要注重在以下幾個地方開發即可

www/index.html	程式進入點的檔案
js/app.js	控制routing的程式
js/controller.js	定義所有controller內容的程式
js/service.js	如果有撰寫service或是factory可以都掛在這一支程式中
template/	與畫面有關的程式就會被放在這邊目錄裡