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')