Exemple d'explication d'AngularJS Phonecat

Avant-propos

J'ai lu récemment des informations sur AngularJS. Il y a un exemple de Phonecat sur son site officiel qui est très bon, je ne pouvais tout simplement pas le supporter après l'avoir regardé pendant un moment, alors. J’ai décidé de le mettre en œuvre moi-même. Lorsqu’il s’agit de questions, c’est aussi un bon moyen de chercher des réponses à l’intérieur. Peu importe ce que vous dites ou voyez, il est préférable de le faire vous-même, alors commençons.

Texte

1. Mise en page

La mise en page est très simple. La barre latérale de la page d'accueil est une zone de saisie et une zone déroulante, et le côté droit est un. liste. La page d’accueil ne sera pas agrandie lors de la modification. Apportez quelques modifications à la page de détails, essayez de la simplifier et envisagez d'ajouter une commande personnalisée (image carrousel).

2. Analyse de l'architecture

Réfléchissez d'abord aux services que vous devez utiliser.
Puisque ce que nous allons faire est une application d'une seule page, nous devons servir $route et $location. Utilisez le service $resource pour obtenir des ressources. Utilisez le service $filter pour filtrer et trier les données de la page d'accueil. Pour résumer :

1). Les services $route et $location se chargent de la gestion du routage et des sauts.
2). Le service $resource est responsable de l'acquisition des ressources.
3). Le service $filter est responsable du filtrage et du tri des données.

3. Vue de la page d'accueil et de la page de détails

1. Vue de la page d'accueil

<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(&#39;detail/&#39;+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. Analyse logique

<slide></slide>是一个自定义指令，实现轮播图的功能
 
<div class="detail">
  <slide links=&#39;links&#39; w=&#39;200&#39; h=&#39;200&#39;></slide>
  <div class="text">
    <h2>设备：{{data.name}}</h2>
    <p>性能：{{data.desc}}</p>
  </div>
</div>

1. Tout d'abord, expliquez les informations de la ressource externe infor.json. C'est un tableau, chaque élément du tableau est un objet json, contenant les champs suivants :

2 Gestion de la route ($route)

{
    "id" : 1,
    "name" : "aaa",
    "title" : "bbb",
    "desc" : "ccc",
    "img" : "img/a.jpg",
    "price" : 100,
    "showList" : "[{"url":"img/b.jpg"},{"url":"img/c.jpg"}]"
}

Quand la forme est. http://localhost/phonecat/phone.html#/index charge le modèle d'index

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'
    });
 
}]);

Lorsque la forme est http://localhost/phonecat/phone.html#/detail/0 charge le modèle de détail

La valeur par défaut est http ://localhost/phonecat/phone.html#/index

3. Analyse logique de la page d'accueil (index)

Chargement des ressources de la page d'accueil :

Filtrage des données de la page d'accueil Et tri :

var arr = [];
var objRe = $resource('infor.json');  
$scope.data = arr = objRe.query(); //获得data数据后首页即可进行渲染

Cliquez sur la liste pour accéder à la page de détail :

  $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

Le modèle est le suivant :

$scope.$location = $location; //将$location挂载到$scope下，模板中便可使用$location提供的方法

4. Analyse logique de la page de détail (détail)

<li ng-repeat="item in data" ng-click="$location.path(&#39;detail/&#39;+item.id)">  --点击的时候将列表跳转到详情页

5. Écriture de diapositives spécifiées personnalisées

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的情况。

La fonction de spécification personnalisée d'AngularJS est très puissante et fournit un idée de développement basé sur les composants. Implémentons simplement un composant carrousel.

Exemple d'utilisation : c5d78ac0771abcd9072419e8fbde58f8813d8b7ad24b2efd298fbc1d2e96befb

Le modèle (slide.html) est le suivant :

Conclusion

<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 nous met à disposition de nombreuses fonctions utiles, comme la gestion du routage, le filtrage des données, etc. Des fonctions plus puissantes nécessitent une exploration plus approfondie, et cet article n'est qu'un bon début.

Pour plus d'exemples AngularJS Phonecat et d'articles connexes, veuillez faire attention au site Web PHP chinois !