前端培训：Ionic指令式组件和服务式组件

ionic对AngularJS进行了扩展，将移动端开发中常见的UI组件抽象成AngularJS的指令与服务，便于我们在开发中快速构建移动App界面。ionic JavaScript是对AngularJS的扩展，其内置的JavaScript组件与AngularJS组件类似。按照使用方式可以将ionic JavaScript组件分为两大类：指令式组件和服务式组件。

ionic指令式组件

ionic JavaScript的指令式组件通常以元素、属性或CSS类的形式在HTML文件使用。

1.元素形式

以元素形式使用的指令都带有“ion-”前缀，例如使用ion-tabs指令实现一个功能完备的选项卡，示例代码如下。

<ion-tabs>
    <ion-tab titlew"本周热卖"="">...</ion-tab>
    <ion-tab title='“销量最高"'>...</ion-tab>
</ion-tabs>

ionic中以元素形式使用的指令覆盖了移动端大部分的开发需求，包含基本布局、视图路由、列表、表单输入、选项卡、侧边栏、幻灯片等。

2.属性形式

ionic中以属性形式使用的指令没有固定前缀，而是使用多个单词来描述组件功能，多个单词之间使用“-”符号连接，例如nav-direction(导航描述)。ionic的手势事件功能也是通过属性形式使用的，例如长按事件on-hold，可以采用<any on-hold=".….">…</any〉。

3.CSS类形式

目前官方以CSS类形式使用的指令只有1个，即hide-on-keyboard-open(键盘打开时隐藏元素)，使用方式是<any class="hide-on-keyboard-open">…</any>。

ionic服务式组件

ionic 的服务式组件通常带有$ionic 前级，例如sionicLoading。ionic 服务式组件本质上是AngularJS服务对象，可以在AngularJS代码中以依赖注入的方式被应用，用于直接创建页面视图组件或执行与页面视图组件交互的任务。

ionic服务式组件中包含如下几个常用的动态组件。

·模态对话框：sionicModal

·上拉菜单：SionicActionSheet

・弹出框：$ionicPopup

·浮动框：SionicPopover

·载人指示器：$ionicLoading

·背景幕：$ionicBackdrop

如果ionic服务组件名称带有后缀delegate，那么它的类型为代理类服务组件，例如sionicTabsDelegate。代理类服务组件在使用上与普通服务组件有所差别，这类组件通常含有SgetByHandle(delegateHandle)方法——该方法可以用来获取页面上对应指令式组件的操作对象，继而达到使用代码控制这些组件外观和行为的目的。