注意一： (1).第一次建立您的專案之後，不要太急，要等待「（Restoring）」訊息從 dependencies 物件消失在 Solution Explorer (2).在建置之前，要記得開啟 Task Runner Explorer（工作執行總管） 方法：從 檢視 > 其它視窗 > 工作執行總管 這會啟動 Visual Studio 執行此範本使用的客製化 Gulp 建置 script。

注意二： (1).若開啟專案，是開啟『javascript專案』，裡面只有ionic第一版的三個範本 (2).若開啟專案，是開啟『Typescript專案』，裡面有ionic第二版的三個範本，及有ionic第一版的三個範本

以上步驟可參考微軟相關文件，步驟說明： (1).Install Visual Studio Tools for Apache Cordova (2).用 Ionic & Visual Studio 建立高品質的行動 App

01.先安裝最新版java
02.安裝Android SDK：（SDK Manage管理器）
(1).安裝Android sdk（連同Android Studio一起安裝）
https://developer.android.com/studio/index.html

(2).android sdk 安裝後的路徑在
C:\users\tsu\AppData\Local\Android\sdk\docs\sdk

(3).還要補按安裝sdk其他的版本，
C:\users\tsu\AppData\Local\Android\sdk\docs\sdk
打開SDK Manager.exe，安裝之（一定要install完畢系統指定還要安裝的元件,屆時才能打包成apk）
（滑鼠按右鍵，選擇“以管理員身份執行” ）

(4).並設定對應的環境變數：
方法："控制台"=> "系統" => "進階系統設定" => "進階" => "環境變數" =>
(A).新增"系統變數"：
(B).修改使用者變數：

(C).新增變數名稱[JAVA_HOME] 值 [C:\Program Files\Java\jre1.8.0_25]
(D).修改變數[Path] 在值的最前面加上[%JAVA_HOME%\bin\;]

(E).設定環境變數：
Android SDK路徑通常在：C:\Users\<使用者帳號資料夾>\AppData\Local\Android\sdk\
例如：C:\users\tsu\AppData\Local\Android\sdk\docs\sdk
(若找不到[AppData]資料夾，請開啟顯示隱藏資料夾與檔案的設定！)
(F).修改變數[Path]在值的最前面加上[%ANDROID_HOME%\tools\;%ANDROID_HOME%\platform-tools\;]
(G).範例：
**例如修改變數[Path] ：
%ANDROID_HOME%\tools\;%ANDROID_HOME%\platform-tools\;%JAVA_HOME%\bin\;C:\Users\TSU\AppData\Roaming\npm

**新增變數名稱
ANDROID_HOME
C:\users\tsu\AppData\Local\Android\sdk
JAVA_HOME
C:\Program Files\Java\jre1.8.0_25

(5).參考：
http://hybridap.blogspot.tw/2015/04/hybrid-appsioniccordova.html
http://blog.xuite.net/andy19890411/Orz/330726047-%E3%80%90APP%E3%80%91PhoneGap+%2B+Android+SDK+%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A+Windows+7
http://pabital.blogspot.tw/2014/12/ionicinstall-ionic.html

ionic platform add android
ionic build android（建置apk檔案）
D:\ionic\exp01\platforms\android\build\outputs\apk

03.須先安裝最新版node.js
04.然後在node.js的 CLI命令列中，輸入指令：npm install -g ionic cordova
05.建立一個空白ionic專案exp01，輸入指令：ionic start --v2 exp01 blank
或建立一個tab型態ionic專案exp01，輸入指令：ionic start --v2 exp01 tabs
或建立一個滑動silde型態ionic專案exp01，輸入指令：ionic start --v2 exp01 sidemenu
(--v2表示這是建立ionic第二版，若沒寫--v2則表示這是用ionic第一版來建立）
(若沒有指定專案類型是blandk,tabs,sidemenu，預設就是一tabs形式來建立專案）

06.修改exp01專案的網頁內容（放在目錄exp01裡面）
07.執行並測試exp01專案，先進入目錄：輸入指令：cd exp01
08.執行程式，開啟網頁瀏覽，輸入指令：ionic serve

09.停止執行狀態，輸入指令：q

(注意1)建立ios專案的注意事項
(注意2)建立android專案的注意事項

(1).安裝node.js，或更新npm
npm install -g npm

(2).安裝或更新Ionic/Angular （新的Ionic 2命令列工具（Ionic CLI）仍適用於先前Ionic 1專案）
npm install -g ionic

(3).安裝或更新Cordova
npm install -g cordova
（注意：若 npm install -g cordova 安裝後，執行 cordova build android，卻出現提示需要安裝 platform for android-21 sdk ，這表示需要安裝最新版本的sdk)

(4).建立Android 專案，並運行（以ionic第一版為例）
ionic start myApp blank
cd myApp

ionic serve （用於流覽器簡易測試）

ionic platform add android
ionic build android（建置apk檔案）
ionic emulate android (模擬器運行)
ionic run android

(5).建立ios專案，並運行（以ionic第一版為例）
ionic start myApp blank
cd myApp

ionic serve （用於流覽器簡易測試）

ionic platform add ios（建置手機執行檔）
ionic build ios
ionic emulate ios

ionic serve （用於流覽器簡易測試）

(6).使用Crosswalk 的優點和缺點
優點：運行速度提升 （經測試運行速度可以提升 3-5倍）
缺點：安裝包比較大

集成crosswalk方法
ionic browser add crosswalk
ionic run android

(1).www/index.html，js/app.js，這兩個檔案是與app執行時，直接相關的兩個檔案
(A).index.html：設計app的主要樣板所在
(B).app.js：Ionic專案的主程式所在

(2).www/index.html，js/app.js主要程式結構（空白專案）
(A).index.html：主要程式結構
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">標題名稱</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>

(B).app.js：Ionic專案的主程式所在
angular.module('starter', ['ionic'])
.config(function ($stateProvider,$urlRouterProvider) {
})
//■angular.module().config()：設定Ionic app共有幾個states、以及每個states組態，
//■而為了定義state，必須使用$stateProvider，
//■$urlRouterProvider則用來定義app執行流程，特別是設定app進入頁面。

.controller('HomeCtrl', function ($scope) {
})
//■controller 1
//■angular.module().controller()：設定controllers。controller必須給定名稱，
//■同時搭配config()內各個states的定義。

.controller('Page2Ctrl', function ($scope) {
})// controller 2
.run(function ($ionicPlatform) {
// ......
})

(3).Ionic App 三結構：Views、Controllers、Configuration 組態設定
(A).Views畫面設計：各種*.html都是設計畫面
■觀念：index.html是所有views的共用模板，因此通常不會在index.html撰寫頁面內容
■觀念：實際的各個頁面設計，放在templates目錄內，這些頁面連結的參數設定都在目錄js裡面的app.js
■觀念：index.html：設定共用模板的架構
<body ng-app="starter">
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
■觀念：ng-app（angularJS）：代表在<body>標籤涵蓋的範圍都是angularJS應用，名稱為starter
根據angularJS模組化的概念，則app.js裡須有starter模組定義，
angular.module('starter',[])
■觀念：ion-nav-bar（ionic）：若要顯示標題header bar，則須加此命令
■觀念：]ion-nav-back-buttons（ionic）：瀏覽頁面過程中，如有需要出現「返回」上一頁按鈕，可在<ion-nav-bar>內加入此指令。
■觀念：ion-nav-view（ionic）：可建立navigation view，這是ionic apps多頁面的標準作法。當app操作時，navigation view會根據操作過程，帶入頁面檔案顯示內容

(B).Configuration組態設定：定義於app.js內
■ionic稱每一個設計頁面為state，在app.js內設定頁面參數：包括state名稱、html檔案所在、url、以及controller名稱
.config(function ($stateProvider, $urlRouterProvider) { // 流程設定
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('page2', {
url: '/page2',
templateUrl: 'templates/page2.html',
controller: 'Page2Ctrl'
});
$urlRouterProvider.otherwise('/home');
})

(C).controller()
// home page controller
.controller('HomeCtrl', function ($scope) {
})
// page 2 controller
.controller('Page2Ctrl', function ($scope) {
})
■app.js可直接定義各個state所需的controllers
■controller()通常會以$scope作為參數。
■$scope是angularJS很重要的變數，用來做頁面的資料繫結(data binding)，所以只有在controller中設定的$scope變數，前端的頁面才能顯示其內容，或是對內容進行編輯

(4).一般網頁格式：至少必須包含下列兩個元素：
■
<ion-view title='標題'>
<ion-content>
實際內容
</ion-content>
</ion-view>

■範例：home.html的設定
<ion-view view-title="首頁">
<ion-content>
<p>首頁內容在此</p>
<button class="button
button-outline
button-positive"
ui-sref="page2">
下一頁
</button>
</ion-content>
</ion-view>

■範例：page2.html
<ion-view view-title="第二頁">
<ion-content>
<p>第二頁內容在此</p>
</ion-content>
</ion-view>

取得textbox數值，並綁定到div

ng-model類似id

ng-bind類似value

<head>
<meta charset="utf-8" />
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">輸入您的姓名：
<input type="text" ng-model="myname"/>
<div ng-bind="myname"></div>
{{myname}}
</div>
</body>

設定起始值參數

ng-init類似value

設定起始值參數的方法有兩種：
(1).使用ing-init
(2).使用{{變數 || 起始值}} （||或者）

(1).計算圓周長=2*pi*半徑
(1).使用ing-init
<div ng-app="">輸入半徑：
<input type="text" ng-model="r01" ng-init="pi=3.1415;unit01='公尺'"/>
{{2*r01*pi + unit01}}
</div>

02.計算圓周長=2*pi*半徑
方法：使用：變數 || 起始值 （||或者）
輸入半徑：
<input type="text" ng-model="r02" ng-init="pi=3.1415;unit02='公尺'" />
{{(2*r02*pi || 0) + unit02}}

