AngularJS Phonecat实例讲解
前言
最近关于angularjs的资料也看了一些,其官网上有个实例phonecat很不错,硬着头皮看了一会实在是看不下去,索性自己动手实现下,遇到问题时再从里面寻找答案也不失为一种好方法。说的再多、看的再多不如自己动手去做一遍,那就开始吧。
正文
1、布局
布局很简单,首页侧边栏是一个输入框和下拉框,右边是一个列表,实现时对首页不做大的修改。详情页做一些改变,尽量做一些简化,考虑加一个自定义指令(轮播图)。
2、架构分析
首先思考一下需要用到的服务。
由于我们要做的是一个单页应用,所以需要服务$route、$location。利用服务$resource获取资源。利用服务$filter对首页数据过滤以及排序。总结一下:
1).服务$route、$location负责路由管理及跳转。
2).服务$resource负责资源的获取。
3).服务$filter负责数据的过滤及排序。
3、首页及详情页view视图
1、首页视图
<div class="main"> <div class="side"> <p> <label>search:</label> <input ng-model="filterkey" type="text" style="width:150px; "> </p> <p> <label>sort by:</label> <select ng-model="sortkey"> <option value="price">price</option> <option value="name" ng-selected="true">name</option> </select> </p> </div> <div class="content"> <ul> <li ng-repeat="item in data" ng-click="$location.path('detail/'+item.id)"> <img ng-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>是一个自定义指令,实现轮播图的功能 <div class="detail"> <slide links='links' w='200' h='200'></slide> <div class="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)逻辑分析
首页资源加载:
var arr = []; var objre = $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提供的方法
模板如下:
<li ng-repeat="item in data" ng-click="$location.path('detail/'+item.id)"> --点击的时候将列表跳转到详情页
4、详情页(detail)逻辑分析
m1.controller('detail',['$scope','$resource','$location',function($scope,$resource,$location){ var id = 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的自定义指定功能十分强大,为实现组件化开发提供了一种思路。下面简单地实现一个轮播组件。
用法示例: <slide links='links' w='200' h='200'></slide>
模板(slide.html)如下:
<div class="slide"> <ul> <li ng-repeat="item in links"> <img ng-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(){ var w = scope.links.length * scope.w; var h = scope.h; var inow = 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给我们提供了很多好用的功能,比如路由的管理、数据的过滤的等。更强大的功能还需要进一步的探索,此文仅作为一个好的开端。
上一篇: vue指令以及dom操作详解