angular-phonecat-snapshots增加浏览历史功能

给AngularJS官网入门教程的angular-phonecat-snapshots实例增加浏览历史的功能。

效果如下：
angular-phonecat-snapshots增加浏览历史功能

具体实现：

1.修改phone-list.html，增加view

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>
	       浏览历史：
	  <ul>
	  	<li ng-repeat="phone in historys">
	  		<a href="#/phones/{{phone.id}}" ng-click="eventHandler.addToHistorys(phone)">{{phone.name}}</a>
	  	</li>
	  </ul>
    </div>
    <div class="span10">
      <!--Body content-->
      
      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb" ng-click="eventHandler.addToHistorys(phone)"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}" ng-click="eventHandler.addToHistorys(phone)">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>
      
    </div>
  </div>
</div>

2.修改controllers.js，给PhoneListCtrl增加实现逻辑

function PhoneListCtrl($scope, Phone) {

	$scope.phones = Phone.query();
	$scope.orderProp = 'age';
	
	if ($scope.$parent.history instanceof Array) {
		$scope.historys = $scope.$parent.history;
	} else {
		$scope.historys = [];
	}
	
	$scope.eventHandler = {
		addToHistorys : function(phone) {
			var list = $scope.historys;
			for ( var i = 0; i < list.length; i++) {
				if (list[i].id === phone.id) {
					list.splice(i, 1);
				}
			}
			$scope.historys.unshift(phone);
		}
	};
	$scope.$parent.history = $scope.historys;
}

PhoneListCtrl.$inject = [ '$scope', 'Phone'];

说明：点击手机名称的链接进入详细页面时，Controller定义的数据会丢失，于是，在其$parent的scope里定义一个histsory model，用于跳出当前页面（即当前Controller）时，保存浏览历史信息。

这个方法老觉得不好，原因是数据都要在放在上级，如果这样的controller多了或者信息量大了，如此$parent的负担会超大。于是想到angularjs的DI（注入），利用factory把浏览历史数据注入给PhoneListCtrl可以很好地解决这个问题。

修改如下：

1.修改controllers.js，修改PhoneListCtrl的实现逻辑

function PhoneListCtrl($scope, Phone, browserHistory) {

	$scope.phones = Phone.query();
	$scope.orderProp = 'age';
	
	$scope.historys = browserHistory.historys;
	
	$scope.eventHandler = {
		addToHistorys : function(phone) {
			var list = $scope.historys;
			for ( var i = 0; i < list.length; i++) {
				if (list[i].id === phone.id) {
					list.splice(i, 1);
				}
			}
			$scope.historys.unshift(phone);
		}
	};
	browserHistory.historys = $scope.historys;
}
PhoneListCtrl.$inject = ['$scope', 'Phone', 'browserHistory'];

2.修改services.js，增加browserHistory服务

'use strict';

/* Services */

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
  return $resource('phones/:phoneId.json', {}, {
    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
  });
}).factory("browserHistory", function() {
	return {
	    historys: []
	}
});

angular-phonecat-snapshots增加浏览历史功能

相关推荐