AngularJS Phonecat實(shí)例講解
前言
最近關(guān)于AngularJS的資料也看了一些，其官網(wǎng)上有個(gè)實(shí)例Phonecat很不錯(cuò)，硬著頭皮看了一會實(shí)在是看不下去，索性自己動手實(shí)現(xiàn)下，遇到問題時(shí)再從里面尋找答案也不失為一種好方法。說的再多、看的再多不如自己動手去做一遍，那就開始吧。
正文
1、布局
布局很簡單，首頁側(cè)邊欄是一個(gè)輸入框和下拉框，右邊是一個(gè)列表，實(shí)現(xiàn)時(shí)對首頁不做大的修改。詳情頁做一些改變，盡量做一些簡化，考慮加一個(gè)自定義指令（輪播圖）。
2、架構(gòu)分析
首先思考一下需要用到的服務(wù)。
由于我們要做的是一個(gè)單頁應(yīng)用，所以需要服務(wù)$route、$location。利用服務(wù)$resource獲取資源。利用服務(wù)$filter對首頁數(shù)據(jù)過濾以及排序?？偨Y(jié)一下：
1）.服務(wù)$route、$location負(fù)責(zé)路由管理及跳轉(zhuǎn)。
2）.服務(wù)$resource負(fù)責(zé)資源的獲取。
3）.服務(wù)$filter負(fù)責(zé)數(shù)據(jù)的過濾及排序。
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>價(jià)格：{{item.price | currency}}</p>
</div>
</li>
</ul>
</div>
</div>
2、詳情頁視圖
<slide></slide>是一個(gè)自定義指令，實(shí)現(xiàn)輪播圖的功能
<div class="detail">
<slide links='links' w='200' h='200'></slide>
<div class="text">
<h2>設(shè)備：{{data.name}}</h2>
<p>性能：{{data.desc}}</p>
</div>
</div>
4、邏輯分析
1、首先說明下外部資源infor.json的信息。是一個(gè)數(shù)組，數(shù)組每一項(xiàng)為一個(gè)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'
});
}]);
當(dāng)形如http://localhost/phonecat/phone.html#/index加載index模板
當(dāng)形如http://localhost/phonecat/phone.html#/detail/0加載detail模板
默認(rèn)為http://localhost/phonecat/phone.html#/index
3、首頁（index）邏輯分析
首頁資源加載:
var arr = [];
var objRe = $resource('infor.json');
$scope.data = arr = objRe.query(); //獲得data數(shù)據(jù)后首頁即可進(jìn)行渲染
首頁數(shù)據(jù)的過濾及排序:
$scope.$watch('filterKey',function(){ //監(jiān)聽輸入框的數(shù)據(jù)變化，完成數(shù)據(jù)的篩選
if($scope.filterKey){
$scope.data = $filter('filter')(arr,$scope.filterKey);
}else{
$scope.data = arr;
}
})
$scope.$watch('sortKey',function(){ //監(jiān)聽select下拉框的數(shù)據(jù)變化，完成數(shù)據(jù)的排序
if($scope.sortKey){
$scope.data = $filter('orderBy')($scope.data,$scope.sortKey);
}else{
$scope.data = arr;
}
})
//這里有個(gè)需要注意的地方，我們用一個(gè)數(shù)組arr作為媒介，避免bug
點(diǎn)擊列表進(jìn)行詳情頁的跳轉(zhuǎn):
$scope.$location = $location; //將$location掛載到$scope下，模板中便可使用$location提供的方法
模板如下:
<li ng-repeat="item in data" ng-click="$location.path('detail/'+item.id)"> --點(diǎn)擊的時(shí)候?qū)⒘斜硖D(zhuǎn)到詳情頁
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); //自定義指令需要用到此數(shù)據(jù)
});
}]);
//注意：$resource.query()為異步操作。數(shù)據(jù)相關(guān)的邏輯需要在回調(diào)中完成，否則可能會出現(xiàn)數(shù)據(jù)undefined的情況。
5、自定義指定slide的編寫
AngularJS的自定義指定功能十分強(qiáng)大，為實(shí)現(xiàn)組件化開發(fā)提供了一種思路。下面簡單地實(shí)現(xiàn)一個(gè)輪播組件。
用法示例: <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)
}
}
})
結(jié)語
AngularJS給我們提供了很多好用的功能，比如路由的管理、數(shù)據(jù)的過濾的等。更強(qiáng)大的功能還需要進(jìn)一步的探索，此文僅作為一個(gè)好的開端。
相關(guān)文章
AngularJS學(xué)習(xí)第二篇 AngularJS依賴注入
這篇文章主要為大家詳細(xì)介紹了AngularJS學(xué)習(xí)第二篇，理解什么是AngularJS依賴注入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
基于AngularJs select綁定數(shù)字類型的問題
今天小編就為大家分享一篇基于AngularJs select綁定數(shù)字類型的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
深入解析Angular動態(tài)導(dǎo)入和懶加載實(shí)例
這篇文章主要為大家深入解析了Angular動態(tài)導(dǎo)入和懶加載實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
深入理解Angularjs中$http.post與$.post
本篇文章主要介紹了深入理解Angularjs中$http.post與$.post ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Angularjs實(shí)現(xiàn)多個(gè)頁面共享數(shù)據(jù)的方式
AngularJS使用自定義指令替代ng-repeat的方法
Angular5給組件本身的標(biāo)簽添加樣式class的方法