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给我们提供了很多好用的功能，比如路由的管理、数据的过滤的等。更强大的功能还需要进一步的探索，此文仅作为一个好的开端。