2017-5-25 AngularJs

service 自定義服務

1.指令

  • 內置指令
  • 自定義指令
app.directive('xmg',function(){
        return {
                //指令類型
                restrict:'EA',
                //指令模版
                template:'',
                //是否替換原有指令
                replace:'true',
                //是否保留標簽內容
                transclude:'true'
        }
})

2.過濾器

  • 內置過濾器
  • 自定義過濾器
app.filter('filterName',function(){
        return function(input){

        }
})

3.服務

  • 內置服務
  • 自定義服務
  • angular 在一開始就幫我們定義一些功能,我們可以直接使用這些功能,都是一個方法或者一個對象的形式來調用指定的功能。想要使用這些服務,必須要注入。所謂 服務 是將一些通用性的功能邏輯進行封裝方便使用,angularJs 允許自定義服務
  • 自定義服務目的:把公用的功能,給封裝到一起,進行復用
  • 服務本質就是一個對象,或者以方法方式存在
  • 注意系統內置服務前加 $ ,自定義服務的不需要加
app.service('xmgService',function(){
        this.say=function(){
                console.log('hello');
        }
        this.showTime = function(){
                var curTime = new Date();
        }
})
app.service('xmgService',function($filter){
        this.say = function(){
                  console.log('hello');
        }
        this.showTime = function(){
                var curTime = new Date();
//var date = $filter('date');
//return date(curTime,'yyyy-MM-dd hh:mm:ss')
                return $filter('date')(curTime,'yyyy-MM-dd hh:mm:ss');
        }
})

factory 自定義服務

var app = angular.module('app',[]);
app.controller('skController',['$scope',function($scope){
        myFactory();
        myFactory2.myTime();
        myFactory2.say();
}])

app.factory('myFactory',function(){
        return function(){
                console.log('執行了myFactory')
        }
})

app.factory('myFactory2',function(){
          function showTime(){
                  console.log('執行了myFactory2');
          }
          function mySay(){
                  console.log('hello');
          }
          return {
                  myTime:showTime,
                  say:mySay
          }
})

服務的參數格式化

  • 將 json 格式 轉化成 formData 格式
原來 post 請求格式, 傳參使用不方便
$http({
        url:'post.php',
        method:'post',
        data:'name=sk&age=666'       
})
//考慮將 josn 對象參數格式轉化成 formData 形式
方式一
app.factory('formData',function(){
        return function(obj){
                var res ='';
                for(key in obj){
                        res += key + '=' +obj[key] + '&';
                }
                //最后一位多了一個&
                res = res.slice(0,-1);    
                return res;
        }
})
方式二
app.factory('formData2',function(){
         function formDataPost(obj){
                var res = '';
                for(key in obj){
                          res += key+ "=" +obj[key] +'&';
                  }
                res = res.slice(0,-1);
                return res;
          }
          return {
                  dataPost:formDataPost
          }
})
方法三自定義服務
app.service('formDataService',function(){
        this.form = function(obj){
                var res = '';
                for(key in obj){
                        res += key + '=' + obj[key] + '&'
                }
                res=res.slice(0,-1);
                return res;
        }
})
  • 使用函數
var param ={
        name:'sk',
        age:666
}
$http({
        url:'post.php',
        method:'post',
        //方式一
        data:formData(param)
        //方式二
        data:formData2.dataPost(param)
        //方式三
        data:formDataService.form(params)
})

value 自定義服務

  • value 表現形式上是一個服務
  • 本質上可看作是一個常量,到那時以服務的方式使用
app.controller('skController',["$scope","userName",function($scope,$userName){
          console.log(userName);
          $scope.name = 'aaa';
}])
app.value('userName','sk')
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,923評論 18 139
  • 通過AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小戀閱讀 1,782評論 1 21
  • AngularJSAngularJS 是一個 MV* 框架, 最適于開發客戶端的單頁面應用。它不是個功能庫,...
    一直以來都很好閱讀 910評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,287評論 25 708
  • 一 這是哪? 頭好脹啊。 我怎么會在這?這里好靜 。 這里的光好溫暖。怎么回事...
    權塵閱讀 118評論 0 0