欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS Phonecat實(shí)例講解

 更新時(shí)間:2016年11月21日 09:29:01   作者:當(dāng)時(shí)惘然  
這篇文章主要為大家詳細(xì)介紹了AngularJS Phonecat實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

前言

最近關(guān)于AngularJS的資料也看了一些,其官網(wǎng)上有個(gè)實(shí)例Phonecat很不錯(cuò),硬著頭皮看了一會(huì)實(shí)在是看不下去,索性自己動(dòng)手實(shí)現(xiàn)下,遇到問(wèn)題時(shí)再?gòu)睦锩鎸ふ掖鸢敢膊皇橐环N好方法。說(shuō)的再多、看的再多不如自己動(dòng)手去做一遍,那就開(kāi)始吧。

正文

1、布局

布局很簡(jiǎn)單,首頁(yè)側(cè)邊欄是一個(gè)輸入框和下拉框,右邊是一個(gè)列表,實(shí)現(xiàn)時(shí)對(duì)首頁(yè)不做大的修改。詳情頁(yè)做一些改變,盡量做一些簡(jiǎn)化,考慮加一個(gè)自定義指令(輪播圖)。

2、架構(gòu)分析

首先思考一下需要用到的服務(wù)。
由于我們要做的是一個(gè)單頁(yè)應(yīng)用,所以需要服務(wù)$route、$location。利用服務(wù)$resource獲取資源。利用服務(wù)$filter對(duì)首頁(yè)數(shù)據(jù)過(guò)濾以及排序。總結(jié)一下:

1).服務(wù)$route、$location負(fù)責(zé)路由管理及跳轉(zhuǎn)。
2).服務(wù)$resource負(fù)責(zé)資源的獲取。
3).服務(wù)$filter負(fù)責(zé)數(shù)據(jù)的過(guò)濾及排序。

3、首頁(yè)及詳情頁(yè)view視圖

1、首頁(yè)視圖

<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、詳情頁(yè)視圖

<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、首先說(shuō)明下外部資源infor.json的信息。是一個(gè)數(shù)組,數(shù)組每一項(xiàng)為一個(gè)json對(duì)象,含有以下字段:

{
    "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、首頁(yè)(index)邏輯分析

首頁(yè)資源加載:

var arr = [];
var objRe = $resource('infor.json');  
$scope.data = arr = objRe.query(); //獲得data數(shù)據(jù)后首頁(yè)即可進(jìn)行渲染

首頁(yè)數(shù)據(jù)的過(guò)濾及排序:

  $scope.$watch('filterKey',function(){ //監(jiān)聽(tīng)輸入框的數(shù)據(jù)變化,完成數(shù)據(jù)的篩選
    if($scope.filterKey){
      $scope.data = $filter('filter')(arr,$scope.filterKey);
    }else{
      $scope.data = arr; 
    }  
  })

  $scope.$watch('sortKey',function(){  //監(jiān)聽(tīng)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)行詳情頁(yè)的跳轉(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)到詳情頁(yè)

4、詳情頁(yè)(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)中完成,否則可能會(huì)出現(xiàn)數(shù)據(jù)undefined的情況。

5、自定義指定slide的編寫(xiě)

AngularJS的自定義指定功能十分強(qiáng)大,為實(shí)現(xiàn)組件化開(kāi)發(fā)提供了一種思路。下面簡(jiǎn)單地實(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é)語(yǔ)

AngularJS給我們提供了很多好用的功能,比如路由的管理、數(shù)據(jù)的過(guò)濾的等。更強(qiáng)大的功能還需要進(jìn)一步的探索,此文僅作為一個(gè)好的開(kāi)端。

相關(guān)文章

  • 詳解使用路由延遲加載 Angular 模塊

    詳解使用路由延遲加載 Angular 模塊

    這篇文章主要介紹了詳解使用路由延遲加載 Angular 模塊,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式

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

    本文給大家介紹使用Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式,通過(guò)定義一個(gè)共享服務(wù)service來(lái)實(shí)現(xiàn)此功能,對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)
    2016-03-03
  • AngularJS使用自定義指令替代ng-repeat的方法

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

    這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能,又具有超高性能的自定義方法,有需要的小伙伴們可以參考借鑒,下面來(lái)一起看看吧。
    2016-09-09
  • Angular5給組件本身的標(biāo)簽添加樣式class的方法

    Angular5給組件本身的標(biāo)簽添加樣式class的方法

    本篇文章主要介紹了Angular 5 給組件本身的標(biāo)簽添加樣式class的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • 最新評(píng)論