angularJS---service

　　service

　　　　ng的服务是这样定义的：

Angular services are singletons objects or functions that carry out specific tasks common to web apps.

　　　　它是一个单例对象或函数，对外提供特定的功能。

　　　　1.首先是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。

　　　　2.其次这与我们自己定义一个function然后在其他地方调用不同，因为服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

　　　　个人感觉service就像模块，把方法封装好，注入调用就行了。

　　首先先介绍一下ng内置的服务

　　　　ng内置的服务都是以$开头的。如$scope

　　　常用的内置服务：

　　　　　A.　$scope: $scope(作用域)是angular应用程序中视图（HTML）和控制器（JavaScript）之间的纽带。也就是说html和javascript可以通过它来传输、共享数据,跟别的服务不同，它只用在controller上。

　　　　　B.　$http: $http服务是封装了ajax方法的用于请求数据的一个服务

　　php代码：

(["name"]=="jjk" && ["age"]=='18' = "welcome to you" ["callback"]."({data: '".."'})"; } = "sorry!!!" ["callback"]."({data: '".."'})"; ?>

　　jsonp请求：

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body ng-app="app">
<div ng-controller="myCtrl">
<input ng-model="name">
<input ng-model="age">
<button ng-click="submitJsonp()">Jsonp</button>
<br>
<div ng-bind='data'></div>
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module('app',[])
.controller('myCtrl',function ($scope,$http) {
$scope.name = 'jjk';
$scope.age = 18;

        $scope.submitJsonp </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; () {
            $http({
                url: </span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;./php/jsonp.php</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,method: </span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;JSONP</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,params: {
                    name: $scope.name,age: $scope.age
                }
            }).then(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; (data) {
                console.log(data);
                $scope.data </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; data.data.data;
            })
        }
    })

</script>

</html>

　　在chrome中显示：

　　php代码：

(["name"]=="jjk" "1" "2"?>

　　get请求：

<body ng-app="app">
<div ng-controller="myCtrl">
<input ng-model="name">
<input ng-model="age">
<button ng-click="submitGet()">Jsonp</button>
<br>
<div ng-bind='data'></div>
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module('app',$http) {
$scope.name = 'jjk';
$scope.age = 18;

        $scope.submitGet </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; () {
            $http({
                url: </span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;./php/get.php</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,method: </span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;GET</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,age: $scope.age
                }
            }).then(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; (data) {
                console.log(data);
                $scope.data </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; data.data;
            })
        }
    })

</script>

</html>

　　在chrome中显示：

　　post请求在angular中就变的有点麻烦了。按照之前jquery的post请求方式




    
    
    
    jquery的post请求


    post

重点看红框的内容：application/x-www-form-urkencoded. 从客户端到服务器端数据传输编码标准就是application/x-www-form-urlencoded 这种数据的基本形式是采用"&"分割开的key/value例如: name1=value1&name2=value2&name3=value3&.....&nameN=valueN 跟get请求的参数是一样的，不同在于，get请求是放在url上，而post请求把数据放在请求头上。等一下，我们明明传递的是一个对象啊！data：{name:'jjk',password:'123456'}. 其实jquery内部（下面会提到）已经帮我们转换好了数据

　　　　咦？我明明是post请求啊！！！！怎么变成了get请求的格式了？

　　其实，这里有个小坑。pramas适用情况：get类型请求（注：jsonp也是get类型的请求）。所以他不适用post请求。要post请求请使用data

　　问题就出来了：angular发送的请求数据是json数据，后台直接使用$_POST是读取不到数据的。$POST方式只能接收Content-Type: application/x-www-form-urlencoded提交的数据。从这里可以看出来，jquery是比ng要有“灵性”啊，哎，搞不懂ag开发人员是什么想法。

　　解决的办法也有：1.从后台着手：想办法让后台读取json数据，再返回数据。

angularJS---service

service

何时使用$location

$location不会做

相关文章