各種表達式expression<br/>
<div ng-app="">
01.乘法：
<div ng-init="qty=20;cost=100">
{{"總價 = " + qty * cost}}
</div>

<br/>
02.字串：
<div ng-init="school='首府大學';department='資訊多媒體設計系'">
{{"就讀 = " + school + "，" + department}}
</div>

<br />
03.物件變數：
<div ng-init="person={name:'王小華',age:20,tel:'0955123456'}">
{{"姓名 = " + person.name + "，年紀 = " + person.age + "，電話 = " + person.tel}}
</div>

<br />
04.陣列：
<div ng-init="month=[31,28,31,30,31,30,31,31,30,31,30,31]">
輸入月份：<input type="text" ng-model="num"/><br/>
{{"查詢該月份的天數 = " + month[num-1] }}
</div>

<br />
05.物件陣列變數：
<div ng-init="student=[{name:'王小華',age:20,tel:'0955123456'},{name:'宋圖相',age:50,tel:'06-5718888'},{name:'John Lee',age:30,tel:'086-002-31331355'},{name:'西野七瀨',age:20,tel:'083-060-6547231'},{name:'劉川風',age:15,tel:'02-36547891'}]">
查詢班上第幾位同學(1~5)：<input type="text" ng-model="no" /><br />
{{"查詢該位同學，姓名 = " + student[no-1].name + "，電話 = " + student[no-1].tel}}
</div>
</div>

