快捷導(dǎo)航

Angular的$http與$location

更新時(shí)間：2016年12月26日 15:30:45 作者：小謝53

這篇文章主要為大家詳細(xì)介紹了Angular的$http與$location，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

$http

但是對(duì)于一個(gè)web應(yīng)用，angular是如何同服務(wù)端進(jìn)行交互獲得數(shù)據(jù)的呢？

<script type="text/javascript">
  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$http',function($scope,$http){
    $http({
      method : 'GET',
      url : 'http/data.php',
    }).success(function(data,state,headers,config){
      console.log(data,state,headers(),config);
    }).error(function(data){
      console.log(data);
    });
  }]);
</script>

用過JQ的同學(xué)一看就知道了，我們重點(diǎn)看看success回調(diào)的參數(shù)。（別忘了我們需要controller上引入http的模塊）

data：後端返回給我們的數(shù)據(jù)。

state：http狀態(tài)碼

headers：http頭信息

config：ajax的配置信息

我們還可以更簡(jiǎn)單的來使用get和post。

//get
$http.get('http/data.php').success(function(data,state,headers,config){
  console.log(data);
}).error(function(data){
  console.log(data);
});

//post
$http.post('http/data.php',{
  name : 'xiecg',
  age : 18
}).success(function(data,state,headers,config){
  console.log(data);
}).error(function(data){
  console.log(data);
});

上面都很簡(jiǎn)單。

下面我們來看看如何用angular來實(shí)現(xiàn)跨域（百度搜索關(guān)鍵詞補(bǔ)全）。

 <div ng-controller="Aaa">
  <input type="text" ng-model="name" ng-keyup="change(name)">
  <input type="button" ng-click="change(name)" value="搜索">
  <ul>
    <li ng-repeat="d in data">{vvxyksv9kd}</li>
  </ul>
</div>

<script type="text/javascript">
  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
    var timer = null;
    $scope.data = [];
    $scope.change = function(name){
      $timeout.cancel(timer);
      timer = $timeout(function(){
        $http({
          method : 'JSONP',
          url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
        }).success(function(data,state,headers,config){
          console.log(data);
          $scope.data = data.s;
        }).error(function(data){
          console.log(data);
        });
      },500);
    };
  }]);
</script>

我們分別添加了兩個(gè)事件ng-keyup以及ng-click來傳入用戶需要搜索的關(guān)鍵詞，為了考慮性能我們使用定時(shí)器延遲500毫秒執(zhí)行change方法。

$location

<script type="text/javascript">

  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$location',function($scope,$location){
    var absUrl = $location.absUrl();  //URL地址
    
    //$location.path('aaa').replace();  //禁止歷史管理
    var path = $location.path();    //文件路徑，路由
    
    //$location.hash('hello');      //設(shè)置哈希值
    //$location.search({'age' : '19'});  //設(shè)置數(shù)據(jù)
    var hash = $location.hash();

    var url = $location.url();      //數(shù)據(jù)

    var host = $location.host();    //主機(jī)名

    var port = $location.port();    //端口號(hào)

    var protocol = $location.protocol();//協(xié)議

    console.log(protocol);

  }]);

</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: