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: []}});?