ionic-angularjs开发组件

一 、前言

由于个人水平有限，在这里只是分享一些基于angularjs开发组件的一些思路~ 

摘要：无UI组件类、有UI组件类、有UI组件类型2。

二 、无UI组件类
顾名思义，这类组件没有任何表现形式出现在用户界面上，只是一般功能的实现者，也就是平时所用到、所需要开发的 Factory。它一般由 controller 进行调用，用于处理并返回数据。重点是，Fatory 某些方法最好使用 $q(promise)，来分隔业务逻辑。

        Controller
         ↓       ↑
  data↓       ↑ promise
         ↓       ↑
          Factory  


app.factory('hi', ['$q', '$timeout', function($q, $timeout){
    function show(data) {
       var deferred = $q.defer();
       $timeout(function(){
          // ... 处理数据data
          defer.resolve(result)
       }, 16)
       return deferred.promise;
    }
    return {
      show: function(data) {
         return show(data)
      }
   }
}])


在控制器中使用
app.controller('Ctrl', ['hi', function(){
     $scope.test = function() {
        hi.show(data)
           .then(function(result){
                // ... 
            })
     }        
}])


三 、有UI组件类
该类组件的UI主要由 Factory 生成界面并插入到body中，类似于 Ionic的ActionSheet上拉菜单或者是弹窗。该类组件的需要注意的问题主要有：如何利用Angular的特性显示动态的数据、模板，如何更好地增强组件的复用性。因此，笔者的主要思路是：1 . 模板是稳定的而且单例的(生成的模板保存在 Factory 某属性中)。2 . 我们只需要用数据改变模板的内容( $compile，$rootScope.$new() )。3 . 复用性主要体现在每次调用 Factory 它的初始状态必须是唯一的( scope.$destroy/$rootScope.$new()或者其他一些reset操作 )。当然，使用 $q( promise )来执行回调依然是很好的选择

                Controller

        　      ↓       ↑

  options    ↓       ↑ promise

        　      ↓       ↑
                Factory  

// 在Factory变量保存单例模板: 
var a = angular.element(_html())

// 每当生成模板函数时
return a ?  a : angular.element( _html())

// 每次调用启动函数
function show(option){
  var scope = $rootScope.$new(); // 新增作用域用于管理视图中的数据
  scope.title = option.title; // 配置内容
  scope.showornot = option.show // 配置动态显示
  $compile(_html())(scope) // 绑定模板和作用域
}

// 每次关闭时
function close(data){
    deferred.resolve(data);
    scope.$destory(); // 销毁作用域
}

// 模板函数
function _html( ){
   return [
    "<div>",
        "<h3>{{ title }}</h3>", // 根据配置参数，动态显示不同内容
        "<div ng-if='showornot'></div>" // 根据配置，动态显示
    "</div>"
  ].join('')
}


四 、有UI组件类2
该类组件与上述的主要区别是UI模板是由指令的template参数所负责，功能实现者是自己开发的 Factory 工具，而 Controller 则是作用域的提供者，用于根据数据进行下一步的业务编写。于是此组件便拆分成3大部分。


                        directive
        　   ↓   ↑                    ↓↑
 调用      ↓   ↑ promise       ↓↑
        　   ↓   ↑ (data)         ↓↑ 指令scope的绑定策略
 Factory                           ↓↑
                           ↓↑
                  Controller -> 下一步处理