封装angularjs中的$http 

angularjs的模块化
1.模块依赖:父模块的一切东西，都会复制给子模块


首先写一个父模块
common.js
let mod = angular.module("myApp", []);
mod.config(function ($httpProvider) {

    $httpProvider.defaults.transformRequest = function (obj) {
        let arr = [];
        for (let name in obj) {
            arr.push(`${encodeURIComponent(name)}=${obj[encodeURIComponent(name)]}`);

        }
        return arr.join('&');

    };
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
});

 

 

我们只要在子模块中加上对父模块的依赖就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>封装$http</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="common.js"></script>
</head>
<body ng-app="myAppnew">

    <div ng-controller="main">
        <input type="text" ng-model="a" />
        <input type="text" ng-model="b" />
        <input type="button" value="计算" ng-click="calc()" />
    </div>


    <!--angularjs的模块化
    1.模块依赖:父模块的一切东西，都会复制给子模块-->
    <script type="text/javascript">
     
        let modc = angular.module('myAppnew', ['myApp']);
        modc.controller("main", ["$scope","$http",function ($scope,$http) {

            $scope.calc = function () {
                $http({
                    method: 'POST',
                    url: 'Handler1.ashx',
                    data: {
                        a: $scope.a,
                        b: $scope.b
                    }

                }).then((res) => {
                    alert(res.data);
                }, (err) => {
                    alert("失败了");
                });

            }

        }]);

    </script>

</body>
</html>

 

posted @ 2018-10-19 23:31  Z.ain  阅读(714)  评论(0)    收藏  举报