Embed Size (px)
Citation preview
Ionic & AngularJS
副標題
AngularJS架構模組為一容器來包含下列物件<html ng-app=“模組名稱”>
當應用程式具多頁面則需藉由組態設定頁面路由(Routes)資訊
用於篩選資料
作為HTML標籤屬性用於擴充標籤功能
頁面切換-.config
AngularJS藉由頁面注入(injection)來進行頁面切換
多頁設計必須在首頁頁面置入<ion-nav-view></ion-nav-view>來宣告頁面物件後
之後個別設計頁面利用<ion-view><ion-content></ion-content></ion-view>
空白project
多頁架構(單頁單view)
多頁架構(單頁多view)
側邊選項(sidemenu)
Tabs
空白Project-設定路由相關資訊
Ionic start class3 blank
Cd class3
Ionic platform add android
開啟www/index.html
刪除單頁架構<ion-pane></ion-pane>
加入<ion-nav-view></ion-nav-view>
開啟js/app.js
最後加入
空白Project-2
$stateProvider.state(‘狀態名稱’, {
url: ‘連結名稱’,
templateUrl: ‘檔案位置’
})
AngularJS進行頁面切換可利用狀態名稱或連結名稱。使用者可利用$state.go命令在controllers中進行頁面切換，或是在連結標籤<a>將hrref=“#連結名稱”即可進行換頁
空白Project-3 設定個別頁面
建立www/templates目錄
加入home.html
加入page2.html
加入sidemenu(多頁面)
<ion-side-menus><ion-side-menu-content></ion-side-menu-cotent><ion-side-menu></ion-side-menu></ion-side-menus> Sidemenu標籤包含兩個部分: <ion-side-menu-
content>用於定義主頁面、<ion-side-menu>用於定義側邊選單
所以點選側邊選單時，必須指定顯示頁頁為主頁面
加入sidemenu(多頁面)-2
請在templates目錄中加入menu.html<ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content><ion-nav-bar class="bar-stable"><ion-nav-back-button></ion-nav-back-button><ion-nav-buttons side="left"><button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button></ion-nav-buttons></ion-nav-bar><ion-nav-view name="menuContent"></ion-nav-view></ion-side-menu-content>
<ion-side-menu side="left"><ion-header-bar class="bar-stable"><h1 class="title">左邊選單</h1></ion-header-bar><ion-content><ion-list><ion-item menu-close href="#/app/home">首頁</ion-item><ion-item menu-close href="#/app/page2">Page2</ion-item></ion-list></ion-content></ion-side-menu></ion-side-menus>
加入sidemenu(多頁面)-3
修改app.js
Tab
設計同sidemenu，請開啟上一個sidemenu project
在template目錄中加入如右tabs.html檔案
App.js設定如sidemenu
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title=“首頁” icon-on=“ion-ios-home” icon-off=“ion-ios-home-outline” href=>
<ion-nav-view name=“Home"></ion-nav-view>
</ion-tab>
<ion-tab title=“第二頁" icon-on="ion-social-sanpchat" icon-off="ion-social-snapchat-outline">
<ion-nav-view name=“Page2"></ion-nav-view>
</ion-tab>
</ion-tabs>
Tab+Sidemenu
將tabs.html內容設定於ion-side-menu-content中<ion-nav-view>標籤前即可
Ionic架構
View Controller Data(Factories/Services)
Controller
藉由宣告angular.module(‘控制模組名稱’,[相依模組])
angular.module('starter.controllers', [])
.controller(‘個別頁面控制名稱', function($scope) {
進行資料宣告或函數定義
})
之後在app.js中加入控制項模組 angular.module('starter', ['ionic','starter.controllers'])
最後在首頁index.html加入 <script src=“js/controller.js”></script> 在<body>標籤加入 ng-controller=“個別頁面控制名稱”
AngularJS宣告
ng-model 藉由在標籤中設定ng-model屬性，可將該標籤與$scope中資料做繫結，如果在$scope中無該資料，則
會在$scope中產生
ng-click 在AngularJS中執行click動作
ng-change 在AngularJS中執行on change動作
ng-show 設定顯示或隱藏(值為布林值)
ng-hide 設定顯示或隱藏(值為布林值)
ng-repeat=“變數名稱 in scope變數” 設定重複，同時利用$index變數可得到對應資料索引值
Controller與文字欄位與ng-model
ionic start class5 blank
cd class5
ionic platform add android
在<ion-content>加入兩個文字方塊
<div class="list"> <label class="item item-input"> <input type="text" placeholder="第一個文字方塊" ng-model="text1"> </label> <label class="item item-input"> <input type="text" placeholder="重複第一個文字方塊" value="{{text1}}"> </label> </div>
Controller與核取方塊(可用於儲存設定)
<ion-list> <ion-checkbox checked="color.red" ng-model="color.red">紅</ion-checkbox> <ion-checkbox checked="color.yellow" ng-model="color.yellow">黃</ion-checkbox> <ion-checkbox checked="color.pink" ng-model="color.pink">粉紅</ion-checkbox> </ion-list> <p>紅:{{color.red}}, 黃:{{color.yellow}}, 粉紅:{{color.pink}}</p>
angular.module('starter.controllers', []).controller('homeCtrl',function($scope) {$scope.color={red:true,yellow:false,pink:false};})
Controller與切換按鈕(可用於儲存設定)
<ion-list> <ion-toggle checked="color.red" ng-model="color.red">紅</ion-toggle> <ion-toggle checked="color.yellow" ng-model="color.yellow">黃</ion-toggle> <ion-toggle checked="color.pink" ng-model="color.pink">粉紅</ion-toggle> </ion-list> <p>紅:{{color.red}}, 黃:{{color.yellow}}, 粉紅:{{color.pink}}</p>
angular.module('starter.controllers', []).controller('homeCtrl',function($scope) {$scope.color={red:true,yellow:false,pink:false};})
Controller與選項按鈕
設定ng-value時要注意兩個雙引號中單引號
<ion-list> <ion-radio ng-model="sex" ng-value="'男'">男</ion-radio> <ion-radio ng-model="sex" ng-value="'女'">女</ion-radio> </ion-list> <p>性別:{{sex}}</p>
Controller與下拉式方塊
<div class="list"> <label class="item item-input item-select"> <div class="input-label"> 校園美景 </div> <select ng-model="pics"> <option value="images/pic1.jpg">圖1</option> <option selected value="images/pic2.jpg">圖2</option> <option value="images/pic3.jpg">圖3</option> </select> </label> </div> <p>選擇圖片位置:{{pics}}</p>
Controller練習-$scope 陣列顯示(清單加上ng-repeat)
開啟空白project Ionic start class4 blank Cd class4 Ionic platform add android
在js目錄中加入controllers.js，並在controllers中加入右邊程式
在js/app.js中加入
angular.module('starter', ['ionic','starter.controllers'])
angular.module('starter.controllers', [])
.controller('homeCtrl',function($scope) {
$scope.data=[
{name:'甲',id:'1'},
{name:'乙',id:'2'},
{name:'丙',id:'3'}
];
})
Controller練習-$scope陣列顯示(清單加上ng-repeat)
在index.html <head>中最後加入 <script src="js/controllers.js"></script> 在<body>加入 <body ng-app="starter" ng-
controller="homeCtrl"> 在<ion-content>中加入 <ion-list><ion-item ng-repeat="person in
data">{{person.name}}</ion-item> </ion-list>
Controller練習-$scope陣列新增
