AngularJS Phonecat執行個體講解_AngularJS

前言

最近關於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給我們提供了很多好用的功能，比如路由的管理、資料的過濾的等。更強大的功能還需要進一步的探索，此文僅作為一個好的開端。