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

回顧

回顧之前學過的服務：
- $s c o p e -$ watch
- $a p p l y -$ rootScope
- $t i m e o u t -$ 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>

運行結果如下圖所示：
>
報錯原因：
看文檔 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>

再次運行，得到結果如下：

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>

運行結果，如下所示：

$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>

運行結果如下：

path()

獲取或設置路徑。
這裏的“路徑”是angularJs特別設置的一種方式，有利於後期的路由操作。
- 獲取路徑
var p = $location.path(); console.log(p);
運行結果如下：

設置路徑

$location.path('aaa'); var p = $location.path(); console.log(p);
運行結果如下：

打印結果,path即爲”/aaa”；並且發現，在瀏覽器的地址欄中自動加入了”#/aaa”。
這樣看來，這個路徑是通過設置hash值來設置的。
再通過同樣的操作，將path設置爲“/aa/bb/cc”,此時瀏覽器可用過“後退”按鈕回到之前的“/aaa”路徑，即有了歷史管理。

所以，這個路徑的好處是有歷史管理“前進”“後退”，再配合路由就可實現但頁面的跳轉操作。

replace()

代表不會出現歷史管理和路由方式的路徑，此方法一般用不上。

$location.path('aaa').replace(); var p = $location.path(); console.log(p);
再次如上文所述一樣操作，此時點擊“後退”按鈕，並不能回到之前的“/aaa”路徑，如下圖所示：

hash()

可設置，可獲取

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

運行結果如下圖所示：

從圖中可以發現，瀏覽器地址欄中的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);

運行結果如下圖所示：

從圖中可以發現，瀏覽器地址欄中的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()

$l o c a t i o n . h o s t (); / / l o c a l h o s t$ 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秒之後頁面會彈出以下對話框，如下圖所示：

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

回顧

$http服務

method

success 與 error

$http.get()

百度搜索實例

$location服務

absUrl()

path()

replace()

hash()

search()

url()

host()、port()、protocol()

$q服務

http header中的Content-disposition

Goole Tag Manager 介紹

AngularJs(八)--指令（四）---自定義指令（一）

AngularJs(六) --指令（二）-- 樣式相關指令及DOM操作相關指令

HTTP中的content-type的幾種取值分析

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結