控制器controllers，模塊module(

傳遞變數用$scope

類似函數function

函數function，控制器controllers，模塊module( 傳遞變數用$scope

var app = angular.module("myApp", []);
//01.
app.controller('show01', function ($scope) {
$scope.youname = "Mike Lee";
});

//02.從畫面傳遞變數來controoler計算法
app.controller('show02', function ($scope) {
$scope.a01 = function (r01) {
//這裡可寫傳統的javascript命令
return 2 * 3.14156 * $scope.r01;
};
});
//03.
app.directive("w3TestDirective01", function () {
return {
template: "新年快樂，恭喜發財"
};
});
//04.從畫面傳遞變數來controoler計算法
app.controller('show04', function ($scope) {
$scope.area = function (w1,w2,h) {
//這裡可寫傳統的javascript命令
return (w1 + w2) * h / 2;
};
});
</script>
</head>
<body>
<div ng-app="myApp">
01.無傳遞參數（無傳遞參數）：
<div ng-controller="show01">
你的姓名：<div ng-bind="youname"></div>
</div>

02.有傳遞參數（從畫面傳遞變數來controoler計算法）
方法：在controller使用 $scope.函數名稱 = function () {
範例：計算圓周：
<div ng-controller="show02">
輸入半徑：<input type="text" ng-model="r01" />
{{"圓周長 = " + a01(r01)}}
</div>

03.return數值方法一
方法：使用Directive（指令）：w3-test-directive<br />
傳回你的新年祝賀語：
<div style="color:red" w3-test-directive01></div>

04.return數值方法二：（類似傳統的function函數return傳回一個數值）：<br />
方法：在controller使用 $scope.函數名稱 = function () {<br />
範例：計算梯形面積：<br />
<br />
<div ng-controller="show04">
<label>上底：<input type="text" ng-model="w1" /></label><br/>
<label>上底：<input type="text" ng-model="w2" /></label><br />
<label>高：<input type="text" ng-model="h" /></label><br />
{{"梯形面積 = " + area(w1,w2,h)}}
</div>

迴圈ng-repeat

ng-repeat="i in student"

<script>
var app = angular.module("myApp", []);
app.controller('show01', function ($scope) {
$scope.student = [
{ name: '王小華', age: 20, tel: '0955123456' },
{ name: '宋圖相', age: 50, tel: '06-5718888' },
{ name: 'John Lee', age: 30, tel: '086-002-31331355' },
{ name: '西野七瀨', age: 20, tel: '083-060-6547231' },
{ name: '劉川風', age: 15, tel: '02-36547891' }]
});
</script>
</head>
<body>
呼叫function，控制器controller（用$scope)傳遞變數）<br/>
<div ng-app="myApp">
01.列出每個月份天數天數：
<div ng-controller="show01">
<ul>
<li ng-repeat="i in student">{{i.name + "的電話是" + i.tel}}</li>
</ul>
</div>
</div>

過濾器filter，

ng-repeat="i in student"

過濾器filter

Currency：格式化數位為貨幣格式
Filter：從陣列項中選擇一個子集
orderBy：根據某個運算式排列陣列
Lowercase：格式化字串為小寫
Uppercase：格式化字串為大寫
number：數字格式（千分位）
number:2 （數字格式，2位小數點）

<div ng-app="myApp">
01.列出班上每個人的姓名，並轉成大寫：
<div ng-controller="show01">
<ul>
<li ng-repeat="i in student">{{i.name | uppercase}}</li>
</ul>
</div>
<br/>
02.列出班上每個人的姓名，並以年紀由小排到大：
<div ng-controller="show01">
<ul>
<li ng-repeat="i in student | orderBy:'age'">{{i.name + "，年紀為：" + i.age}}</li>
</ul>
</div>
<br />
03.數字轉成貨幣單位：
<div>總金額為：{{100000 | currency}}</div>
</div>

$http請求數據

（get請求）

$http請求數據（get請求）
若要讀取php檔案數值，兩個方法：
(1).將server設定為符合CORS規格 (跨來源資源共享)
(2)l.或是用jsonp技術來讀取

var app = angular.module('myApp', []);
app.controller('show01', function ($scope, $http) {
//url = "http://acupun.site/lecture/jquery_phoneGap/21-aspx-access-croossDoamin01.aspx";
//url = "http://www.w3schools.com/angular/customers.php";
url = "http://acupun.site/lecture/jquery_phoneGap/json/school.json";
$http.get(url).then(function (response) {
$scope.myData = response.data;
});
});
</script>

</head>
<body>
<div ng-app="myApp">
01.列出json回傳資料：
<div ng-controller="show01">
<ul>
<li ng-repeat="x in myData">
{{ x.name + '，' + x.address }}
</li>
</ul>

</div>

$http請求數據

（jsonp請求）

$http請求數據（jsonp請求）
若要讀取php檔案數值，兩個方法：
(1).將server設定為符合CORS規格 (跨來源資源共享)
(2)l.或是用jsonp技術來讀取

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('show01', function ($scope, $http) {
$scope.doJSONPRequest = function () {
var url = "https://librivox.org/api/feed/audiobooks/author/Melville?format=jsonp&callback=JSON_CALLBACK";
$http.jsonp(url, { jsonpCallbackParam: 'JSON_CALLBACK' })
.success(function (data, status, headers, config) {
$scope.details = data.books;
$scope.statcode = status;
})
.error(function (data, status, headers, config) {
$scope.statcode = status;
});
}
});
</script>

</head>
<body ng-app="myApp">
<div ng-controller="show01">
<button ng-click="doJSONPRequest()">執行JSONP請求(request)</button>
<p>所有資料: {{details}}</p>
<p>連線狀態: {{statcode}}</p>
<br/><br />
02.列出jsonp傳回表格：
<table border="1">
<tr>
<td>編號</td>
<td>書名</td>
<td>語言</td>
</tr>
<tr ng-repeat="x in details">
<td>{{x.id}}</td>
<td>{{x.title}}</td>
<td>{{x.language}}</td>
</tr>
</table>

四種on_click事件寫法

angularJS 其它事件：
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

四種on_click事件寫法

var app = angular.module('myApp', []);
//01.json
app.controller('show01', function ($scope) {
$scope.message = function () {
//這裡可寫傳統的javascript命令
alert("歡迎光臨！");
};
});
</script></head>
<body>
<div ng-app="myApp">
01.第一種，是標準angularJS自訂function寫法：
<div ng-controller="show01">
<input type="button" ng-click="message()" value="顯示彈出訊息"/>
</div>
<br/><br />

02.按鈕直接修改或計算在頁面上的變數數值<br/>
<input type="button" ng-click="num =num + 1" value="加1" /><br/>
<input type="button" ng-click="num =num - 1" value="減1" /><br />
{{num+10}}<br/>
<div ng-bind="num+5"></div><br />
<input type="text" ng-model="num"/><br />
<input type="range" ng-model="num" /><br />
<input type="number" ng-model="num" min="-100" max="500">
<br /><br />

03.按鈕直接修改或計算在頁面上的控制元件的內容值<br />
<input type="button" ng-click="sel01='0'" value="紅色" />
<input type="button" ng-click="sel01='1'" value="藍色" />
<input type="button" ng-click="sel01='2'" value="黃色" />
<br/>
<select ng-model="sel01" ng-init="sel01='0'">
<option style="background-color:red" value="0">紅色</option>
<option style="background-color:blue" value="1">藍色</option>
<option style="background-color:yellow" value="2">黃色</option>
</select>

<br /><br />
04.非button的on-click範例：在div 文字上，點按文字的變化
<div ng-bind="txt01" ng-init="txt01='在這個文字上按一下'" ng-click="txt01='哎呀，別動手'" style="font-size:50;color:red"></div>
<br />

七種條件判斷式寫法

ng-if

radio的value直接寫判斷

A==B ? 條件一：條件二

ng-show

ng-switch-when

在controller用 function

七種條件判斷式寫法

01.ng-if 寫法：
<label>
參加VIP會員
<input type="checkbox" ng-model="ckb01" />
</label><br />
<label>
參加普通會員
<input type="checkbox" ng-model="ckb02" />
</label><br />
<div ng-if="ckb01==true" style="color:blue">
參加VIP會員，所有網購產品都可以打8折，免運費
</div>
<div ng-if="ckb02==true" style="color:red">
參加普通會員，所有網購產品都可以打9.5折，運費50元
</div>

02.在radio的value直接寫判斷後的值：
<label>
男生
<input type="radio" ng-model="sex" value="男生，所有網購產品都可以打8折" />
</label><br />
<label>
女生
<input type="radio" ng-model="sex" value="女生，所有網購產品都免運費" />
</label><br />
<div style="color:red">
{{sex}}
</div>

03.A==B ? 條件一：條件二
<label>
參加VIP會員
<input type="checkbox" ng-model="vip" />
</label><br /><br />
<div style="color:red">
{{vip==true ? "你要參加VIP會員": "你要參加普通會員"}}
</div>

04.使用ng-show來判斷哪種情況：
方法：ng-show=checkcar
範例：checkbox判斷<br />
<input type="checkbox" ng-model="checkcar" />報考汽車駕照年紀<br />
<input type="checkbox" ng-model="checkvote" />未來公民投票權年紀<br />
<div style="color:red" ng-show="checkcar==true">報考汽車駕照年紀：20歲</div>
<div style="color:red" ng-show="checkvote==true">未來公民投票權年紀：18歲</div>

05.使用ng-show來判斷哪種情況：
方法：ng-show=‘sel01==1’，而且一種情況，寫一種ng-show判斷式
範例：select判斷
<select ng-model="sel01" ng-init="sel01=2">
<option value=0>標楷體</option>
<option value=1>新細明體</option>
<option value=2>正黑體</option>
</select>
<br />
<div style="color:red" ng-show="sel01==0">你要使用：標楷體</div>
<div style="color:red" ng-show="sel01==1">你要使用：新細明體</div>
<div style="color:red" ng-show="sel01==2">你要使用：正黑體</div>

06.使用ng-switch-when來判斷哪種情況：
方法：一種情況，寫一種ng-switch-when判斷式<br />
範例：select判斷，查詢各國人口數<br />
<select ng-model="sel02" ng-init="sel02=1">
<option value=0>美國</option>
<option value=1>中國</option>
<option value=2>印度</option>
<option value=3>日本</option>
<option value=4>韓國</option>
<option value=5>不丹</option>
<option value=6>琉球</option>
<option value=7>月球</option>
</select>
<br />
<div ng-switch="sel02">
<div style="color:red" ng-switch-when="0">美國人口3.25億</div>
<div style="color:red" ng-switch-when="1">中國人口13.8億</div>
<div style="color:red" ng-switch-when="2">印度人口13.3億</div>
<div style="color:red" ng-switch-when="3">日本人口1.26億</div>
<div style="color:red" ng-switch-when="4">韓國人口0.5億</div>
<div style="color:red" ng-switch-when="5|6" ng-switch-when-separator="|">不知道人口數</div>
<div style="color:red" ng-switch-default>嫦娥</div>
</div>

var app = angular.module('myApp', []);
//07.來回傳遞參數function寫法
app.controller('show07', function ($scope) {
$scope.population = function (sel07) {
//這裡可寫傳統的javascript命令
if(sel07==0){
p1= "美國人口3.25億";
}else if(sel07==1){
p1 = "中國人口13.8億";
} else if (sel07 == 2) {
p1 = "印度人口13.3億";
} else if (sel07 == 3) {
p1 = "日本人口1.26億";
} else if (sel07 == 4) {
p1 = "韓國人口0.5億";
} else if (sel07 == 5 || sel07==6) {
p1 = "不知道人口數";
} else {
p1 = "嫦娥";
}
return p1;
};
});
</script>
07.在controller內，使用類似傳統的function寫法<
方法：有傳遞參數（從畫面傳遞變數來controoler計算法）<br />
方法：在controller使用 $scope.函數名稱 = function () {<br />
範例：select判斷，查詢各國人口數<br />
<div ng-controller="show07">
<select ng-model="sel07" ng-init="sel07=1">
<option value=0>美國</option>
<option value=1>中國</option>
<option value=2>印度</option>
<option value=3>日本</option>
<option value=4>韓國</option>
<option value=5>不丹</option>
<option value=6>琉球</option>
<option value=7>月球</option>
</select>
<br />
<div style="color:red">{{population(sel07)}}</div>
</div>

AngularJS動態改變CSS五種方法

ng-class
ng-style

AngularJS動態改變CSS五種方法
(1).若是靜態設定，則不需要那麼麻煩，直接用style=...CSS...設定即可
(2).若是動態態設定，才需用AngularJS的方法

app.controller('show01', function ($scope) {
$scope.changeColor = function (setcolor) {
//這裡可寫傳統的javascript命令
if (setcolor == 'red') {
$scope.mycolor="red";
} else if (setcolor == 'blue') {
$scope.mycolor = "blue";
} else if (setcolor == 'yellow') {
$scope.mycolor = "yellow";
}
};
});
</script>
<style>
.red{color: red;}
.blue{color: blue;}
.yellow{color: yellow;}
.fontBia{font-family:標楷體}
.font50{font-size:50px;}
.font40BolodXimingti{font-family:細明體;font-size:40px;font-weight:900;}
.strike {text-decoration: line-through;}
.bold {font-weight: bold;}
</style>
</head>
<body>

<div ng-app="myApp">
01.在controller內function去改版classname：
<div ng-controller="show01">
<input type="button" ng-click="changeColor('red')" value="紅色" />
<input type="button" ng-click="changeColor('blue')" value="藍色" />
<input type="button" ng-click="changeColor('yellow')" value="黃色" />
<br />
<div ng-class="mycolor">
所有網購產品都可以打8折，免運費
</div>
</div>

02.使用 ng-class，直接設定css代號(red)：
**實用，常用
方法：用ng-click按鈕，直接修改ng-class變數名稱（不用暱稱代號）<
<label>
<input type="button" ng-click="newstyle01='fontBia'" value="標楷體" />
</label><br>
<label>
<input type="button" ng-click="newstyle01='font50'" value="大小50點" />
</label><br>
<label>
<input type="button" ng-click="newstyle01='red'" value="紅色" />
</label><br>
<label>
<input type="button" ng-click="newstyle01='bold'" value="粗體" />
</label><br />
<div ng-class="newstyle01">
買滿5000元，打九折
</div>

03.使用 ng-style，但是直接設定css細節（不用代號red）：
**實用，常用
方法：用ng-click按鈕，直接修改ng-class變數名稱（不用暱稱代號）<b
注意一：是設定 ng-style，不是 ng-class
注意二：style的寫法，有點不同，沒有-，後接子母要大寫（例如：fontSize:'50px'）（不是font-size:50px）
<label>
<input type="button" ng-click="newstyle02={fontFamily:'標楷體',color: 'red'}" value="標楷體，紅色" />
</label><br>
<label>
<input type="button" ng-click="newstyle02={fontSize:'50px',fontWeight: 'bold'}" value="大小50點粗體" />
</label><br>
<div ng-style="newstyle02">
每次購物滿1000，集點數10點
</div>

04.使用 ng-class：
方法：AngularJS 提供 ng-class 讓我們可以動態的變換 css class
方法：使用Map Syntax繫結，使用物件的方式設定
例如：{strike: deleted, bold: important, red: hot}
驅動方法：在checkbox的 ng-model=class繫結代號，例如hot代表紅色
<label>
<input type="checkbox" ng-model="f3b">標楷體
</label><br>
<label>
<input type="checkbox" ng-model="f5x">大小50點
</label><br>
<label>
<input type="checkbox" ng-model="hot">紅色
</label><br>
<label>
<input type="checkbox" ng-model="important">粗體
</label>
<p ng-class="{red:hot,bold:important,fontBia:f3b,font50:f5x}">
所有產品都免運費
</p>

05.使用 ng-class：
方法：ng-click的暱稱代號允許二元雙向判斷（適合配合checkbok)<
<label>
<input type="checkbox" ng-model="hot02">紅色
</label><br>
<p ng-class="{true:'red',false:'blue'}[hot02]">
週年慶，全店產品八折
</p>

ng-bind-html：將html的程式碼，用bind變數的方式顯示效果

下載angular-sanitize.js（1.6.1版）， 下載各種版本angular-sanitize.js

(1).ng-bind：可以綁定變數，但是只能顯示出純文字，無法顯示html標籤碼的網頁效果
(2).ng-bind-html：綁定的變數，可以是html程式碼，顯示出來是網頁效果，而非純文字檔
(注意1).使用ng-bind-html，必須注意三個地方
(A). <script src="angular-sanitize.js"></script>
(B).var app = angular.module('myApp', ['ngSanitize']);
(C).//在controller似乎，無法呼叫在畫面的迴圈物件變數s.name
//所以，在外的畫面的迴圈物件變數s.name，就在畫面區域，用ng-bind-html來處理，
//但是要注意'文字'+s.name變數的處理
//只有在ng-bind-html的前後有""，中間都是'文字'，至於變數用+s.name
//而且，html的參數設定，本來前後都要有'',或""，都省略了
<script src="angular.min.js"></script>
<script src="angular-sanitize.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('show01', function ($scope) {
$scope.school = [{ ip: "http://www.tsu.edu.tw", name: "台灣首府大學", address: "台南市麻豆區南勢里168號", tel: "06-5718888", pic: "icon80_80/image01.jpg" },
{ ip: "http://web.ncku.edu.tw/", name: "成功大學", address: "臺南市東區大學路1號", tel: "06-2757575", pic: "icon80_80/image02.jpg" },
{ ip: "http://www.nutn.edu.tw/", name: "台南大學", address: "台南市中西區樹林街二段33號", tel: "06-2133111", pic: "icon80_80/image03.jpg" },
{ ip: "http://www.feu.edu.tw/", name: "遠東科大", address: "台南市新市區中華路49號 ", tel: "06-5979566", pic: "icon80_80/image04.jpg" },
{ ip: "http://www.ksu.edu.tw/", name: "崑山科大", address: "台南市永康區崑大路 195 號", tel: "06-2727175", pic: "icon80_80/image05.jpg" },
{ ip: "http://www.stust.edu.tw/", name: "南台科大", address: " 台南市永康區南台街一號", tel: "06-2533131", pic: "icon80_80/image06.jpg" }];

}); </script> </head>
<body>
<div ng-app="myApp">
01.ng-bind-html顯示超連結效果陣列：<br />
<div ng-controller="show01">
<ul>
<li ng-repeat="s in school" ng-bind-html="'<a target=_blank href='+s.ip+'>'+s.name+'</a>'"></li>
</ul>
</div>

02.ng-bind-html顯示圖片效果表格：<br />
<div ng-controller="show01">
<table border="1">
<tr><td>學校</td><td>圖片</td><td>地址</td></tr>
<tr ng-repeat="s in school"><td ng-bind-html="s.name"></td><td ng-bind-html="'<img src='+s.pic+'>'"></td><td ng-bind-html="s.address"></td></tr>
</table>
</div>

設定動畫方式有三種

CSS

ngAnimate

(13).exp3-13練習範例，exp3-13-02練習範例

下載angular-animate.min.js（1.5.3版）， 下載angular-sanitize.js

網頁設定動畫方式有三種：
方法1：使用純CSS動畫
方法2：使用ngAnimate CSS3方式(在CSS用用ngAnimate參數)<br />
方法3：使用ngAnimate JS方式，js控制CSS動畫(在module內寫m1.animation的function（不是用controller)
ngAnimate結合CSS動畫效果

Angularjs製作動畫中：ngAnimate
(1). 引入js
<script src="angular-animate.min.js"></script>

(2). var app = angular.module('myApp',['ngAnimate']);

(3). 使用下面的兩種方式來建置動畫

(A).方法二：ngAnimate CSS3的方式： ng-enter ng-enter-active ng-leave ng-leave-active 支持的指令 if,view,repeat,include,swtich repeat：ng-enter-stagger animation-delay

(B).ngAnimate JS方式 animation() enter/leave removeClass/addClass

angularJS路由器router，處理多個網頁的連接

(14).exp3-14練習範例

下載angular-route.js（1.4.8版）， 下載angular-sanitize.js

angularJS路由器router，處理多個網頁的連接
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "exp3-1.htm"})
.when('/exp3-1', { templateUrl: 'exp3-1.html' })
.when('/exp3-2', { templateUrl: 'exp3-2.html' })
.when('/exp3-3', { templateUrl: 'exp3-3.html' })
.when('/exp3-4', { templateUrl: 'exp3-4.html' })
.when('/exp3-5', { templateUrl: 'exp3-5.html' })
.when('/exp3-6', { templateUrl: 'exp3-6.html' })
.when('/exp3-7', { templateUrl: 'exp3-7.html' })
.when('/exp3-8', { templateUrl: 'exp3-8.html' })
.when('/exp3-9', { templateUrl: 'exp3-9.html' })
.when('/exp3-10', { templateUrl: 'exp3-10.html' })
.otherwise({ redirectTo: '/exp3-1' })
});
</script>
</head>
<body ng-app="myApp">
<a href="#exp3-1">【範例3-1】</a>
<a href="#exp3-2">【範例3-2】</a>
<a href="#exp3-3">【範例3-3】</a>
<a href="#exp3-4">【範例3-4】</a>
<a href="#exp3-5">【範例3-5】</a>
<a href="#exp3-6">【範例3-6】</a>
<a href="#exp3-7">【範例3-7】</a>
<a href="#exp3-8">【範例3-8】</a>
<a href="#exp3-9">【範例3-9】</a>
<a href="#exp3-10">【範例3-10】</a>
<div ng-view></div>

