AngularJS Phonecatの例の説明-jsチュートリアル-php.cn

AngularJS Phonecatの例の説明

高洛峰

リリース： 2016-12-06 13:09:31

オリジナル

1060 人が閲覧しました

前書き

私は最近 AngularJS についての情報を読みました。その公式 Web サイトに Phonecat というサンプルがあり、それをしばらく眺めた後、本当に我慢できなくなってしまいました。問題が発生したときにそれを見て、答えを探すのも良いでしょう。どれだけ言われても、見られても、自分でやったほうが良いので、始めてみましょう。

テキスト

1. レイアウト

ホームページのサイドバーは入力ボックスとドロップダウンボックスで、右側はリストです。実装。詳細ページにいくつかの変更を加え、簡素化を試み、カスタムコマンド (カルーセル画像) の追加を検討してください。

2. アーキテクチャ分析

まず、使用する必要があるサービスについて考えます。
これからやろうとしているのは単一ページのアプリケーションであるため、$route と $location を提供する必要があります。リソースを取得するにはサービス $resource を使用します。サービス $filter を使用して、ホームページデータをフィルタリングおよび並べ替えます。要約すると:

1) サービス $route と $location はルーティング管理とジャンプを担当します。
2). サービス $resource はリソースの取得を担当します。
3). サービス $filter は、データのフィルタリングと並べ替えを担当します。

3. ホームページと詳細ページのビュー

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(&#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. 論理分析

1. まず、外部リソース info.json の情報を説明します。これは配列であり、配列の各項目は次のフィールドを含む json オブジェクトです:

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

ログイン後にコピー

2. ルート管理 ($route)

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

ログイン後にコピー

形状が http://localhost/phonecat/phone.html# の場合/index インデックステンプレートを読み込みます

形状が http://localhost/phonecat/phone.html#/detail/0 の場合、詳細テンプレートを読み込みます

デフォルトは http://localhost/phonecat/phone.html#/インデックス

3. ホームページ (インデックス) 論理分析

ホームページのリソースの読み込み:

m1.config([&#39;$routeProvider&#39;,function($routeProvider){
 
  $routeProvider
    .when(&#39;/index&#39;,{
      templateUrl : &#39;template/index.html&#39;,
      controller : &#39;index&#39;
    })
    .when(&#39;/detail/:str&#39;,{
      templateUrl : &#39;template/detail.html&#39;,
      controller : &#39;detail&#39; 
    })
    .otherwise({
      redirectTo : &#39;/index&#39;
    });
 
}]);

ログイン後にコピー

ホームページのデータのフィルタリングと並べ替え:

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

ログイン後にコピー

リストをクリックすると詳細にジャンプしますページ:

  $scope.$watch(&#39;filterKey&#39;,function(){ //监听输入框的数据变化，完成数据的筛选
    if($scope.filterKey){
      $scope.data = $filter(&#39;filter&#39;)(arr,$scope.filterKey);
    }else{
      $scope.data = arr;
    } 
  })
 
  $scope.$watch(&#39;sortKey&#39;,function(){  //监听select下拉框的数据变化，完成数据的排序
    if($scope.sortKey){
      $scope.data = $filter(&#39;orderBy&#39;)($scope.data,$scope.sortKey);
    }else{
      $scope.data = arr;
    }
  })
 
 
//这里有个需要注意的地方，我们用一个数组arr作为媒介，避免bug

ログイン後にコピー

テンプレートは以下の通り:

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

ログイン後にコピー

4. 詳細ページ(詳細)の論理分析

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

ログイン後にコピー

5. カスタム指定のスライドの書き込み

機能AngularJS のは非常に強力で、コンポーネントベースの開発アイデアを実現する方法を提供します。カルーセルコンポーネントを簡単に実装してみましょう。

使用例:

テンプレート(slide.html)は以下の通りです:

m1.controller(&#39;detail&#39;,[&#39;$scope&#39;,&#39;$resource&#39;,&#39;$location&#39;,function($scope,$resource,$location){
  var id = parseInt($location.path().substring(8));  //获取索引
  $resource(&#39;infor.json&#39;).query(function(data){
    $scope.data = data[id];
    $scope.links = eval($scope.data.showList);  //自定义指令需要用到此数据
  });
 
}]);
 
//注意：$resource.query()为异步操作。数据相关的逻辑需要在回调中完成，否则可能会出现数据undefined的情况。

ログイン後にコピー

<div class="slide">
 <ul>
   <li ng-repeat="item in links">
     <img ng-src={{item.url}}>
   </li>
 </ul>
</div>

ログイン後にコピー

結論

AngularJS は、ルーティング管理、データフィルタリングなど、多くの便利な機能を提供します。より強力な機能についてはさらなる検討が必要ですが、この記事は単なる出発点にすぎません。