顯示具有 單頁面 標籤的文章。 顯示所有文章
顯示具有 單頁面 標籤的文章。 顯示所有文章

2015年4月27日 星期一

Hybrid Apps開發系列之5.1:資料模型與自訂services(重構天氣app線上版)

Ionic/AngularJS apps透過$scope變數可以定義資料模型 (data model) 變數供前端頁面 (views)使用,而在controller端,則會將資料模型變數設定為數值、陣列甚至是透過web services得到的資料。然而,如果有資料處理、頁面共用資料模型等更複雜的運作方式時,應該呼叫.factory()採用「自訂services」的方式,將資料處理等相關程式碼打包進factory,供$scope以及前端頁面運用,如下圖所示:
圖1.各種資料來源可透過factory進行管理
如圖1,factory可將資料庫、web services、或是一般JavaScript物件包裹起來,建立資料處理服務,提供$scope與前端頁面使用。Factory就相當於apps的資料層 (data layer)。

Factory基本格式

Ionic/AngularJS模組都可建立factory,做為資料層,基本格式如下:
angular.module('starter',['ionic])
   .factory('serviceName',function(){
       return {}
   }
)

2015年4月19日 星期日

Hybrid Apps開發系列之3.4:單頁面App製作(貨幣轉換器)

單頁面apps是最簡單的ionic apps形式。最簡單的版面由<ion-header-bar>與<ion-content>組成。前者是標題列;後者則是內容,下圖是版面示意圖。
圖1. 單頁面版面
換句話說,在index.html的<ion-header-bar>內輸入的內容,便會成為標題的一部分,如下列的