自定义服务的拓展

2017-10-12 本文已影响0人小草莓蹦蹦跳

1. 自定义服务中可以绑定多个方法，并且还可以依赖其他方法（可以使用别的服务）
- 自定义服务时，如果需要导入其它服务，必须设置一个[ ]，然后将要导入的服务放置在[ ]

<body ng-app = "app" ng-controller = "wmxController">

<P>{{date}}</P>

<!--使用内置的服务-->
<!--<p>{{ date | date:'yyyy-MM-dd hh:mm:ss'}}</p>-->

<script src="angular.js"></script>

<script>
    var app = angular.module('app',[]);

    //注入服务
    app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {

        //获取现在的时间
        $scope.date = Date.now();

        //使用$filter服务（自定义过滤器）实现
        //$scope.date = $filter('date')($scope.date,"yyyy-MM-dd hh:mm:ss");

        //调用自定义服务中的方法并得到返回值
        $scope.date = wmxService.showTime($scope.date);

    }]);

//    自定义服务
    app.service('wmxService',['$filter',function ($filter) {
        //在自定义服务中定义的逻辑，格式化时间
        this.showTime = function (args) {
            return $filter('date')(args,'yyyy-MM-dd hh:mm:ss');
        }
    }])
</script>
</body>

2.通过 post方式 访问网络传递参数,通过自定义服务对传递的参数进行格式更换。(使用关键字service)。

<body ng-app = "app" ng-controller = "wmxController">
{{data}}
<script src="angular.js"></script>
<script>
    var app = angular.module('app',[]);

    //注入自定义服务
    app.controller('wmxController',['$scope','$http','wmxService',function ($scope,$http,wmxService) {

        //将需要传递的参数封装成一个对象(value值若不是数字，就要加引号)
        var myParams={
            flag:'wmx',
            name:'xxx'
        };

        $http({
            url:'05.php',
            method:'post',

            //忘记请求头将会报错
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },

            //希望 data:wmxService.newData(myParams)能够转化为data:flag=wmx&name:xxx
            data:wmxService.newData(myParams)

        }).success(function (res) {
            $scope.data = res;
        }).error(function (e) {

        })
    }]);

    //通过自定义服务对传递的参数进行格式更换
    app.service('wmxService',function () {

        this.newData = function (args) {
            var res = '';

            //遍历获取参数的内容
            for (var key in args){
                //拼接成想要的字符串
                res += key + '=' + args[key] + '&';
            }

            //删除最后一个&符号
            res = res.slice(0,-1);

            return res;
        }
    })
</script>
</body>

1. 通过 post方式 访问网络传递参数,通过自定义服务对传递的参数进行格式更换。(使用关键字factory)。

<body ng-app = "app" ng-controller = "wmxController">
{{data}}
<script src="angular.js"></script>
<script>
    var app = angular.module('app',[]);

    //注入自定义服务
    app.controller('wmxController',['$scope','$http','wmxService',function ($scope,$http,wmxService) {
        //将需要传递的参数封装成一个对象(value值若不是数字，就要加引号)
        var myParams={
            flag:'wmx',
            name:'xxx'
        };

        $http({
            url:'05.php',
            method:'post',
            //忘记请求头将会报错
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },

            //希望 data:wmxService.newData(myParams)能够转化为data:flag=wmx&name:xxx
            data:wmxService(myParams)

        }).success(function (res) {
            $scope.data = res;
        }).error(function (e) {

        })
    }]);

    //通过自定义服务对传递的参数进行格式更换
    app.factory('wmxService',function () {
       return function (args) {
           var res = "";
           for(var key in args){
               res += key + "=" + args[key] + '&';
           }
           res = res.slice(0,-1);
           return res;
       }
    })
</script>
</body>

自定义服务的拓展

猜你喜欢

热点阅读