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('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>
2. Analyse logique
<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 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' }); }]);
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('detail/'+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的情况。
<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) } } })