前言
最近關于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給我們提供了很多好用的功能，比如路由的管理、數據的過濾的等。更強大的功能還需要進一步的探索，此文僅作為一個好的開端。
新聞熱點
疑難解答
