AngularJS Phonecat实例讲解-tutorial js-php.cn

AngularJS Phonecat实例讲解

高洛峰

Lepaskan： 2016-12-06 13:09:31

asal

1085 orang telah melayarinya

前言

最近关于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(&#39;detail/&#39;+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>

Salin selepas log masuk

2、详情页视图

<slide></slide>是一个自定义指令，实现轮播图的功能
 
<div class="detail">
  <slide links=&#39;links&#39; w=&#39;200&#39; h=&#39;200&#39;></slide>
  <div class="text">
    <h2>设备：{{data.name}}</h2>
    <p>性能：{{data.desc}}</p>
  </div>
</div>

Salin selepas log masuk

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"}]"
}

Salin selepas log masuk

2、路由管理（$route）

m1.config([&#39;$routeProvider&#39;,function($routeProvider){
 
  $routeProvider
    .when(&#39;/index&#39;,{
      templateUrl : &#39;template/index.html&#39;,
      controller : &#39;index&#39;
    })
    .when(&#39;/detail/:str&#39;,{
      templateUrl : &#39;template/detail.html&#39;,
      controller : &#39;detail&#39; 
    })
    .otherwise({
      redirectTo : &#39;/index&#39;
    });
 
}]);

Salin selepas log masuk

当形如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(&#39;infor.json&#39;); 
$scope.data = arr = objRe.query(); //获得data数据后首页即可进行渲染

Salin selepas log masuk

首页数据的过滤及排序:

  $scope.$watch(&#39;filterKey&#39;,function(){ //监听输入框的数据变化，完成数据的筛选
    if($scope.filterKey){
      $scope.data = $filter(&#39;filter&#39;)(arr,$scope.filterKey);
    }else{
      $scope.data = arr;
    } 
  })
 
  $scope.$watch(&#39;sortKey&#39;,function(){  //监听select下拉框的数据变化，完成数据的排序
    if($scope.sortKey){
      $scope.data = $filter(&#39;orderBy&#39;)($scope.data,$scope.sortKey);
    }else{
      $scope.data = arr;
    }
  })
 
 
//这里有个需要注意的地方，我们用一个数组arr作为媒介，避免bug

Salin selepas log masuk

点击列表进行详情页的跳转:

$scope.$location = $location; //将$location挂载到$scope下，模板中便可使用$location提供的方法

Salin selepas log masuk

模板如下:

<li ng-repeat="item in data" ng-click="$location.path(&#39;detail/&#39;+item.id)">  --点击的时候将列表跳转到详情页

Salin selepas log masuk

4、详情页（detail）逻辑分析

m1.controller(&#39;detail&#39;,[&#39;$scope&#39;,&#39;$resource&#39;,&#39;$location&#39;,function($scope,$resource,$location){
  var id = parseInt($location.path().substring(8));  //获取索引
  $resource(&#39;infor.json&#39;).query(function(data){
    $scope.data = data[id];
    $scope.links = eval($scope.data.showList);  //自定义指令需要用到此数据
  });
 
}]);
 
//注意：$resource.query()为异步操作。数据相关的逻辑需要在回调中完成，否则可能会出现数据undefined的情况。

Salin selepas log masuk

5、自定义指定slide的编写

AngularJS的自定义指定功能十分强大，为实现组件化开发提供了一种思路。下面简单地实现一个轮播组件。

用法示例:

模板（slide.html）如下:

<div class="slide">
 <ul>
   <li ng-repeat="item in links">
     <img ng-src={{item.url}}>
   </li>
 </ul>
</div>

Salin selepas log masuk

m1.directive(&#39;slide&#39;,function(){
  return {
    restrict : &#39;E&#39;,
    templateUrl : &#39;template/slide.html&#39;,
    replace : true,
    scope : {
      links : &#39;=&#39;,
      w : &#39;@&#39;,
      h : &#39;@&#39;
    },
    link : function(scope,element,attris){
      setTimeout(function(){
        var w = scope.links.length * scope.w;
        var h = scope.h;
        var iNow = 0;
 
        $(element).css({&#39;width&#39;:scope.w,&#39;height&#39;:h,&#39;position&#39;:&#39;relative&#39;,&#39;overflow&#39;:&#39;hidden&#39;})
        $(element).find(&#39;ul&#39;).css({&#39;width&#39;:w,&#39;height&#39;:h,&#39;position&#39;:&#39;absolute&#39;});
        setTimeout(function(){
          $(element).find(&#39;li&#39;).css({&#39;width&#39;:scope.w,&#39;height&#39;:h,&#39;float&#39;:&#39;left&#39;});
          $(element).find(&#39;img&#39;).css({&#39;width&#39;:scope.w,&#39;height&#39;:h});      
        },0);
 
        setInterval(function(){
          iNow++;
          $(element).find(&#39;ul&#39;).animate({&#39;left&#39;:-iNow*scope.w},function(){
            if(iNow==scope.links.length-1){
              $(element).find(&#39;ul&#39;).css(&#39;left&#39;,0);
              iNow = 0; 
            } 
          });
        },1000)      
      },50)
 
    }
  } 
})

Salin selepas log masuk

结语

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