ホームページ > 記事 > ウェブフロントエンド > AngularJS Phonecatの例の説明
前書き
私は最近、AngularJS についての情報を読みました。その公式 Web サイトに、非常に優れたサンプルがありました。しばらく眺めた後、本当に我慢できなくなったので、自分で実装しました。問題が発生したときにそれを見て、答えを探すのも良いでしょう。どれだけ言われても、見られても、自分でやったほうが良いので、始めてみましょう。
テキスト
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. ホームページ (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' }); }]);
ホームページデータのフィルタリングと並べ替え:
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 のカスタム指定機能は非常に強力で、コンポーネントベースの開発のアイデアを提供します。カルーセル コンポーネントを簡単に実装してみましょう。
使用例: c5d78ac0771abcd9072419e8fbde58f8813d8b7ad24b2efd298fbc1d2e96befb
テンプレート(slide.html)は以下の通り:
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ルーティング管理、データフィルタリングなど、多くの便利な機能を備えています。より強力な機能についてはさらなる検討が必要ですが、この記事は単なる出発点にすぎません。
その他の AngularJS Phonecat の例と関連記事については、PHP 中国語 Web サイトに注目してください。