angularJS路由器router，連接多個函數控制器controller，再將計算結果傳回

(15).exp3-15練習範例

下載angular-route.js（1.4.8版）， 下載angular-sanitize.js

angularJS路由器router，連接多個函數控制器controller，再將計算結果傳回

<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', { templateUrl: 'momo.html', controller: 'momoMsg' })
.when('/discount9', { template: '<h1>打9折後的費用為：{{costall*0.9}}</h1><br/>', controller: 'show09' })
.when('/discount8', { template: '<h1>打8折後的費用為：：{{price(costall)}}</h1><br/>', controller: 'show08' })
.when('/discount7', { template: '<h1>打7折後的費用為：：{{price(costall)}}</h1><br/>', controller: 'show07' })
.when('/discount6', { template: '<h1>打6折後的費用為：：{{price(costall)}}</h1><br/>', controller: 'show06' })
.when('/home', { templateUrl: 'momo.html', controller: 'momoMsg' })
.otherwise({ redirectTo: '/home' })
});
app.controller("show09", function ($scope) {
//$scope.price =900;
});
app.controller("show08", function ($scope) {
$scope.price = function (costall) {
return costall*0.8;
};
});
app.controller("show07", function ($scope) {
$scope.price = function (costall) {
return costall * 0.7;
};
});
app.controller("show06", function ($scope) {
$scope.price = function (costall) {
return costall * 0.6;
};
});
app.controller("momoMsg", function ($scope) {
$scope.text = "現在全店週年慶，打折中...";
});
</script>
</head>
<body>
<h1 style="text-align:center">angularJS路由器router，處理多個網頁的連接</h1>
<h1 style="text-align:center">連接多個函數控制器controller，再將計算結果傳回</h1>
<div ng-app="myApp">
<label>購買總金額為：<input type="text" ng-model="costall" ng-init="costall=360" /></label>
<br />
<a href="#home">【首頁】</a>
<a href="#discount9">【打9折】</a>
<a href="#discount8">【打8折】</a>
<a href="#discount7">【打7折】</a>
<a href="#discount6">【打6折】</a>
<a href="#discount3">【打3折】</a>
<div ng-view></div>

watch監測所綁定變數有變化時

(16).exp3-16練習範例

var app = angular.module("myApp", []);
$scope.$watch("w1", function () {
$scope.resultarea02 = ($scope.w1 + $scope.w2) * $scope.w3 / 2;
});
$scope.$watch("w2", function () {
$scope.resultarea02 = ($scope.w1 + $scope.w2) * $scope.w3 / 2;
});
$scope.$watch("w3", function () {
$scope.resultarea02 = ($scope.w1 + $scope.w2) * $scope.w3 / 2;
});
</script>
</head>
<body>
02.取得畫面變數數值方法三（使用watch）：<br />
<label>上底：<input type="text" ng-model="w1" /></label><br />
<label>上底：<input type="text" ng-model="w2" /></label><br />
<label>高：<input type="text" ng-model="w3" /></label><br />
{{"梯形面積 （採用watch綁定)= " + resultarea02 }}

表單驗證

(17).exp3-17練習範例

<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
帳號名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">必須填寫帳號名</span>
</span>

電子郵件:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">必須填寫電子郵件</span>
<span ng-show="myForm.email.$error.email">不合法的電子郵件格式</span>
</span>

<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</form>

雙層連動選單(一)

阿Q桶麵查詢

var app = angular.module('myApp', []);
app.controller('show01',function($scope){
$scope.product = [{ name: "可口可樂", money: 25, num: 100 }, { name: "阿Q桶麵", money: 30, num: 15 }, { name: "義美水餃", money: 65, num: 60 }];
$scope.selectedIndexChange = function (sel01) {
$scope.price = sel01.money;
$scope.qty = sel01.num;
}
});
</script>
</head>
<body>
<div data-role="page" ng-app="myApp">
<div data-role="header">
<h1>如何取出select option清單，選取的是哪一個</h1>
</div>
<div data-role="content" ng-controller="show01" >
<div data-role="fieldcontain">
<label for="clothingstyle">選擇產品名稱：</label>
<select id="clothingstyle" ng-model="sel01" ng-options="p.name for p in product" ng-change="selectedIndexChange(sel01)">
<option>--請選擇--</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="clothingspec">單價：</label>
<input type="text" ng-model="price" data-mini="true" data-inline="true" />
</div>
<div data-role="fieldcontain">
<label for="clothingmoney">價錢：</label>
<input type="text" ng-model="qty" data-mini="true" data-inline="true" />
</div>

雙層連動選單(二)

郵遞區號查詢

var app = angular.module('myApp', []);
app.controller('show01',function($scope){
$scope.citys = [{ name: "台北市", areas: ["中正區100", "大同區103", "中山區104", "松山區105", "大安區106", "萬華區108", "信義區110", "士林區111", "北投區112", "內湖區114", "南港區115", "文山區116"] },
{ name: "新北市", areas: ["萬里鄉207", "金山鄉208", "板橋市220", "汐止市221", "深坑鄉222", "石碇鄉223", "瑞芳鎮224", "平溪鄉226", "雙溪鄉227", "貢寮鄉228", "新店市231", "坪林鄉232", "烏來鄉233", "永和市234", "中和市235", "土城市236", "三峽鎮237", "樹林市238", "鶯歌鎮239", "三重市241", "新莊市242", "泰山鄉243", "林口鄉244", "蘆洲市247", "五股鄉248", "八里鄉249", "淡水鎮251", "三芝鄉252", "石門鄉253"] },
{ name: "基隆市", areas: ["仁愛區200", "信義區201", "中正區202", "中山區203", "安樂區204", "暖暖區205", "七堵區206"] }];

$scope.selectedIndexChange01 = function (sel01) {
$scope.sel02array = sel01.areas;
}
$scope.selectedIndexChange02 = function (sel02) {
$scope.code = sel02;
}
});
</script>
</head>
<body>
<div data-role="page" ng-app="myApp">
<div data-role="header">
<h1>兩層聯動選單（郵遞區號查詢）</h1>
</div>
<div data-role="content" ng-controller="show01" >
<div data-role="fieldcontain">
<label for="clothingstyle">選擇城市：</label>
<select id="clothingstyle" ng-model="sel01" ng-options="p.name for p in citys" ng-change="selectedIndexChange01(sel01)">
<option>--請選擇--</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="clothingspec">選擇區域：</label>
<select id="clothingspec" ng-model="sel02" ng-options="a for a in sel02array" ng-change="selectedIndexChange02(sel02)">
<option>--請選擇--</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="clothingmoney">指定區域的郵遞區號：</label>
<input type="text" ng-model="code" data-mini="true" data-inline="true" />
</div>

