尝试一下调用百度的搜索功能,这部分主要是练习$http。
首先HTML部分:
<div ng-app="myApp" ng-controller="Aaa"">
<input type="text" ng-model="name" ng-keyup="change(name)" placeholder="请输入搜索内容">//内容的搜索框
<input type="button" ng-click="change(name)" value="搜索"> // 搜索按钮
<ul>
<li ng-repeat="da in data">{{ da }}</li> //搜索到的内容
</ul>
</div>
HTML布局完成,现在设置一下样式
CSS:
<style>
li{
width: 600px;
height: 30px;
list-style: none;
background: #b6b6b6;
color:purple;
margin-top: 20px;
}
</style>
接下来是js代码部分:
<script src="js/angular.min.js"></script> //先引包
<script>
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‘
// 百度用的jQ的方式,在angular中要改成JSON_CALLBACK才能收到回调信息。
}).success(function(data){
console.log(data);
$scope.data = data.s;
});
},400);
};
}]);
</script>
//这样一个简单的仿百度的搜索功能就实现了,如果出现问题就放在服务器下运行。