最近接触了Angular框架，今天用里面的http请求方法做了一个小的案例，是一个查询地名获取附近美食的小案例。还不太完善，后面面有时间会继续添加新的内容。这个小案例没有用到任何的jQuery与原生js方法。
先上HTML结构代码与HTML结构中的angular指令。
<body ng-app="app">
<div ng-controller="con" id="con">
<h1>吃了么</h1>
<div id="nav">
<button ng-click="get()">获取地名</button>
<select ng-change="citis.alphbets" ng-model="alphbet" >
<option ng-repeat="item in citis.alphbets" value="{{item}}">{{item}}</option>
</select>
<select ng-model="cityId" ng-change="show()">
<option ng-repeat="item in citis.city[alphbet]" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
<div id="search">
<input type="text" ng-keyup="keyup()" ng-model="search">
<div>
<ul>
<li ng-repeat="item in position" >
<div ng-click="getday(item)" title="item">{{item.name}}</div>
</li>
</ul>
</div>
</div>
<div id="pa">
<div ng-repeat="item in commodit" class="commodit">
<h3>{{item.name}}</h3>
<p>{{item.phone}}</p>
<img ng-src="item.image_path|getImgUrl" >
</div>
</div>
</div>
</body>
这里面有些简单的Angular指令，就不多做介绍了，下面就是AngularJs的代码，一些介绍也都写在了代码注释里
<script>
//定义两个全局变量，用来接收需要全局传递的数据
var data1,geohash;
angular.module("app",[])
//添加一个自定义过滤器，用来过滤最后获取到的商品图片的src路径
.filter("getImgUrl",function(){
var r1=/^(.)(..)/;
var r2=/(jpeg|png|gif|jpg)$/;
return function(urlPart){
//拼接获取到的商家图片src路径
return ‘ https://fuss10.elemecdn.com/‘ + urlPart .replace(r1, ‘$1/$2/‘) .replace(r2, ‘$1.$1‘+‘imageMogr2/thumbnail/70x70/format/webp/quality/85‘);
}
})
.controller("con",["$scope","$http",function($scope,$http){
$scope.get=function(){
$http({
url:"http://jklib.org/ele/cities.ashx",
method:"get"
}).success(function(data){
//data是一个获取到的数据，把它添加到$scope对象中
$scope.citis={
alphbets:Object.keys(data),
city:data
}
//把数据映射到全局中
data1 = data;
})
};
//给页面添加一个show方法
$scope.show=function(){
var city;
cities=data1[$scope.alphbet];
for(var i=0;i<cities.length;i++){
if(cities[i].id==$scope.cityId){
city=cities[i];
break;
}
}
//地理哈希cdn，计算出哈希值，赋值给全局变量
geohash=geohashObj.encode(city.latitude, city.longitude);
};
//添加一个键盘事件，实时更新数据
$scope.keyup=function(){
//判断输入内容是否为空，如果为空直接返回
if(!$scope.search) return;
$http({
//地址拼接中需要加一个哈希值
url:‘http://jklib.org/ele/pois.ashx?geohash=‘ + geohash + ‘&keyword=‘ + $scope.search,
method:"get"
}).success(function(data){
//把传回来的数据添加到$scope中，方便使用
$scope.position=data;
})
}
$scope.getday=function(item){
$http({
url: ‘http://jklib.org/ele/restaurants.ashx?geohash=‘ + item.geohash + ‘&longitude=‘ + item.longitude + ‘&latitude=‘ + item.latitude,
method:"get"
}).success(function(data){
$scope.commodit=data;
})
}
}])
</script>
一个Angular实现的小案例，主要用来练手，里面主要方法还是跨域的相关知识，和这里也没有太多关系，就不多做介绍了，一些简单的指令加一部分angular js的代码就可以实现非常实用的小功能，后续还会继续添加新内容。
时间： 2024-10-08 10:14:23