AngularJS Phonecat实例讲解
前言
最近关于AngularJS的资料也看了一些，其官网上有个实例Phonecat很不错，硬着头皮看了一会实在是看不下去，索性自己动手实现下，遇到问题时再从里面寻找答案也不失为一种好方法。说的再多、看的再多不如自己动手去做一遍，那就开始吧。
正文
1、布局
布局很简单，首页侧边栏是一个输入框和下拉框，右边是一个列表，实现时对首页不做大的修改。详情页做一些改变，尽量做一些简化，考虑加一个自定义指令（轮播图）。
2、架构分析
首先思考一下需要用到的服务。
由于我们要做的是一个单页应用，所以需要服务$route、$location。利用服务$resource获取资源。利用服务$filter对首页数据过滤以及排序。总结一下：
1）.服务$route、$location负责路由管理及跳转。
2）.服务$resource负责资源的获取。
3）.服务$filter负责数据的过滤及排序。
3、首页及详情页view视图
1、首页视图
<divclass="main">
<divclass="side">
<p>
<label>Search:</label>
<inputng-model="filterKey"type="text"style="width:150px;">
</p>
<p>
<label>Sortby:</label>
<selectng-model="sortKey">
<optionvalue="price">price</option>
<optionvalue="name"ng-selected="true">name</option>
</select>
</p>
</div>
<divclass="content">
<ul>
<ling-repeat="itemindata"ng-click="$location.path('detail/'+item.id)">
<imgng-src={{item.img}}>
<div>
<h2>名字：{{item.name}}</h2>
<p>性能：{{item.title}}</p>
<p>价格：{{item.price|currency}}</p>
</div>
</li>
</ul>
</div>
</div>
2、详情页视图
<slide></slide>是一个自定义指令，实现轮播图的功能
<divclass="detail">
<slidelinks='links'w='200'h='200'></slide>
<divclass="text">
<h2>设备：{{data.name}}</h2>
<p>性能：{{data.desc}}</p>
</div>
</div>
4、逻辑分析
1、首先说明下外部资源infor.json的信息。是一个数组，数组每一项为一个json对象，含有以下字段：
{
"id":1,
"name":"aaa",
"title":"bbb",
"desc":"ccc",
"img":"img/a.jpg",
"price":100,
"showList":"[{"url":"img/b.jpg"},{"url":"img/c.jpg"}]"
}
2、路由管理（$route）
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/index',{
templateUrl:'template/index.html',
controller:'index'
})
.when('/detail/:str',{
templateUrl:'template/detail.html',
controller:'detail'
})
.otherwise({
redirectTo:'/index'
});
}]);
当形如http://localhost/phonecat/phone.html#/index加载index模板
当形如http://localhost/phonecat/phone.html#/detail/0加载detail模板
默认为http://localhost/phonecat/phone.html#/index
3、首页（index）逻辑分析
首页资源加载:
vararr=[];
varobjRe=$resource('infor.json');
$scope.data=arr=objRe.query();//获得data数据后首页即可进行渲染
首页数据的过滤及排序:
$scope.$watch('filterKey',function(){//监听输入框的数据变化，完成数据的筛选
if($scope.filterKey){
$scope.data=$filter('filter')(arr,$scope.filterKey);
}else{
$scope.data=arr;
}
})
$scope.$watch('sortKey',function(){//监听select下拉框的数据变化，完成数据的排序
if($scope.sortKey){
$scope.data=$filter('orderBy')($scope.data,$scope.sortKey);
}else{
$scope.data=arr;
}
})
//这里有个需要注意的地方，我们用一个数组arr作为媒介，避免bug
点击列表进行详情页的跳转:
$scope.$location=$location;//将$location挂载到$scope下，模板中便可使用$location提供的方法
模板如下:
<ling-repeat="itemindata"ng-click="$location.path('detail/'+item.id)">--点击的时候将列表跳转到详情页
4、详情页（detail）逻辑分析
m1.controller('detail',['$scope','$resource','$location',function($scope,$resource,$location){
varid=parseInt($location.path().substring(8));//获取索引
$resource('infor.json').query(function(data){
$scope.data=data[id];
$scope.links=eval($scope.data.showList);//自定义指令需要用到此数据
});
}]);
//注意：$resource.query()为异步操作。数据相关的逻辑需要在回调中完成，否则可能会出现数据undefined的情况。
5、自定义指定slide的编写
AngularJS的自定义指定功能十分强大，为实现组件化开发提供了一种思路。下面简单地实现一个轮播组件。
用法示例:<slidelinks='links'w='200'h='200'></slide>
模板（slide.html）如下:
<divclass="slide">
<ul>
<ling-repeat="iteminlinks">
<imgng-src={{item.url}}>
</li>
</ul>
</div>
m1.directive('slide',function(){
return{
restrict:'E',
templateUrl:'template/slide.html',
replace:true,
scope:{
links:'=',
w:'@',
h:'@'
},
link:function(scope,element,attris){
setTimeout(function(){
varw=scope.links.length*scope.w;
varh=scope.h;
variNow=0;
$(element).css({'width':scope.w,'height':h,'position':'relative','overflow':'hidden'})
$(element).find('ul').css({'width':w,'height':h,'position':'absolute'});
setTimeout(function(){
$(element).find('li').css({'width':scope.w,'height':h,'float':'left'});
$(element).find('img').css({'width':scope.w,'height':h});
},0);
setInterval(function(){
iNow++;
$(element).find('ul').animate({'left':-iNow*scope.w},function(){
if(iNow==scope.links.length-1){
$(element).find('ul').css('left',0);
iNow=0;
}
});
},1000)
},50)
}
}
})
结语
AngularJS给我们提供了很多好用的功能，比如路由的管理、数据的过滤的等。更强大的功能还需要进一步的探索，此文仅作为一个好的开端。