手機程式設計
清單/細節瀏覽
兩個頁面（mockup）
資料來源：物件陣列
var stocklist = [
{id: 2330, name: '台積電', price: 147.0, PER: 14.44, PBR: 3.65,
yield: 3.06, Desc: '晶圓製造', checked: false},
// ... [略]
];
使用屬性：
id, name, Desc
使用屬性：
id, name, Desc
price, PER, PBR, yield
從mockup到完成專案...
Step 1: 建立blank專案
Step 2: 版面設面(編輯index.html)
Step 3: 建立states
- config() --- 編輯app.js
- 建立controllers --- 編輯app.js
Step 4: 建立兩個頁面 --- 新增.html檔
Step 2. 編輯index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="https://code.ionicframework.com/1.2.4/css/ionic.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="https://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
</html>header
返回按鈕
標題列按鈕
版本 for plunker
Step 3. 建立States
版本 for plunker
清單
細節
- url相同，但要帶一個參數sid
- sid為自行命名的名稱
連結機制：
<a href='#/home/參數...'></a>
使用「服務變數」
$stateParams取得參數值
Step 3. 建立States
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('details',{
url: '/home/:sid',
templateUrl: 'templates/details.html',
controller: 'detailsCtrl'
})
})Step 3. 建立States
// 續 app.js
.controller('homeCtrl',function($scope){
$scope.stocks = stocklist;
})
.controller('detailsCtrl',function($scope,$stateParams){
$scope.stock = stocklist[$stateParams.sid];
})
// 資料陣列
var stocklist = [
{id: 2330, name: '台積電', price: 147.0, PER: 14.44, PBR: 3.65,
yield: 3.06, Desc: '晶圓製造'},
{id: 1301, name: '台塑', price: 76.5, PER: 27.03, PBR: 1.7,
yield: 2.22, Desc: '聚氯乙烯(PVC)、氯乙烯等塑膠製品'},
{id: 2002, name: '中鋼', price: 25.8, PER: 18.04, PBR: 1.33,
yield: 3.88, Desc: '鋼品設計製造買賣儲運及其他相關業務'},
{id: 3045, name: '台灣大', price: 108.0, PER: 19.42, PBR: 6.13,
yield: 5.19, Desc: '通訊業'},
{id: 2454, name: '聯發科', price: 421.5, PER: 14.03, PBR: 2.68,
yield: 3.56, Desc: '多媒體IC 、電腦週邊IC、其他IC'},
{id: 2317, name: '鴻海', price: 93.1, PER: 10.52, PBR: 1.48,
yield: 1.93, Desc: '電腦系統設備連接器等之開發設計製造'},
{id: 3008, name: '大立光', price: 2695.0, PER: 18.6, PBR: 7.83,
yield: 1.06, Desc: '各式光學鏡頭模組研發設計生產銷售'}
];注意：此為陣列元素index值（從0起算）
Step 4. home.html頁面
<ion-view title="清單">
<ion-nav-bar>
<ion-nav-buttons>
<button class="button">+</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<div class="list">
<div class="item" ng-repeat="item in stocks">
<a href="#/home/{{$index}}">{{item.id}} {{item.name}}</a>
</div>
</div>
</ion-content>
</ion-view>ng-repeat
取得陣列每一個元素
用於頁面的$index
陣列元素index從0開始
ionic css類別
list：清單
item：清單項目
href="#/home/..."
使用href時，Ionic apps頁面url前需加上#
Step 4. details.html頁面
<ion-view title="{{stock.name}}">
<ion-content>
<div class="list card">
<div class="item item-icon-left">
<i class="icon ion-podium"></i>
<h2>{{stock.id}}{{stock.name}}</h2>
<p>{{stock.Desc}}</p>
</div>
<div class="item item-body">
<div class="row">
<div class="col">股價<br>{{stock.price}}</div>
<div class="col">本益比<br>{{stock.PER}}</div>
</div>
<div class="row">
<div class="col">股價淨值比<br>{{stock.PBR}}</div>
<div class="col">殖利率<br>{{stock.yield}}%</div>
</div>
</div>
</div>
</ion-content>
</ion-view>ionic css類別
card：卡片
item：清單項目
item-body：項目主體
ionic css類別
row：橫行（格線系統）
col：直列（格線系統）
自由練習
- 店家資訊
- 景點資訊
- Whatever else