開發手機APP的神器 --- ionic
前 言javascript
在現在的生活中，手機已經與咱們的生活牢牢的聯繫在了一塊兒。而手機APP更是其中，重要的一環。今天，影子就爲你們介紹一種開發手機APP的超級神器---ionic。css
ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 能夠幫助您使用 Web 技術，好比 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。html
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。html5
ionic是一個輕量的手機UI庫，具備速度快，界面現代化、美觀等特色。爲了解決其餘一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1如下的版本支持，來獲取更好的使用體驗。java
| 一、 ionic 特色 |
- 1.ionic 基於Angular語法，簡單易學。
- 2.ionic 是一個輕量級框架。
- 3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
- 4.ionic 提供了漂亮的設計，經過 SASS 構建應用程序，它提供了不少 UI 組件來幫助開發者開發強大的應用。
- 5.ionic 專一原生，讓你看不出混合應用和原生的區別
- 6.ionic 提供了強大的命令行工具。
- 7.ionic 性能優越，運行速度快。
| 一、 學習ionic以前須要準備的基礎知識 |
- html5
- css
- js
- Angularjs
| 三、 ionic中的路由 |
當用戶在你的app中瀏覽時，ionic可以檢測到瀏覽歷史。經過檢測瀏覽歷史，實現向左或向右滑動時能夠正確轉換視圖。ios
採用AngularUI路由器模塊等應用程序接口能夠分爲不一樣的$state(狀態)。Angular的核心爲路由服務，URLs能夠用來控制視圖。web
AngularUI路由提供了一個更強大的狀態管理，即狀態能夠被命名，嵌套， 以及合併視圖，容許一個以上模板呈如今同一個頁面。json
此外，每一個狀態無需綁定到一個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>
注：
一、 給<script></script>標籤起一個id名，用於後面的路由配置；格式必須嚴格：
------- id="templates/tabs.html"；
二、將href屬性值寫爲路由格式： "#/tab/標記"；
三、<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： 路由的名字，表示tabs下的子視圖。這個路由定義了，這個路由的視圖是在‘home’或index「」這個tab的視圖裏面繪製的。
二、url：路由標記讀取；如：href="#/tab/home" ---- 取 /home;
注意：「/」: 表示主頁；
三、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…… 一、作底導航 二、添加跳轉 ①、給導航外加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="