下實例中，通過切換不同開關 checked 顯示不同的值，true 為打開，false 為關閉。

HTML 代碼

<ion-header-bar class="bar-positive">
 <h1 class="title">開關切換</h1></ion-header-bar>
 <ion-content>
 <div class="list">
 <div class="item item-divider">
 Settings </div>
 <ion-toggle ng-repeat="item in settingsList"
 ng-model="item.checked"
 ng-checked="item.checked">
 {{ item.text }} </ion-toggle>
 <div class="item">
 <!-- 使用 pre 標簽展示效果更美觀 -->
 <div ng-bind="settingsList | json"></div>
 </div>
 <div class="item item-divider">
 Notifications </div>
 <ion-toggle ng-model="pushNotification.checked"
 ng-change="pushNotificationChange()">
 Push Notifications </ion-toggle>
 <div class="item">
 <!-- 使用 pre 標簽展示效果更美觀 -->
 <div ng-bind="pushNotification | json"></div>
 </div>
 <ion-toggle toggle-class="toggle-assertive"
 ng-model="emailNotification"
 ng-true-value="'Subscribed'"
 ng-false-value="'Unubscribed'">
 Newsletter </ion-toggle>
 <div class="item">
 <!-- 使用 pre 標簽展示效果更美觀 -->
 <div ng-bind="emailNotification | json"></div>
 </div>
 </div>
 </ion-content>

由于pre標簽沖突，實例中的 pre 已替換為 div標簽，具體可以在"嘗試一下"中查看。

JavaScript 代碼

angular.module('ionicApp', ['ionic']).controller('MainCtrl', function($scope) {
 $scope.settingsList=[
 { text: "Wireless", checked: true },
 { text: "GPS", checked: false },
 { text: "Bluetooth", checked: false }
 ];
 $scope.pushNotificationChange=function() {
 console.log('Push Notification Change', $scope.pushNotification.checked);
 };
 $scope.pushNotification={ checked: true };
 $scope.emailNotification='Subscribed';
 });

css 代碼：

body {
 cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;}

效果如下所示：

ionic 單選框操作

ionic 手勢事件

onic

ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。

ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。

ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。

ionic 特點

• 1.ionic 基于Angular語法，簡單易學。

• 2.ionic 是一個輕量級框架。

• 3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。

• 4.ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。

• 5.ionic 專注原生，讓你看不出混合應用和原生的區別

• 6.ionic 提供了強大的命令行工具。

• 7.ionic 性能優越，運行速度快。

學習前你需要了解？

學習前你需要了解以下基礎知識：

• HTML

• CSS

• Javascript

• Angular

著 HTML5 在 2014 年的推出，HTML 已經確定了它的地位。Ionic Framework 的開發者馬上就認識到，這是將 HTML5 用于原生和混合應用開發平臺的好時機。他們的口號是“構建一次，在任何地方運行”。

使用一個開源的 SDK，開發者可以為 iOS 和 Android（是的，還包括 Blackberry）創建 Ionic Framework app。而且，Kumulos Cordova SDK 現在已與 Ionic 框架集成，因此不應再為制作“劣質”的 app 找借口。

下面將介紹 5 個使用 Ionic 框架構建優秀 app 的技巧。

1、使用 Creator

為什么要讓事情變得更加困難？不想屈服于編寫臟代碼？你是否更像一個可視化開發者？那么，Ionic Creator 就是為你而生的。Ionic Creator 是一個拖放的界面工具，只需點擊幾下鼠標，便可將你的想法應用到 app。

通過 Creator，Ionic 為開發者提供了一個現成的組件庫，開發者可以盡情使用他們。app 設計完成后，可將它分享給同事以交流意見和建議。除此之外，還可以輕松導出你的 Creator 項目至原生 IPA 和 APK 文件，以直接安裝在設備上。

創作者還可以通過應用程序的想法，更容易地銷售您的客戶端 - 使用內置的功能，如“添加朋友”，讓客戶（或潛在的客戶端）檢查應用程序，同時仍在開發中提供其輸入。 更不用說比嘗試讓非技術人員使用Testflight更容易了。

Creator 還可以讓你在 app 中更容易向別人展示 app —— 使用內置的功能，如“添加好友”，即使 app 仍在開發期間，也可以讓客戶（或潛在的客戶）查看 app 并提供輸入功能。這比讓非技術人員使用 Testflight 更容易。

2、使用文檔

每個人都會和你說 RTFM(Read The Fucking Manual)。但是，在 Ionic 中卻從不會出現這種情況。為什么？因為Ionic 的文檔確實很好。事實上，你可以復制文檔中的部分代碼，并將其直接用于你的 app。為什么當有現成的代碼在你面前時，還要花時間為頭像編寫一個顯示列表？當然，你可能需要修改代碼，但這是快速開發的好方法。

3、自定義組件

Ionic 中的組件庫是一個真正節省時間的利器。然而，它也是一把雙刃劍 —— 因為 Ionic 組件是如此容易使用，每個人都可以使用它，這就使得你的 app 看起來會和其他人的是如此相似。但是可以通過引入一些自定義的 CSS 并調整一些 Ionic 預定義類以創建自己的樣式來避免此問題。

4、讓 Ionic 接手“控制權”

使用 Ionic 框架開發 app，最好的地方是你不需要每一件事都親自去做。

針對 iOS 和 Android（和 Blackberry），制作多種不同格式的啟動頁可能會十分痛苦。使用 Ionic，只需要設計合適的 app 圖標即可，有更多的重要的事需要去做。不用擔心，它的使用很簡單，通過使用 Ionic CLI，只需在平臺目錄中放置合適的文件即可（Ionic 可與 .png, Photoshop, 和 Illustrator 格式兼容），這樣就可以輕松為 iOS 和 Android 生成 app 圖標和啟動頁界面。

5、朝著原生的方向

將 app 無縫集成到操作系統中，是為用戶提供優秀體驗的最好辦法之一。通過使用 Platform Device Class，Ionic 變得更易執行此操作。iOS, Windows Phone, iPad, 和 Android 都有它們自己的特定類，以便在 app 運行時給予 Ionic app 原生的外觀和感覺。這些類可以在不同操作系統版本之間的 iOS 和 Android 上進一步細分。

這并不是全部

當然，上面提到的亮點并不是 Ionic 內置的所有優秀特性。正如開發者喜歡在文檔中說的，“使用 Ionic 的可能性是永無止境的”，但我希望至少能給大家提供幾個關于如何構建優秀的 Ionic Framework app 的想法。

譯自：https://dzone.com/