AngularJs(十一)--服务-- $http/$location/$q服务

最新推荐文章于 2022-04-24 23:52:03 发布

tongwandouQX

最新推荐文章于 2022-04-24 23:52:03 发布

阅读量305

点赞数

分类专栏： angularjs 文章标签： $http服务 $location服务 angular.js内置服务 $q服务

本文链接：https://blog.csdn.net/qianxing111/article/details/79964080

版权

angularjs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

回顾

回顾之前学过的服务：
- $scope -$ watch
- $apply -$ rootScope
- $timeout -$ interval
- $filter

$http服务

与原生JS中的Ajax作用非常类似；
已经帮我们封装好了很多方法，特别类似jQuery中的ajax方法。

ngHttp.html:

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script >
            var m1 = angular.module('myApp',[]);
            m1.controller('Aaa',['$scope','$http',function($scope,$http){
                //$http的成功或失败时通过promise的方式来实现，与jQuery中的非常相似
                $http({
                    method: 'GET',//'JSONP','POST'...
                    url: 'data.php'
                }).success(function(data,state,headers,config){
                    console.log(data);//hello
                }).error(function(data){
                    console.log(data);//打印错误的页面内容
                });
            }]);
        </script>
    </head>
    <body>
        <div ng-controller= "Aaa"> </div>
    </body>
    </html>
</pre>

data.php

<pre>
    <?PHP
        echo 'hello';
    ?>
</pre>

运行结果如下图所示：
<img src="0.png"/ >
报错原因：
看文档 https://docs.angularjs.org/ap…$http ，新版本的angular中取消了success 和 error方法。现在采用promise的写法。
故改成：

<pre>
     $http({
            method: 'GET',
            url: 'data.php'
        }).then(function(data,state,headers,config){
            console.log(data);//hello
        },function(data){
            console.log(data);
        });
</pre>

再次运行，得到结果如下：
<img src="1.png"/>

method

请求方法：GET / POST /JSONP

success 与 error

请求成功或失败的回调函数。

success共有四个参数：
- data:数据
- state:请求结果的状态(200/…)
- headers
- config

$http.get()

$http.get() – get方式请求，其实是上述格式的一种简写方式。
$http.get('data.php') .then(function(data,state,headers,config){ console.log(state);//200 });
运行效果与$http()写法的运行效果相同。

百度搜索实例

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script >
            var m1 = angular.module('myApp',[]);
            m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
                $scope.data = [];
                var timer=null;

                $scope.change = function(name){
                    $timeout.cancel(timer);
                    //加入$timeout是为了避免在输入搜索关键词的时候，每输入一个字母会一直出发鼠标抬起事件从而
                    //导致发送http请求，这样会非常消耗性能；而是在输入停顿的时候发送http请求
                    timer = $timeout(function(){
                        $http({
                            method: 'JSONP',
                            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK'
                        }).then(function(data,state,headers,config){
                            console.log(data);
                            $scope.data= data.s;
                        },function(data){
                            console.log(data);
                        });
                    },500);
                };
            }]);
        </script>
    </head>
    <body>
    <div ng-controller= "Aaa">
        <input type="text" ng-model="name" ng-keyup="change(name)"/>
        <input type="button" name="submit" ng-click="change(name)" value="搜索">
        <ul>
            <li ng-repeat="d in data">{{d}}</li>
        </ul>
    </div>
    </body>
    </html>
</pre>

运行结果，如下所示：
<img src="2.png"/>

$location服务

$location服务实际上是对Javascript原生的loaction（网址信息）进行二次封装，优化出很多好用的方法。

absUrl()

获得网址信息的绝对地址（而且是编码好了的）

    <pre>
        <!DOCTYPE html>
        <html lang="en" ng-app="myApp">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="js/angular.min.js"></script>
            <script >
                var m1 = angular.module('myApp',[]);
                m1.controller('Aaa',['$scope','$location',function($scope,$location){
                    var a = $location.absUrl();
                    console.log(a);
                }]);
            </script>
        </head>
        <body>
        <div ng-controller= "Aaa">

        </div>
        </body>
        </html>
    </pre>

运行结果如下：
<img src="3.png"/>

path()

