前 言
在如今的生活中，手機已經與我們的生活緊緊的聯系在了一起。而手機APP更是其中，重要的一環。今天，影子就為大家介紹一種開發手機APP的超級神器---ionic。
ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。
| 1、 ionic 特點 |
- 1.ionic 基於Angular語法，簡單易學。
- 2.ionic 是一個輕量級框架。
- 3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
- 4.ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
- 5.ionic 專注原生，讓你看不出混合應用和原生的區別
- 6.ionic 提供了強大的命令行工具。
- 7.ionic 性能優越，運行速度快。
| 1、 學習ionic之前需要准備的基礎知識 |
- html5
- css
- js
- Angularjs
| 3、 ionic中的路由 |
當用戶在你的app中瀏覽時，ionic能夠檢測到瀏覽歷史。通過檢測瀏覽歷史，實現向左或向右滑動時可以正確轉換視圖。
采用AngularUI路由器模塊等應用程序接口可以分為不同的$state(狀態)。Angular的核心為路由服務，URLs可以用來控制視圖。
AngularUI路由提供了一個更強大的狀態管理，即狀態可以被命名，嵌套， 以及合並視圖，允許一個以上模板呈現在同一個頁面。
此外，每個狀態無需綁定到一個URL，並且數據可以更靈活地推送到每個狀態。
簡單點來說，就是一個窗口就是一個$state(狀態)；
3.1每個 $state之間的關系
3.2實例講解
首先，頁面的跳轉可分為，同文件跳轉和外部文件引入；
同文件跳轉：
沒一頁的代碼都寫在一個<script></script?標簽中
外部文件引入：
將不同頁面的代碼寫在一個獨立的html文件中；
<script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios-world" href="#/tab/contact><!--"ui-sref="tabs.contact"--> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script>
注：
1、 給<script></script>標簽起一個id名，用於后面的路由配置；格式必須嚴格：
------- id="templates/tabs.html"；
2、將href屬性值寫為路由格式： "#/tab/標記"；
3、<ion-view > </ion-view>標簽用於顯示頁面內容。相當於AngularJS中的<ng-view></ng-view>
<script id="templates/home.html" type="text/ng-template"> <ion-view view-title="Home"> </ion-view> </script>
注：
同樣的，id用於路由配置，、<ion-view > </ion-view>標簽用於顯示頁面內容。
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});
});
注：
在module中，必須注入ionic文件，在ionic中，ionic文件時最基礎的依賴文件，所有的代碼實現，都是建立在此基礎之上的；
.state參數：
1、參數1： 路由的名字，表示tabs下的子視圖。這個路由定義了，這個路由的視圖是在‘home’或index“”這個tab的視圖里面繪制的。
2、url：路由標記讀取；如：href="#/tab/home" ---- 取 /home;
注意：“/”: 表示主頁；
3、templateUrl：設置，當前頁面的繪制代碼位置；
注意：
上面的第一個.state是設置主頁；其中templateUrl：設置的是頁面刷新時，顯示的頁面。
上述三點中的名稱必須相互對應，否則會出錯；
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>share</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link rel="stylesheet" type="text/css" href="css/ionic.min.css"/> <!-- tabs ↙ ↘ tab tab ↓ ↓ view…… view…… 1、做底導航 2、添加跳轉 ①、給導航外加script標簽 ②、給相應頁面寫代碼，script標簽內 ③、給相對應頁面添加state 3. 將href改寫為路由格式。 -- "#/tab/標記" 4. 在config配置階段，注入$routeProvider，進行路由配置： --> </head> <body ng-app="app" ng-controller="ctrl"> <!--自動將view-title的值，設為標題--> <ion-nav-bar class="bar-positive"> <!--返回按鈕，默認在子頁時顯示--> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <!-- 不能省略，tabs顯示區域 默認范圍為滿屏 --> <ion-nav-view ></ion-nav-view> <!--底部--> <!--沒有寫home頁之前，不要寫↓，在寫了home也之后，再寫↓。並且，寫一個也，要相對應的寫state--> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <!--將href改寫為路由格式。 -- "#/tab/標記"--> <!--子視圖顯示區域--> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios-world" href="#/tab/contact><!--"ui-sref="tabs.contact"--> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script> <!--home頁--> <!-- 跳轉方式： ①、同一文件跳轉，將代碼寫在script標簽中，並以 id="templates/home.html"形式起id名，用作跳轉路徑 ②、不同文件跳轉，代碼寫在<ion-view title="Contact"></ion-view>標簽中 --> <script id="templates/home.html" type="text/ng-template"> <ion-view view-title=