开发手机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="