Erklärung des AngularJS Phonecat-Beispiels

Vorwort

Ich habe kürzlich einige Informationen über AngularJS auf der offiziellen Website gelesen, die ich nach einer Weile einfach nicht ertragen konnte Ich habe beschlossen, es selbst umzusetzen. Wenn es um Fragen geht, ist es auch eine gute Möglichkeit, im Inneren nach Antworten zu suchen. Egal wie viel Sie sagen oder sehen, es ist besser, es selbst zu tun, also fangen wir an.

Text

1. Layout

Die Seitenleiste der Homepage ist ein Eingabefeld und ein Dropdown-Feld, und die rechte Seite ist ein Die Homepage wird bei der Umsetzung nicht erweitert. Nehmen Sie einige Änderungen an der Detailseite vor, versuchen Sie sie zu vereinfachen und erwägen Sie das Hinzufügen eines benutzerdefinierten Befehls (Karussellbild).

2. Architekturanalyse

Überlegen Sie sich zunächst, welche Dienste Sie nutzen müssen.
Da es sich bei uns um eine einseitige Anwendung handelt, müssen wir $route und $location bereitstellen. Verwenden Sie den Dienst $resource, um Ressourcen abzurufen. Verwenden Sie den Dienst $filter, um die Homepage-Daten zu filtern und zu sortieren. Zusammenfassend:

1). Die Dienste $route und $location sind für die Routingverwaltung und Sprünge zuständig.
2). Der Dienst $resource ist für die Ressourcenbeschaffung verantwortlich.
3). Der Dienst $filter ist für das Filtern und Sortieren von Daten verantwortlich.

3. Startseite und Detailseitenansicht

1. Detailseitenansicht

<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>

4. Logikanalyse

<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. Erklären Sie zunächst die Informationen der externen Ressource infor.json. Es ist ein Array, jedes Element des Arrays ist ein JSON-Objekt, das die folgenden Felder enthält:

2. Routenverwaltung ($route)

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

Wenn die Form ist http://localhost/phonecat/phone.html#/index lädt die Indexvorlage

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

Wenn die Form http://localhost/phonecat/phone.html#/detail/0 ist, lädt die Detailvorlage

Der Standardwert ist http://localhost/phonecat/phone.html#/index

3. Logische Analyse der Startseite (Index)

Laden der Startseitenressourcen:

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

Filtern und Sortieren von Homepage-Daten:

  $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

Klicken Sie auf die Liste, um Zur Detailseite springen:

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

Die Vorlage sieht wie folgt aus:

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

4. Logische Analyse der Detailseite

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. Die benutzerdefinierte Funktion von AngularJS ist sehr leistungsstark und bietet eine Lösung für die komponentenbasierte Entwicklung. Eine Denkweise. Lassen Sie uns einfach eine Karussellkomponente implementieren.

Verwendungsbeispiel:

Die Vorlage (slide.html) lautet wie folgt :

<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)
 
    }
  } 
})

Fazit

AngularJS stellt uns viele nützliche Funktionen zur Verfügung, wie zum Beispiel Routing-Management , Datenfilterung usw. Leistungsstärkere Funktionen erfordern weitere Untersuchungen, und dieser Artikel ist nur ein guter Anfang.