將物件陣列資料填入listView清單

<script src="angular.min.js"></script>
<script src="angular-sanitize.js"></script>
</head><script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('show01',function($scope){
$scope.school=[{ip:"http://www.tsu.edu.tw",name:"台灣首府大學",address:"台南市麻豆區南勢里168號",tel:"06-5718888",pic:"icon80_80/image01.jpg"},
{ip:"http://web.ncku.edu.tw/",name:"成功大學",address:"臺南市東區大學路1號",tel:"06-2757575",pic:"icon80_80/image02.jpg"},
{ip:"http://www.nutn.edu.tw/",name:"台南大學",address:"台南市中西區樹林街二段33號",tel:"06-2133111",pic:"icon80_80/image03.jpg"},
{ip:"http://www.feu.edu.tw/",name:"遠東科大",address:"台南市新市區中華路49號 ",tel:"06-5979566",pic:"icon80_80/image04.jpg"},
{ip:"http://www.ksu.edu.tw/",name:"崑山科大",address:"台南市永康區崑大路 195 號",tel:"06-2727175",pic:"icon80_80/image05.jpg"},
{ip:"http://www.stust.edu.tw/",name:"南台科大",address:" 台南市永康區南台街一號",tel:"06-2533131",pic:"icon80_80/image06.jpg"}];

//在controller似乎，無法呼叫在畫面的迴圈物件變數s.name
//所以，在外的畫面的迴圈物件變數s.name，就在畫面區域，用ng-bind-html來處理，
//但是要注意'文字'+s.name變數的處理
//只有在ng-bind-html的前後有""，中間都是'文字'，至於變數用+s.name
//而且，html的參數設定，本來前後都要有'',或""，都省略了
////////////////////////////////////////////////////////////
});
</script>
<body>
<div data-role="page" ng-app="myApp">
<div data-role="header">
<h3>使用object變數來產生ListView清單</h3>
</div>
<div data-role="content" ng-controller="show01">
<ul data-role="listview" ng-model="listview01" data-inset="true" data-filter="true" data-filter-placeholder="輸入關鍵字">
<li ng-repeat="s in school" ng-bind-html="'<a href='+ s.ip + ' target=_blank><img src=' + s.pic + ' width=70, height=70>' + s.name + '<p>'+ s.address +', ' + s.tel +'</p><div class=ui-li-count>台南地區的大學</div></a>'"></li>
</ul>
</div>

(1).ionic定義了九種前景/背景/邊框的色彩樣式
bar-light：白色
bar-stable：灰色
bar-positive：深藍色
bar-calm：水藍色
bar-balanced：綠色
bar-energized：橘色
bar-assertive：紅色
bar-royal：紫色
bar-dark：黑色  
(2).範例：
設定背景深藍色：class="positive-bg"
設定邊框橘色：class="energized-border"
設定文字顏色紅色：class="assertive"

(1).單一按鈕(無框，menu圖)：<a class="button button-clear icon ion-navicon"></a>
(2).按鈕列： <div class="button-bar">.... </div>
(3).ionic使用ionicons圖示樣式庫（超過500個圖示可供選擇）
網址：各種icon圖形代號
各種iOS Style Icons代號
各種icon圖形代號

(4).使用法：在元素上聲明兩個CSS類：
 .icon - 將元素聲明為圖示
 .ion-{icon-name} - 聲明要使用的具體圖示
