Ionic

混合编程： 前端代码结合原生组件去编码生成的应用程序。


①WebView 缺点：无法像原生应用程序调用底层的信息
②phoneGap 是一个通过各种插件提供了js的API的平台，支持调用底层信息
③无论是WebView还是phoneGap实现的移动端的应用，都是实现一些功能，但是UI并没有移动端的处理




一、Ionic介绍


what？
一个强大的H5应用程序开发框架，使用前端技术，构建接近原生体验的移动应用程序。


基于ng和cordova，自己也有一套ui组件。


why？
移动应用程序开发，为了更好的类似原生应用的体验，不仅要能够调用底层的硬件，还要在ui上符合移动应用程序的效果。
ionic、jQueryMobile


特征：
①完美融合ng


②专注开发原生应用程序能够实现的功能，结合cordova来实现
③ui符合移动端的效果
④提高了强大的命令行操作
⑤性能优越，运行速度快




ionicframework.com
http://ionicons.com/


how??
①命令行
http://ionicframework.com/getting-started/
②压缩包




二、使用Ionic


将压缩包中的文件引入到工程中，创建html文件，通过link直接引入css文件，script引入ionic.bundle.js，创建并调用模块，通过指令编写应用程序。




Ionic 颜色：
light\stabel\positive\calm\balanced\energized\assertive\royal\dark


ion-gear-a
ion-ios-flower
ion-no-smoking
ion-person




1、button
button/button-stable/button-positive../button-outline/button-clear/button-large/button-small/icon-left/icon-right/ion-**/button-block/button-bar


2、list


list/item/item-icon-left/item-icon-right/badge/badge-assertive/list-inset(列表具有嵌入效果)/item-thumbnail-left/item-thumbnail-right/item-avator




3、card
card/item/item-divider




4、form
并不是直接调用form标签，而是通过list组织表单内容
list/item/item-input/item-stacked-label/item-floating-label/input-label




form radio：
<ion-list>
<ion-radio> 男</ion-radio>
<ion-radio>女</ion-radio>
</ion-list>


5、tabs标签页
tabs/tab-item/tabs-icon-only/left/top




6、grid
row/col/col-10/20/25../col-offset-10/20..
col-center/top/bottom






每日一练：
通过grid的row和col来实现一个类似相册的展示效果


分析：
①控制器中模拟一些数据：对象数组，对象包含图片路径、名称、价格
②通过row和col去展示数据
遍历数组，通过ngRepeat，遍历的是行，行要显示4列


③判断每4条数据去显示成一行
ng-if=$index%4 == 0


0/4/8...
0.1.2.3







webView phoneGap Ionic

webView是一个Android原生的组件（uiWebView -》iOS），混合编程的基本工作原理。
phoneGap是一个平台，webView是无法直接去调用底层的硬件接口，phoneGap是提供一些以plugin为基本单位的JSAPI，调用加速度传感器、设备信息、核心API。。

Ionic中基于js的扩展(指令和服务)来实现各种效果。


1、ion-header-bar ion-footer-bar ion-content


align-title='left/ritght/center'




2、ion-refresher 下拉刷新
ion-refresher作为ion-content的第一个元素


<ion-refresher pulling-text='下拉刷新' on-refresh='refresh()'>
</ion-refresher>


结束刷新动作：
$scope.$broadcast('scroll.refreshComplete');


3、ion-infinite-scroll 上拉加载更多
ion-infinite-scroll作为ion-content的最后一个元素


<ion-infinite-scroll on-infinite='loadMore()' immediate-check='false'>
</ion-infinite-scroll>


结束加载更多的动作
$scope.$broadcast('scroll.infiniteScrollComplete');




练习：实现一个普通的html，基于ionic的下拉刷新组件、上拉加载更多组件 实现上下拉刷新、加载更多的功能。


初始化一个数据，放置点整形数据，下拉push 上拉push数据。




4、$ionicScrollDelegate 处理和滚动的方法
方法：
scrollTop\scrollBottom\scrollTo\getScrollPosition()




5、ionTabs
<ion-tabs class='tabs-positive tabs-icon-left/right/only'></ion-tabs>


<ion-tab title='123'  ng-click='func1()' icon-on/off=''>




6、侧边栏菜单(面板、抽屉)


