Microsoft PowerPoint - AngularJS-1 [唯讀]

Size: px

Start display at page:

Download "Microsoft PowerPoint - AngularJS-1 [唯讀]"

钲四管
5 years ago
Views:

1 Ionic & AngularJS 副標題

2 AngularJS 架構模組為一容器來包含下列物件 <html ng-app= 模組名稱 > 用於篩選資料當應用程式具多頁面則需藉由組態設定頁面路由 (Routes) 資訊作為 HTML 標籤屬性用於擴充標籤功能

3 頁面切換 -.config AngularJS 藉由頁面注入 (injection) 來進行頁面切換多頁設計必須在首頁頁面置入 <ion-navview></ion-nav-view> 來宣告頁面物件後之後個別設計頁面利用 <ion-view><ioncontent></ion-content></ion-view> 空白 project 多頁架構 ( 單頁單 view) 多頁架構 ( 單頁多 view) 側邊選項 (sidemenu) Tabs

4 空白 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

5 空白 Project-2 $stateprovider.state( 狀態名稱, { url: 連結名稱, templateurl: 檔案位置 }) AngularJS 進行頁面切換可利用狀態名稱或連結名稱使用者可利用 $state.go 命令在 controllers 中進行頁面切換, 或是在連結標籤 <a> 將 hrref= # 連結名稱即可進行換頁

6 空白 Project-3 設定個別頁面建立 www/templates 目錄加入 home.html 加入 page2.html

7 加入 sidemenu( 多頁面 ) <ion-side-menus> <ion-side-menu-content></ion-side-menucotent> <ion-side-menu></ion-side-menu> </ion-side-menus> Sidemenu 標籤包含兩個部分 : <ion-side-menucontent> 用於定義主頁面 <ion-side-menu> 用於定義側邊選單所以點選側邊選單時, 必須指定顯示頁頁為主頁面

8 加入 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 ionnavicon" 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>

9 加入 sidemenu( 多頁面 )-3 修改 app.js

10 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 iconoff= 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>

11 Tab+Sidemenu 將 tabs.html 內容設定於 ion-side-menucontent 中 <ion-nav-view> 標籤前即可

12 Ionic 架構 View Controller Data (Factories/Services)

13 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= 個別頁面控制名稱

14 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 變數可得到對應資料索引值

15 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=" 第一個文字方塊 " ngmodel="text1"> </label> <label class="item item-input"> <input type="text" placeholder=" 重複第一個文字方塊 " value="{{text1}}"> </label> </div>

16 Controller 與核取方塊 ( 可用於儲存設定 ) <ion-list> <ion-checkbox checked="color.red" ng-model="color.red"> 紅 </ioncheckbox> <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}; })

17 Controller 與切換按鈕 ( 可用於儲存設定 ) <ion-list> <ion-toggle checked="color.red" ngmodel="color.red"> 紅 </ion-toggle> <ion-toggle checked="color.yellow" ngmodel="color.yellow"> 黃 </ion-toggle> <ion-toggle checked="color.pink" ngmodel="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}; })

18 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>

19 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>

20 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.controllers', []).controller('homectrl',function($scope) { $scope.data=[ {name:' 甲 ',id:'1'}, {name:' 乙 ',id:'2'}, {name:' 丙 ',id:'3'} ]; }) angular.module('starter', ['ionic','starter.controllers'])

21 Controller 練習 -$scope 陣列顯示 ( 清單加上 ng-repeat) 在 index.html <head> 中最後加入 <script src="js/controllers.js"></script> 在 <body> 加入 <body ng-app="starter" ngcontroller="homectrl"> 在 <ion-content> 中加入 <ion-list><ion-item ng-repeat="person in data">{{person.name}}</ion-item> </ion-list>

22 Controller 練習 -$scope 陣列新增

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05