(5).常用法：通常使用i元素定義圖示：
<i class="icon ion-home"></i>
(6).指定圖示的大小：設定使用元素的font-size樣式
<any style="font-size:100px;">
<i class="icon ion-search"></i>
</any>
(7).範例：
在footer黑色設定2按鈕(home icon，首頁）：
<div class="bar bar-footer bar-dark">
<div class="button-bar">
<a class="button button-clear icon ion-home">首頁</a>
<a class="button button-clear icon ion-radio-waves">訂閱</a>
</div>
</div>

<button class="button button-balanced">
綠色按鈕
</button>

<button class="button button-block button-positive">綠色寬按鈕</button>

<button class="button button-full button-balanced">綠色寬按鈕</button>

<button class="button button-small button-assertive">紅色小按鈕</button>

<button class="button button-outline button-assertive button-large">
紅色邊框大按鈕</button>

<button class="button button-clear button-energized">橘色無框按鈕</button>

<button class="button button-energized icon-left ion-heart">使用ionicons.com圖標(橘色底藍心heart)</button>

<button class="button icon ion-camera button-positive">藍色背景有框按鈕</button>

<button class="button button-clear icon ion-camera button-positive">藍色icon無框按鈕</button>

藍色背景按鈕條
<div class="button-bar bar-positive">
<a class="button">香蕉</a>
<a class="button">蘋果</a>
<a class="button">芭樂</a>
</div>

ionic預定義了兩個內容容器樣式：
(1).content – 相對定位
(2).scroll-content - 絕對定位，內容元素占滿整個螢幕
建議：使用scroll-content（有些元件若用content顯示不完全）
(3).範例：有header subheader，絕對定位的content：
<div class="scroll-content has-header has-subheader">
...
</div>

邊距統一為10px。可以在任何元素上應用這些樣式

<any class="list">
<any class="item">蘋果</any>
<any class="item">榴蓮</any>
<any class="item">西瓜</any>
<any class="item">柳丁</any>
</any>

(1).要插入icon圖示，需要滿足兩個條件：
A. 在.item元素上顯示icon位置。圖示可以位於清單的左側或右側， 分別使用.item-icon-left和.item-icon-right聲明
B. 在.item元素內插入圖示 list-inset

(2). item嵌入頭像：在ionic中，頭像被設置為40x40固定大小。和插入圖示類似，向.item 中插入頭像需要滿足兩個條件：
A. 在.item元素上聲明頭像位置。頭像可以位於列表的左側或右側， 分別使用.item-avatar-left和.item-avatar-right聲明
B. 在.item元素內使用img標籤插入頭像

(3). item 嵌入縮略圖：在ionic中，縮略圖被定義為80px大小，比頭像大，適合新聞圖片。需要滿足兩個條件：
A. 在.item元素上聲明縮略圖位置。縮略圖可以位於列表的左側或右側， 分別使用.item-thumbnail-left和.item-thumbnail-right聲明
B. 在.item元素內使用img標籤插入頭像

(4). item嵌入大圖
(5).卡片：需要滿足兩個條件：
A.card 可以讓list和左右有一些邊距
B.在. item-divider元素定義list的頭和尾
<div class="card">
<div class="item ">
</div>
</div>

<div class="list">
<div class="item">蘋果</div>
<div class="item">香蕉</div>
</div>

<div class="list">
<div class="item-divider">水果類</div>
<div class="item">蘋果</div>
<div class="item">香蕉</div>
</div>

**新增一個icon：<i class="icon ion-heart"></i> ，否則文字與icon會合在一起
**在左邊放個icon：<a class="item item-icon-left">
**在右邊放一個badge徽章：<span class="badge badge-assertive">NT25</span>
**在右邊放個note註記：<span class="item-note">味道水果</span>

<div class="list">
<div class="item item-divider">水果類</div>
<a class="item item-icon-left"><i class="icon ion-heart"></i>香蕉<span class="badge badge-assertive">NT25</span></a>
<a class="item item-icon-left icon ion-social-apple" href="#">蘋果</a>
<a class="item item-icon-left item-icon-right"><i class="icon ion-bag"></i>芒果<i class="icon ion-happy"></i></a>
<a class="item item-icon-left"><i class="icon ion-android-restaurant"></i>榴蓮<span class="item-note">味道很重的水果</span></a>
</div>

<div class="list">
<div class="item item-button-right">
直接打電話給林老闆
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
</div></div>

<div class="list">
<a class="item item-avatar" href="#">
<img src="img/image01.jpg">
<h2>宋慧喬</h2>
<p>韓國女演員</p>
</a>
<a class="item item-avatar" href="#">
<img src="img/image02.jpg">
<h2>西野七瀨</h2>
<p>日本乃木坂團體成員</p>
</a></div>

<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="img/image01.jpg">
<h2>宋慧喬</h2>
<p>韓國女演員</p>
</a>
<a class="item item-thumbnail-left" href="#">
<img src="img/image02.jpg">
<h2>西野七瀨</h2>
<p>日本乃木坂團體成員</p>
</a></div>

<div class="list list-inset">
<a class="item item-thumbnail-left" href="#">
<img src="img/image01.jpg">
<h2>宋慧喬</h2>
<p>韓國女演員</p>
</a>
<a class="item item-thumbnail-left" href="#">
<img src="img/image02.jpg">
<h2>西野七瀨</h2>
<p>日本乃木坂團體成員</p>
</a></div>

<div class="card">
<div class="item item-text-wrap">卡片內容</div>
</div>

<div class="card">
<div class="item item-divider">標題</div>
<div class="item item-text-wrap">卡片內容</div>
<div class="item item-divider">註腳</div>
</div>

card-item，和list-item的做法一樣

<div class="card">
<a class="item item-icon-left item-icon-right" href="#"><i class="icon ion-home"></i>卡片內容<i class="icon ion-email"></i></a>
<a class="item item-icon-left" href="#"><i class="icon ion-happy"></i>卡片內容<span class="item-note">註解</span></a>
<a class="item item-icon-left" href="#"><i class="icon ion-sad"></i>卡片內容<span class="badge badge-assertive">徽章</span></a>
</div>

<div class="card">
<div class="item item-avatar">
<img src="img/image01.jpg" />
<h2>宋慧喬</h2>
<p>韓國明星</p>
</div>
<div class="item item-image">
<img src="img/image01.jpg" />
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
播放主題曲
</a>
</div>

卡片的主要內容放在：class="item item-body"
局部註腳超連結：class="subdued"

<div class="card">
<div class="item item-avatar">
<img src="img/image02.jpg">
<h2>西野七瀨</h2>
<p>日本乃木坂團體成員</p>
</div>
<div class="item item-body">
<img src="img/image02.jpg">
<p>
西野七瀨（にしの ななせ，1994年5月25日－）是一名出身日本大阪府的歌手、藝人和偶像，目前為女子音樂團體乃木坂46的成員，所屬事務所為Sony Music Entertainment。身高159公分，[1]表妹是NMB48前研究生高山梨子。女性時尚雜誌《non-no》的專屬模特兒。暱稱是娜醬(なぁちゃん)、娜娜賽馬路(ななせまる)，由於西野非常喜愛鴿子，所以有許多中國大陸網友直接稱西野為「鴿子」。擅長潛水，所以有「潛水的娜娜」之稱號。
</p>
<p>
<a class="subdued" href="#">1 喜歡</a>
<a class="subdued" href="#">5 評論</a>
</p>
</div></div>

<label class="item item-input">
<span class="input-label">你的帳號</span>
<input type="text" placeholder="李小花">
</label>

<label class="item item-input">
<span class="input-label">輸入Email</span>
<input type="email" placeholder="abc@gmail.com">
</label>

<label class="item item-input">
<span class="input-label">輸入電話</span>
<input type="tel" placeholder="0956123456">
</label>

<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="查詢輸入">
</label>

<label class="item item-input">
<span class="input-label">輸入數字number(向上下鍵)</span>
<input type="number" min="1" max="120" value="20">
</label>

<label class="item item-input">
<span class="input-label">輸入日期Date</span>
<input type="date">
</label>

<label class="item item-input">
<span class="input-label">輸入月份Mont</span>
<input type="month">
</label>

<label class="item item-input">
<span class="input-label">輸入密碼</span>
<input type="password" placeholder="Abc123">
</label>

<label class="item item-input">
<span class="input-label">滑動軸輸入數字：{{num1}}</span>
<input type="range" min="1" max="120" value="20" ng-model="num1">
</label>

<div class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checked />
</label>
複選核取方塊checkbox
</div>

<div class="item item-toggle">
單選開關
<label class="toggle toggle-assertive">
<input type="checkbox" checked />
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>

<label class="item item-radio">
<input type="radio" name="sex" ng-model="sexmale" value="1" />
<div class="radio-content">
<div class="item-content">
單選框
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>

<div class="item item-input item-select">
<div class="input-label">
下拉選單
</div>
<select>
<option selected>中正區100</option>
<option>大同區103</option>
</select>
</div>

<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="左有標籤文字，帶圖標icon的輸入框">
</label>

<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<span class="input-label">你的帳號</span>
<input type="text" placeholder="左有標籤文字，帶圖標icon的輸入框">
</label>

<h1 class="title" style="text-align:center">內縮padding的兩種做法：(1)padding，(2)list-inset</h1>
<div class="padding">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<span class="input-label">你的帳號</span>
<input type="text" placeholder="左有標籤文字，帶圖標icon的輸入框">
</label>
</div>

<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<span class="input-label">你的帳號</span>
<input type="text" placeholder="左有標籤文字，帶圖標icon的輸入框">
</label>
</div>

(1)架構：
<script>
var app = angular.module('myApp', []);
app.controller('show01', function ($scope) {
$scope.do = function(){
//事件函數程式寫在這裡（$scope.a3 = $scope.a1*2)
}
});
</script>
</head>
<body ng-app="myApp">
<ion-content ng-controller="show01">
<button ng-click="do()" class="button button-assertive">計算</button>
</ion-content>

(2).範例：
<script>
var app = angular.module('myApp', []);
app.controller('show01', function ($scope) {
$scope.do = function(){
$scope.a4=(parseInt($scope.a1)+parseInt($scope.a2))*parseInt($scope.a3)/2;
}
});
</script>
</head>
<body ng-app="myApp">
<ion-content ng-controller="show01">
<label class="item item-input">
<span class="input-label">上底</span>
<input ng-model="a1" type="text" placeholder="1-100">
</label>

<button ng-click="do()" class="button button-assertive">
計算梯形面積
</button>

(1).list 類同樣可以用於 input 元素
(2).Ionic 更傾向於在元素<label> 外創建 item-input , 這樣無論任何某一行的任何部位被點擊的時候都可以進入輸入狀態
<div class="list">
<label class="item item-input">
<input type="text" placeholder="帳號" />
</label>
<label class="item item-input">
<input type="text" placeholder="密碼" />
</label>
</div>
<div class="padding">
<button class="button button-block button-positive">送出</button>
</div>

<input type="text"/>：只能輸入單行
<textarea ></textarea> ：可以輸入多行

<div class="list">
<label class="item item-input">
<input type="text" placeholder="帳號">
</label>
<label class="item item-input">
<textarea placeholder="評論"></textarea>
</label>
</div>

input-label 將標籤文字放置於輸入框裡面 input 的左側
（input-labe可以取代placeholder的功能）

<div class="input-label">帳號</div>
<input type="text" />

<input type="text" placeholder="帳號">

若輸入方塊外側有提示文字，裡面也要有浮水印提示文字，就必須結合item-stacked-label，以及定 input-label

<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">輸入賬號</span>
<input type="text" placeholder="john0105">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">輸入手機號碼</span>
<input type="text" placeholder="0915-234-687">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive">註冊</button>
</div>

class="item item-input item-Floating-label"與class="item item-input item-stacked-label"
做法一樣，類似上面案例

<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="帳號" />
</label>
<label class="item item-input">
<input type="text" placeholder="密碼" />
</label>
</div>
<div class="padding">
<button class="button button-block button-positive">送出</button>
</div>

<div class="list">
<div class="item-input-inset light-bg">
<label class="item-input-wrapper">
<input type="text" placeholder="帳號" />
</label>
<button class="button button-small button-positive">送出</button>
</div>
</div>

list-inset：內缩
<label class="item item-input">：label內部的物件都是在同一列內當作是input顯示的表現
class="icon ion-search placeholder-icon"：icon會變成淡色顯示，而不是深色顯示

<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>

<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear button-positive">
確定
</button>
</div>

注意：必須用到label，才能變化選擇

<div class="item item-toggle">
首府大學是否在台南？
<label class="toggle toggle-assertive">
<input type="checkbox" checked />
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>

<div class="card">
<div class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checked />
</label>
首府大學是否在台南？
</div>
</div>

注意：必須用到label，才能變化選擇

<label class="item item-radio">
<input type="radio" name="sex" ng-model="sexmale" value="1" />
<div class="radio-content">
<div class="item-content">
男生
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>

<div class="item range range-assertive">
身高<input type="range" max="200" min="50" value="170" />
<i class="icon ion-person"></i>
</div>

<body ng-app="myApp">
<ion-content ng-controller="show01">
<form name="myForm" novalidate>
<label class="item item-input-inset">
<span class="input-label">帳號</span>
<input type="text" ng-model="user" name="user" required>
<span class="item-note" ng-show="myForm.user.$error.required">帳號不得為空</span>
</label>
<label class="item item-input-inset">
<span class="input-label">Email</span>
<input type="email" ng-model="email" name="email" required>
<span class="item-note" ng-show="myForm.email.$error.required">Email不得為空</span>
<span class="item-note" ng-show="myForm.email.$error.email">Email格式錯誤</span>
</label>
<button class="button button-outline button-block"
ng-disabled="myForm.$invalid">
送出
</button>
</form></ion-content>

<div class="item item-input item-select">
<div class="input-label">
台北市
</div>
<select>
<option selected>中正區100</option>
<option>大同區103</option>
</select>
</div>

ionic的排版對齊有兩種方法：
（1）使用list-ttem，card-item法
（2）使用row-col法

<div class="row">
<div class="col">
<button class="button button-balanced">綠色按鈕</button>
</div>
<div class="col">
<button class="button button-assertive">紅色按鈕</button>
</div>
<div class="col">
<button class="button button-energized">橘色按鈕</button>
</div>
<div class="col">
<button class="button button-dark">黑色按鈕</button>
</div>
<div class="col">
<button class="button button-royal">紫色按鈕</button>
</div></div>

ionic網格grid可使用的寬度參數：.col-10，20，25，33，50，50，67，75，80，90

<div class="row">
<div class="col col-25"><img style="width:100%" src="http://www....icon-69061.png"></div>
<div class="col col-50"><img style="width:100%" src="http://icons.iconarc....amera-icon.png"></div>
</div>
<div class="row">
<div class="col col-33"><img style="width:100%" src="http://www.free-i.....icon-69061.png"></div>
<div class="col col-33"><img style="width:100%" src="http://icons.i.......era-icon.png"></div>
<div class="col col-33"><img style="width:100%" src="http://orig00.de......a.png"></div>
</div>
<div class="row">
<div class="col"><img src="http://wingswatches.c.......3.jpg"></div>
</div>

ionic網格grid可使用的offset參數：.col-offset-10，20，25，33，50，50，67，75，80，90

<div class="row">
<div class="col col-offset-10 col-10" style="text-align:right"><i class="icon ion-person"></i></div>
<div class="col col-75">
...................
</div>
</div>
<div class="row">
<div class="col col-offset-10 col-10" style="text-align:right"><i class="icon ion-closed-captioning icon-large"></i></div>
<div class="col col-75">
.......................
</div>
</div>
<div class="row">
<div class="col col-offset-20 col-75"><button class="button button-positive button-block">送出</button></div>
</div>

<div class="row">
<div class="col col-top">
<button class="button button-royal">紫色按鈕</button>
</div>
<div class="col">
<button class="button button-royal">紫色按鈕</button><br/>
<button class="button button-royal">紫色按鈕</button><br />
<button class="button button-royal">紫色按鈕</button>
</div></div>

<div class="row">
<div class="col col-center">
<button class="button button-stable">灰色按鈕</button>
</div>
<div class="col">
<button class="button button-block button-stable">灰色按鈕</button>
<button class="button button-block button-stable">灰色按鈕</button>
<button class="button button-block button-stable">灰色按鈕</button>
</div> </div>

<div class="row">
<div class="col col-bottom">
<button class="button button-calm">水藍色按鈕</button>
</div>
<div class="col">
<button class="button button-calm">水藍色按鈕</button><br/>
<button class="button button-calm">水藍色按鈕</button>
</div> </div>

(1)若沒有指定Responsive Grid：則無論大小螢幕都是一樣排版
(2若指定row responsive-sm： 當是手機小螢幕時，每個col都是滿行顯示
(3若指定row responsive-md： 當小於平板中螢幕時，每個col都是滿行顯示
(4三種螢幕設定：桌機row responsive-lg，平板row responsive-md，手機row responsive-sm

class="row responsive-md">
<div class="col-33 balanced-bg">.col-33</div>
<div class="col-33 assertive-bg">.col-33</div>
<div class="col-33 positive-bg">.col-33</div>
</div>
<div class="row responsive-sm">
<div class="col-10 balanced-bg">.col-1</div>
<div class="col-10 balanced-bg">.col-1</div>
<div class="col-10 balanced-bg">.col-1</div>
</div>
<div class="row">
<div class="col-75 royal-bg">.col-md-8</div>
<div class="col-25 positive-bg">.col-md-4</div>
</div>
<div class="row">
<div class="col-50 dark-bg">.col-6</div>
<div class="col-50 calm-bg">.col-6</div>
</div>

<div class="tabs tabs-positive">
<a class="tab-item active" href="#">
首頁
</a>
<a class="tab-item" href="#">
產品
</a>
<a class="tab-item" href="#">
聯絡
</a>
</div>

1. tab-item
2. 在.tabs容器上使用.tabs-icon-{position}聲明圖示位置(三種)
 .tabs-icon-top - 將圖示置於文字之上
 .tabs-icon-left - 將圖示置於文字左側
 .tabs-icon-only - 只使用圖示，不顯示文字

<div class="tabs tabs-stable tabs-icon-only">
<a class="tab-item active">
<i class="icon ion-ios-home-outline"></i>首頁
</a>
</div>

<div class="tabs tabs-stable tabs-icon-top">
<a class="tab-item active">
<i class="icon ion-ios-home-outline"></i>首頁
</a>
<a class="tab-item">
<i class="icon ion-ios-email-outline"></i>新聞
</a>
<a class="tab-item positive-bg light">
<i class="icon ion-ios-plus-empty"></i>微博
</a>
<a class="tab-item">
<i class="icon ion-ios-eye-outline"></i>產品
</a>
<a class="tab-item">
<i class="icon ion-ios-person-outline"></i>關於
</a>
</div>

<div class="tabs tabs-stable tabs-icon-left">
<a class="tab-item active">
<i class="icon ion-ios-home-outline"></i>首頁
</a>
</div>

ionic的排版對齊有兩種方法：
（1）使用list-ttem，card-item法
（2）使用row-col法

<html ng-app="myAapp">
<head>
<script>
angular.module("myAapp", ["ionic"])
.controller("show01", function ($scope) {
});
</script>
</head>
<body class="stable-bg" ng-controller="show01">
<ion-header-bar class="bar bar-header bar-dark">
</ion-header-bar>

<ion-content class="scroll-content has-header">
</ion-content>

<ion-footer-bar class="bar bar-footer bar-dark">
</ion-footer-bar>
</body></html>

tabs選項卡有三種做法：
(1).有router路由的tabs：（又再分兩種：A用內聯網頁（exp8_01.html～exp8_05.html），B用外聯網頁）
(2).無router路由的tabs：本範例（採用ionic JS元件）
_(A).優點：不需要設定router，省麻煩
_(B).優點：若要寫controller，function， 也可以，更簡單（如下下個範例exp7_04.html）
_(C).注意：若要用button，list-item，sidlemenu連結各tabs頁面，必須用$ionicTabsDelegate方法
_(D).缺點：無法做到：list-item點選item後開啟detail資料(由list-item傳來id參數），這需要設定router才能做到

(3)注意：一定要設定ng-app="ionic"，非ionic就無法顯示
(4)四層結構分別是
ion-tabs
ion-tab
ion-view
ion-header或ion-content
（3)tabs-striped：tabs具有條帶移動帶
tabs-icon-top：tabs的icon顯示在文字上方
顯示badge徽章：<ion-tab badge="12" badge-style="badge-assertive">
(4)所有tabs參數匯總表格

<html ng-app="ionic">
<ion-tabs class="tabs-dark tabs-striped tabs-icon-top">
<ion-tab title="列表" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline">
<ion-view>
<ion-header-bar class="bar-positive">
<h1 class="title">List(列表)</h1>
</ion-header-bar>
<ion-content>
//...
</ion-content>
</ion-view>
</ion-tab>

<ion-tab title="按鈕" icon-on="ion-ios-undo" icon-off="ion-ios-undo-outline">
<ion-view>
<ion-header-bar class="bar-positive">
<h1 class="title">ionic 按钮各種顏色</h1>
</ion-header-bar>
<ion-content>
//...
</ion-content>
</ion-view>
</ion-tab>

</ion-tabs>

(1)注意：一定要設定ng-app="ionic"，非ionic就無法顯示
(2)四層結構分別是
ion-tabs
ion-tab
ion-view
ion-header或ion-content
（3)tabs-striped：tabs具有條帶移動帶
tabs-icon-top：tabs的icon顯示在文字上方
顯示badge徽章：<ion-tab badge="12" badge-style="badge-assertive">
(4)所有tabs參數匯總表格

<ion-tabs class="tabs-dark tabs-striped tabs-icon-top tabs-top">
<ion-tab title="列表" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline" badge="10" badge-style="badge-assertive"><ion-view>
<ion-header-bar class="bar-positive">
<h1 class="title">List(列表)</h1>
</ion-header-bar>
<ion-content>
//...
</ion-content>
</ion-view>
</ion-tab>

(1)注意：一定要設定 angular.module("myApp", ["ionic"]);

<html ng-app="myApp">
<script>
var app = angular.module("myApp", ["ionic"]);
var varemail, vartel, varheight, varsex;
app.controller('show01', function ($scope) {
$scope.btnemail = function (r1) {
varemail = r1;
$scope.youremail = varemail;
};
$scope.btnheight = function (r1) {
varheight = r1;
$scope.yourheight = varheight;
}; }); </script> </head>
<body ng-controller="show01">
<ion-tab title="郵件" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-view> <ion-content> <div class="list">
<label class="item item-input">
<span class="input-label">輸入Email</span>
<input type="email" ng-model="inputemail" ng-init="inputemail='test@yahoo.com'">
</label>
<button class="button button-assertive" ng-click="btnemail(inputemail)">確定送出彙整</button>
</div>
</ion-content> </ion-view> </ion-tab>

<ion-tab title="彙整輸入資料" icon-on="ion-ios-person" icon-off="ion-ios-person-outline">
<ion-view> <ion-content> <div class="list">
<label class="item item-input">
<span class="input-label">你輸入的Email</span>
<input type="text" ng-model="youremail">
</label>
<label class="item item-input">
<span class="input-label">你輸入的身高：{{yourheight}}</span>
<input type="range" min="1" max="200" ng-model="yourheight">
</label>

(1).不用router 的多個頁面JS tabs用按鈕驅動：
方法：$ionicTabsDelegate.select(index)
(2).selectTabWithIndex(1)驅動第一個tabs
(3).這個方法是最簡單的方法：使用JS tabs元件，不需router，sildemenu用selectTabWithIndex(1)驅動第一個tabs（所有的tabs，sidemenu都可快速做出對應的驅動頁面）
(4).唯一缺點：若上方header有左右按鈕要連結到專屬頁面，此法較難做到

<button class="button button-royal button-large" ng-click="selectTabWithIndex(1)">列表tabs</button>

var app = angular.module("myApp", ["ionic"]);
app.controller('show01', function ($scope, $ionicTabsDelegate) {
$scope.selectTabWithIndex = function (index) {
$ionicTabsDelegate.select(index);
}
});

連結其他網頁的做法有兩種：
（1)過程無轉場效果：視圖容器用<div ui-view></div>（網頁元件可以用所有ionic CSS所有上面元件）
（2)過程有轉場效果：視圖容器用<ion-nav-view></ion-nav-view>（網頁元件用ionic JS元件）

<html ng-app="myApp">
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script>
var app = angular.module("myApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("button", {
templateUrl: "button.html"
})
.state("list", {
templateUrl: "list.html"
});
})
.controller("show01",function($scope,$state){
$state.go("list");
});
</script>
</head>
<body class="stable-bg" ng-controller="show01">
<!--視圖容器container-->
<div ui-view></div>

