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

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

效果如下：

具体实现：

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

<div ng-click="eventHandler.addToHistorys(phone)">{{phone.name}}</a>  </li>  </ul>    </div>    <div 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: []}});

?