ionic 實作(12)： ionic 中封裝 angular的 Service

為什麼要使用 Service 呢，簡單的說就是把常用的一些實作抽離出來，除了讓之後比較可以便利的維護外，在ionic 中也可以傳遞二邊的共用的變數。

以會員登入為例，在 許多controller 都會使用到 http get 及 post ，所以我們就可以把這二個實作封裝成可以remote 的service

Angular 介紹

AngularJS Service  https://docs.angularjs.org/guide/services

簡單的說，就是在 module中加入一個 factory，並且給予一個 ServiceId

Refactor

使用AngularJS 中的 factory 來封裝，實作 get 及 post 二個function

打開 js/service.js 的檔案，我們在這個檔案加上一個 remoteservice 的 factory

另外在controller 使用時，必須inject 我們所定義的service ，在這邊我們是命名為remoteService。

大功告成，所以如果我們要讓controller 之間可以互傳變數，你可以封裝成自己的factory的方式，把$rootScope傳入此service就可以實作了，這個部份請大家就自己練習看看吧

ionic 實作(11)： 權控判斷與全域變數的存放

我個人習慣使用來控制ionic 全域變數的有二種方式，第一種就是存放在rootScope物件中，第二種就是封裝成service 來提供二個controller 之間可以共用變數。

接下來，要來處理登入畫面，登入畫面在按下登入後會 post 帳號及密碼到遠端，認證通過後會回傳token及使用者資訊

為了存放全域變數，我們把認證後的使用者的資訊存放在 $rootScop.user 裡

測試的結果如下

接下來，我們再測試一下其它 controller 是否可以看到 $scope.user

在console 中可以看到$scope.user 是會有值的

大功告成，接下來所有page 的驗證方式，都可以利用 $scope.user 及 $scope.token 來判斷了

ionic 實作(10)：重構程式 - $http (下)

接下來要將圖片、電話及商店名稱一樣binding 到 這三個變數上，分別為storeName、store_tel及 storeImage

測試畫面如下

大功告成，以上我們己經完成了今日所有取資料的功能了。

接下來，會員登入部份使用 $http.post 來認證，目前登入畫面如下

$http.post 用法如下

透過 $http.post 在認證成功後，在success 的callback 我們可以將需要儲存的資料暫存下來

ionic 實作(9)：重構程式 - $http (上)

在之前實作的部份，資料的讀取的都是暫時使用靜態變數來呈現的。但實際在開發手機時，通常都是手機中的 SQLLite 資料，或是直接讀取透過 HTTP 來讀取 remote 的資料，當然還是看手機APP 的設計來決定是要用什麼方式來存取，接下來的部份就是要利用 AngularJS 中的 $http 來取得遠端的資料。

HTTP 介紹

Angular HTTP

https://docs.angularjs.org/api/ng/service/$http

Augular $http 的幾方法

這邊要介紹的是 $http.get

接下來要將以下之前的程式，改抓remote 的資料

以下的部份，我使用自己的測試server來介紹

首先在網頁上測試是一下server response 回來的資料

Refactor Code 開始

第一步，先使用$http.get 來測試

打開Chrome 的開發人員工具，切到 network 應該可以找到 browser 跟 server  get 的url

接下來我們將取得的 data 與 menu_list 做 雙向的 binding，data.items 可以取得今日訂餐商店的所有menu

測試的畫面如下

待續...

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