前書き
私は最近 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('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>
4. 論理分析
1. まず、外部リソース info.json の情報を説明します。これは配列であり、配列の各項目は次のフィールドを含む json オブジェクトです:
<slide></slide>是一个自定义指令,实现轮播图的功能 <div class="detail"> <slide links='links' w='200' h='200'></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(['$routeProvider',function($routeProvider){ $routeProvider .when('/index',{ templateUrl : 'template/index.html', controller : 'index' }) .when('/detail/:str',{ templateUrl : 'template/detail.html', controller : 'detail' }) .otherwise({ redirectTo : '/index' }); }]);
ホームページのデータのフィルタリングと並べ替え:
var arr = []; var objRe = $resource('infor.json'); $scope.data = arr = objRe.query(); //获得data数据后首页即可进行渲染
リストをクリックすると詳細にジャンプしますページ:
$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
テンプレートは以下の通り:
$scope.$location = $location; //将$location挂载到$scope下,模板中便可使用$location提供的方法
4. 詳細ページ(詳細)の論理分析
<li ng-repeat="item in data" ng-click="$location.path('detail/'+item.id)"> --点击的时候将列表跳转到详情页
5. カスタム指定のスライドの書き込み機能AngularJS のは非常に強力で、コンポーネントベースの開発アイデアを実現する方法を提供します。カルーセル コンポーネントを簡単に実装してみましょう。 使用例:
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的情况。
<div class="slide"> <ul> <li ng-repeat="item in links"> <img ng-src={{item.url}}> </li> </ul> </div>
結論AngularJS は、ルーティング管理、データ フィルタリングなど、多くの便利な機能を提供します。より強力な機能についてはさらなる検討が必要ですが、この記事は単なる出発点にすぎません。