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(&#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>

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>

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提供的方法

   

4、詳情頁（detail）邏輯分析

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

   

5、自定義組件的編寫自簡單化

7思路。下面簡單地實作一個輪播元件。

用法範例: 

模板（slide.html）如下:

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的情况。

 AngularJS提供了我們許多好用的功能，像是路由的管理、資料的過濾的等。更強大的功能還需要進一步的探索，此文僅作為一個好的開始。