<ion-side-menus>
<ion-side-menu-content></ion-side-menu-content>
<ion-side-menu side='left/right' width=''></ion-side-menu>
</ion-side-menus>


方式1：扩展属性
menu-toggle='left/right'
menu-close


方式2：js的方式
$ionicSideMenuDelegate:
toggleLeft(true/false)
toggleRight(true/false)
isOpenLeft/right()




7、$ionicModal 自定义弹窗


$ionicModal.fromTemplate/fromTemplateUrl('url',{scope:$scope}).then(function(modall){})


ionicModal是一个实例，在这个实例：show()/hide()/remove()..




8、$ionicActionSheet 操作表


$ionicActionSheet.show({
buttons:
buttonClicked:
titleText:
destructiveText:
destructiveButtonClicked
cancelText:
cance:function
})


9、$ionicPopup
alert/prompt/confirm


10、$ionicLoading
用一个覆盖层表示当前处于活动状态，来阻止用户的交互动作
$ionicLoading.show()/hide()






11、UI-Router


UI-Router不是ng的官方的东西，确实在企业中用的比较多一个实现SPA的路由管理框架，是一个以状态为基本单位的状态机。


ngRoute：是ng官方提供的路由管理模块
①引入对应的文件，创建模块时，指定依赖于ngRoute模块
②指定容器 ngView
③创建代码片段
④路由词典
app.config(function($routeProvider){
$routeProvider.when().otherwise()
})
⑤直接修改地址栏、js($location.path('/路由'))、a href='#/路由'
⑥传参：明确发送和接收、配置接收方的路由、$routeParams


uiRouter：以状态为基本单位
①引入ionic-bundle.js、指定依赖于ionic模块
②指定容器
ui-view
③创建代码片段
④设置状态
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('',{})
$urlRouterProvider.otherwise('myPerson')
})
⑤直接修改地址栏、超链接（href='#/url'）、js（$state.go('状态名称')）、扩展属性ui-sref='home'






练习：uiRouter
login/register/main


login:
按钮（没有账号 ）==》注册 $state
按钮（登录）==》主页面 ui-sref


register:
按钮（注册完成，去登陆）==》login


main:
超链接(退出登录) ==> login









一、uiRouter的基本使用步骤


uiRouter：以状态为基本单位
①引入ionic-bundle.js、指定依赖于ionic模块
②指定容器
ui-view
③创建代码片段
④设置状态
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('',{})
$urlRouterProvider.otherwise('myPerson')
})
⑤直接修改地址栏、超链接（href='#/url'）、js（$state.go('状态名称')）、扩展属性ui-sref='home'
⑥参数传递


二、发送参数的基本步骤
uiRouter
明确发送和接收，置接收方的状态($stateParams)，发送参数


demo:
从登陆页跳转到主页面并传递一个参数：id 3
①明确发送方和接收方
发送：登录页面
接收方：主页面
②配置接收方的状态
main--> url:'/myMain/:id'
$stateParams.id
③发送参数
button ui-sref="main({id:2})">登录去主页面-uiSref</button>
<a href="#/myMain/4">跳转到主页面-href</a>
<button ng-click="jump('main',{id:3})">登录到mainjs</button>


$scope.jump = function (state,arg) {
          $state.go(state,arg);
        }


三、uiRouter中嵌套路由


嵌套路由：在指定的容器中，插入的代码片段（还可以指定uiView）


步骤：
①首先需要指定盛放代码片段的容器，如果加载到容器的代码片段A，需要加载其他的代码片段B、C到A中，就是一个嵌套


②对于B、C设置状态的时候，如果A状态为stateA，指定为stateA.stateB,stateA.stateC
(


$stateProvider
      .state('mail',{
        url:'/myMail',
        templateUrl:'tpl/mail.html'
      })
      .state('mail.inbox',{
        url:'/myInBox',
        templateUrl:'tpl/inbox.html'
      })
      .state('mail.outbox',{
        url:'/myOutBox',
        templateUrl:'tpl/outbox.html'
      })


)


③触发状态
指定状态
 <ion-list>
      <ion-item ui-sref="mail.inbox">收件箱</ion-item>
      <ion-item ui-sref="mail.outbox">发件箱</ion-item>

    </ion-list>