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

Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式

AngularJS使用自定義指令替代ng-repeat的方法