获取或设置路径。
这里的“路径”是angularJs特别设置的一种方式，有利于后期的路由操作。
- 获取路径
var p = $location.path(); console.log(p);
运行结果如下：
<img src="4.png"/>

设置路径

$location.path('aaa'); var p = $location.path(); console.log(p);
运行结果如下：
<img src="5.png"/>
打印结果,path即为”/aaa”；并且发现，在浏览器的地址栏中自动加入了”#/aaa”。
这样看来，这个路径是通过设置hash值来设置的。
再通过同样的操作，将path设置为“/aa/bb/cc”,此时浏览器可用过“后退”按钮回到之前的“/aaa”路径，即有了历史管理。

所以，这个路径的好处是有历史管理“前进”“后退”，再配合路由就可实现但页面的跳转操作。

replace()

代表不会出现历史管理和路由方式的路径，此方法一般用不上。

$location.path('aaa').replace(); var p = $location.path(); console.log(p);
再次如上文所述一样操作，此时点击“后退”按钮，并不能回到之前的“/aaa”路径，如下图所示：
<img src="1.png" />

hash()

可设置，可获取

$location.path('aaa/bbb/ccc').replace();
$location.hash('hello');
 var p = $location.hash();
  console.log(p);//此时打印出"hello"

运行结果如下图所示：
<img src="2.png"/>

从图中可以发现，浏览器地址栏中的url变成：
“localhost/angular/nglocation.html#/aaa/bbb/ccc#hello”
path值和hash值都存在。

search()

$location.path('aaa/bbb/ccc').replace();
$location.hash('hello');
$location.search({'age':'20'});
 var p = $location.hash();
  console.log(p);

运行结果如下图所示：
<img src="3.png"/>

从图中可以发现，浏览器地址栏中的url变成：
“localhost/angular/nglocation.html#/aaa/bbb/ccc?age=20#hello” 。
path值、search值和hash值都存在。

总结：
search和hash与传统网址是类似的，而path(路径)可以算作是angularJS独有的方式，可做路由的操作。

url()

可得到网址信息，但是得到的并不是绝对地址。

$location.path('aaa/bbb/ccc').replace();
$location.hash('hello');
$location.search({'age':'20'});
 var p = $location.url();
  console.log(p);//打印出"/aaa/bbb/ccc?age=20#hello"

host()、port()、protocol()

$location.host();//localhost$ location.port();//80
$location.protocol();//http

$q服务

是promise的一种事项方式。
类似于jQuery中的defer–延迟对象

defer()
创建一个延迟对象；
resolve()
成功时触发的方法；
reject()
失败时触发的方法；
notify()
实时进行通知处理
then()
提供的一种监听成功或失败的回调方法

说明：$q并没有实现jQuery中的defer对象的全部功能，只实现了其中的常用部分功能。

   <pre>
       <!DOCTYPE html>
       <html lang="en" ng-app="myApp">
       <head>
           <meta charset="UTF-8">
           <title>Title</title>
           <style>
               #parent div{width:300px;height: 300px;border:1px #000 solid;margin:20px;}
               #parent ul{width:200px;position:fixed;top:0;right:0;}
           </style>
           <script src="js/angular.min.js"></script>
           <script >
               var m1 = angular.module('myApp',[]);
               m1.controller('Aaa',['$scope','$q',function($scope,$q){
                  var dfd = $q.defer();//该方法返回一个延迟对象

                   function show(){
                       setTimeout(function(){
                           dfd.resolve();
                       },2000);
                       return dfd.promise;//返回promise对象
                   }
                   show().then(function(){
                       alert("成功");
                   },function(){
                       alert("失败");
                   });
               }]);
           </script>
       </head>
       <body>
       <div id="parent" ng-controller= "Aaa">

       </div>
       </body>
       </html>
   </pre>

运行代码，发现2秒之后页面会弹出以下对话框，如下图所示：
<img src="1.png">

tongwandouQX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs(十一)--服务-- $http/$location/$q服务

回顾回顾之前学过的服务： - scope−scope - watch - apply−apply - rootScope - timeout−timeout - interval - $filter$http服务与原生JS中的Ajax作用非常类似；已经帮我们封装好了很多方法，特别类似jQuery中的ajax方法。ngHttp.html:&amp;lt;pre&amp;gt; &amp;lt;!
复制链接

扫一扫