<!--自己建立一個內聯模板(類檔案檔案): list.html（並不是真的有這個外部檔案）-->
<script id="list.html" type="text/ng-template">
//.....
</script>

<!--自己建立第二個內聯模板(類檔案檔案): button.html（並不是真的有這個外部檔案）-->
<script id="button.html" type="text/ng-template">
//.....
</script>

連結其他網頁的做法有兩種：
（1)過程無轉場效果：視圖容器用<div ui-view></div>（網頁元件可以用所有ionic CSS所有上面元件）
（2)過程有轉場效果：視圖容器用<ion-nav-view></ion-nav-view>（網頁元件用ionic JS元件）

<script>
var app = angular.module("myApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("button", {
templateUrl: "button.html"
})
.state("list", {
templateUrl: "list.html"
});
})
.controller("show01",function($scope,$state){
$state.go("list");
});
</script>
</head>
<body class="stable-bg" ng-controller="show01">
<!--ionic js換頁遊動畫轉場效果的，視圖容器container（導覽框架的導覽視圖容器ion-nav-view）-->
<ion-nav-view></ion-nav-view>

<!--自己建立一個內聯模板(類檔案檔案): list.html（並不是真的有這個外部檔案）-->
<script id="list.html" type="text/ng-template">
//.....
</script>

<!--自己建立第二個內聯模板(類檔案檔案): button.html（並不是真的有這個外部檔案）-->
<script id="button.html" type="text/ng-template">
//.....
</script>

連結有轉場效果：
(1)視圖容器用<ion-nav-view></ion-nav-view>（網頁元件用ionic JS元件）
(2)網頁內容放在模板視圖<ion-view view-title="首頁"></ion-view>內
(3)導覽工具列bar定義在 <ion-nav-ba></ion-nav-bar>內
(4)導覽列bar裡面的按鈕<ion-nav-buttons side="right"></ion-nav-buttons>內

<script>
var app = angular.module("myApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("button", {
templateUrl: "button.html"
})
.state("list", {
templateUrl: "list.html"
});
})
.controller("show01",function($scope,$state){
$state.go("list");
});
</script>
</head>
<body class="stable-bg" ng-controller="show01">
<!--ionic js換頁遊動畫轉場效果的，視圖容器container（導覽框架的導覽視圖容器ion-nav-view）-->
<ion-nav-view></ion-nav-view>

<!--導航框架的導航bar（共同性，所以只要寫一次即可，在ion-nav-bar設定）-->
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-buttons side="left">
<button class="button button-assertive side-right" ui-sref="button">按鈕</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-royal side-left" ui-sref="list">列表</button>
</ion-nav-buttons>
</ion-nav-bar>

<!--自己建立一個內聯模板(類檔案檔案): list.html（並不是真的有這個外部檔案）-->
<script id="list.html" type="text/ng-template">
<ion-view view-title="列表">
<ion-content>
//...
</ion-content>
</ion-view>
</script>

<!--自己建立第二個內聯模板(類檔案檔案): button.html（並不是真的有這個外部檔案）-->
<script id="button.html" type="text/ng-template">
<ion-view view-title="按鈕">
<ion-content>
//...
</ion-content>
</ion-view>
</script>

連結有轉場效果：
(1)視圖容器用<ion-nav-view></ion-nav-view>（網頁元件用ionic JS元件）
(2)網頁內容放在模板視圖<ion-view view-title="首頁"></ion-view>內
(3)導覽工具列bar定義在 <ion-nav-ba></ion-nav-bar>內
(4)導覽列bar裡面的按鈕<ion-nav-buttons side="right"></ion-nav-buttons>內
(5)所有返回網頁的共同返回鍵<ion-nav-back-button></ion-nav-back-button>
(6)設定某個類檔案的標題圖形<ion-nav-title><img src="go.png"></ion-nav-title>
(7)設定某個類檔案的內容<ion-content></ion-content>
(8)Navigation導航的7個JS方法
ion-nav-view
ion-view
ion-nav-bar
ion-nav-buttons
ion-nav-back-button
nav-clear
$ionicNavBarDelegate

<script>
var app = angular.module("myApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
templateUrl: "home.html"
})
.state("email", {
templateUrl: "email.html"
});
})
.controller("show01",function($scope,$state){
$state.go("home");
});
</script>
</head>
<body class="stable-bg" ng-controller="show01">
<!--ionic js換頁遊動畫轉場效果的，視圖容器container（導覽框架的導覽視圖容器ion-nav-view）-->
<ion-nav-view></ion-nav-view>

<!--導航框架的導航bar（共同性，所以只要寫一次即可，在ion-nav-bar設定）-->
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

<!--自己建立第1個內聯模板(類檔案檔案): home.html（並不是真的有這個外部檔案）-->
<script id="home.html" type="text/ng-template">
<ion-view view-title="首頁">
<ion-nav-title>
<img src="img/firefox-logo.png" style="height:100%">
</ion-nav-title>
<ion-content>
//...
</ion-content>
</ion-view>
</script>

<!--自己建立第2個內聯模板(類檔案檔案): w.html（並不是真的有這個外部檔案）-->
<script id="email.html" type="text/ng-template">
<ion-view view-title="輸入Email">
<ion-content>
//...
</ion-content>
</ion-view>
</script>

<!--自己建立第3個內聯模板(類檔案檔案): tel.html（並不是真的有這個外部檔案）-->
<script id="tel.html" type="text/ng-template">
<ion-view view-title="輸入電話">
<ion-content>
//...
</ion-content>
</ion-view>
</script>

多頁面之間傳遞變數兩個法：
(1)方法1：用javascirpt的方式來讀取畫面變數,也可以成功讀取到數值，並傳遞給另外一個網頁）
function btn() {
varemail = document.getElementById("id01").value;}
(2)方法2：要讀取畫面的變數，不可直接讀取，要有個function才能將數值傳回（在相應的tab-controller建立$scope.btntel = function (r1) {})
（本來也可用watch偵測變數，但在tabs內，似乎無法watch）
(3)不同controller之間用全域變數來傳遞：var varemail, vartel, varheight, varsex;
(4)注意事項
A.在畫面的<label></label>內部不要放input button，否則click就會無法動作
B.似乎在tabs的function內無法直接讀取畫面的$scope.inputemail數值，所以用函數btn02(r1)的方式來傳遞參數

var app = angular.module("myApp", ["ionic"]);
var varemail, vartel, varheight, varsex;
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
templateUrl: "home.html"
})
.state("email", {
templateUrl: "email.html",
controller: 'tab1Controlleremail'
})
.state("arrange", {
templateUrl: "arrange.html",
controller: 'tab1Controllerarrange'
}); })
app.controller("show01", function ($scope, $state) {
$state.go("home");
});

app.controller('tab1Controlleremail', function ($scope) {
$scope.btnemai = function (r1) {
varemail = r1;
}; });

app.controller('tab1Controllerarrange', function ($scope) {
$scope.youremail = varemail;
})

</script> </head> <body class="stable-bg" ng-controller="show01">

<!--自己建立第1個內聯模板(類檔案檔案): home.html（並不是真的有這個外部檔案）-->
<script id="home.html" type="text/ng-template">
<ion-view view-title="首頁"> <ion-content><div class="list">
<a class="item item-icon-left" ui-sref="email">
<i class="icon ion-email"></i>
輸入電子郵件
</a>
<a class="item item-icon-left" ui-sref="arrange">
<i class="icon ion-person-stalker"></i>
彙整輸入資料
<span class="badge badge-assertive">0</span>
</a>
</div> </ion-content> </ion-view> </script>

<!--自己建立第2個內聯模板(類檔案檔案): w.html（並不是真的有這個外部檔案）-->
<script id="email.html" type="text/ng-template">
<ion-view view-title="輸入Email">
<ion-content><div class="list">
<label class="item item-input">
<span class="input-label">輸入Email</span>
<input type="text" ng-model="inputemail" ng-init="inputemail='test@yahoo.com'">
</label>
<button class="button button-assertive" ng-click="btnemai(inputemail)">確定送出彙整</button>
</div> </ion-content> </ion-view> </script>

<!--自己建立第6個內聯模板(類檔案檔案): sex.html（並不是真的有這個外部檔案）-->
<script id="arrange.html" type="text/ng-template">
<ion-view view-title="彙整輸入資料"> <ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">你輸入的Email</span>
<input type="text" ng-model="youremail">
</label>

tabs選項卡有三種做法：
(1).第二種方法：router路由＋外聯網頁（官方預設所提供的tabs方法）
(2).缺點： 每一個tab選項卡的controller內的事件，只有第一次進入時會被啟動，第二次進入就不會啟動事件了，例如本範例，第二次點按tabs所輸入的變數，就無法被傳遞，會有變數無法連續被傳遞的關鍵問題
(3).缺點：這種讀取外部檔案方法，第一次開啟網頁時，會所有子檔案讀入cache內，所以速度會慢，資料修改了，cache內還是舊資料

(1).index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>

(2).js/app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider

// 設定共用的tabs模板tabs.html
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})

// 第一個tabs選項卡
.state('tab.tab1', {
url: '/tab1',
views: {
'tab-tab1': {
templateUrl: "templates/tab-tab1.html",
controller: 'tab1Controller'
} } })
//設定其他選項卡

// 其他狀況的進入點
$urlRouterProvider.otherwise('/tab/tab1');
});

(3).js/controllers.js
var app = angular.module('starter.controllers', [])
var varemail, varinterest, varheight;
app.controller('tab1Controller', function ($scope) {
})
.controller('tab2Controller', function ($scope) {
})

.controller('tab3Controller', function ($scope) {
$scope.btnemai = function (r1) {
varemail = r1;
}; })

(4).templates/tabs.html
<ion-tabs class="tabs-icon-top tabs-positive">

<ion-tab title="列表" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline" href="#/tab/tab1">
<ion-nav-view name="tab-tab1"></ion-nav-view>
</ion-tab>

<ion-tab title="彙整" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" href="#/tab/tab5">
<ion-nav-view name="tab-tab5"></ion-nav-view>
</ion-tab>
</ion-tabs>

(5).templates/tab-tab1.html
<ion-view view-title="List(列表)">
<ion-tab title="列表" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline">
<ion-header-bar class="bar-positive"><h1 class="title">List(列表)</h1></ion-header-bar>
<ion-content>
<ul class="list"><li class="item"> 蘋果</li></ul>
</ion-content></ion-view>