解决ajax浏览器历史状态管理

index.html

<div class="container" ng-controller="MainCtrl1">
        <div class="col-xs-3 city nopadding">
            <div class="column" ng-class="{'active':city.city===currentInfo.city}" ng-repeat="city in data track by $index" ng-bind="city.city" ng-click="changeCity(city.city)"></div>
        </div>
        <div class="col-xs-9 county">
            <div class="col-xs-3" ng-repeat="item in currentInfo.county" ng-bind="item"></div>
        </div>
    </div>
	<div class="container" ng-controller="MainCtrl">
        <div class="col-xs-3 city nopadding">
            <a class="column" ng-class="{'active':city.city===currentInfo.city}" ng-repeat="city in data track by $index" ng-click="changeCity(city.city)" ng-bind="city.city" ng-href="#/{{city.city}}"></a>
        </div>
        <div class="col-xs-9 county">
            <div class="col-xs-3" ng-repeat="item in currentInfo.county" ng-bind="item"></div>
        </div>
    </div>

index.js

angular.module('bbsApp', ['ngCommon', 'ui.router'])
/**
 * 通过html5中history Api实现
 */
.controller('MainCtrl1', ['$scope', '$apis','$location','$window',function ($scope,$apis,$location,$window) {
    $scope.currentInfo={
    };
    $apis.get('/demo/data.json',function(data){
        $scope.data=data;
        $scope.currentInfo.city=$scope.data[0]['city'];
        $scope.currentInfo.county=$scope.data[0]['county'];
    });
    //切换
    $scope.changeCity=function(city){
        $scope.currentInfo.city=city;
        $scope.currentInfo.county=getCounty(city);
        //历史记录管理
        $location.url($scope.currentInfo.city);
        $location.replace();
        $window.history.pushState(JSON.stringify($scope.currentInfo), null, $location.absUrl());
    };
    $window.onpopstate=function(event){
        if(event.state){
            $scope.currentInfo=JSON.parse(event.state);
        }else{
            $scope.currentInfo.city=$scope.data[0]['city'];
            $scope.currentInfo.county=$scope.data[0]['county'];
        }
    };
    function getCounty(city){
       return $scope.data.filter(function(item){
            return item.city===city;
        })[0]['county'];
    }
}])
/**
 * 通过hash实现
 */
.controller('MainCtrl', ['$scope', '$apis','$location','$window',function ($scope,$apis,$location,$window) {
    $scope.currentInfo={
    };
    $apis.get('/demo/data.json',function(data){
        $scope.data=data;
        $scope.currentInfo.city=$scope.data[0]['city'];
        $scope.currentInfo.county=$scope.data[0]['county'];
    });
    $scope.changeCity=function(city){
        $scope.currentInfo.city=city;
        $scope.currentInfo.county=getCounty(city);
    };
    $window.addEventListener("hashchange", function(){
        var hash=decodeURIComponent(location.hash.slice(2));
        if(hash){
            $scope.currentInfo.city=hash;
            $scope.currentInfo.county=getCounty(hash);
        }else{
            $scope.currentInfo.city=$scope.data[0]['city'];
            $scope.currentInfo.county=$scope.data[0]['county'];
        }
    }, false);

    function getCounty(city){
       return $scope.data.filter(function(item){
            return item.city===city;
        })[0]['county'];
    }
}]);

data.json

[
    {
        "city":"上海",
        "county":["浦东","金山","崇明","奉贤"]
    },
    {
        "city":"江苏",
        "county":["南京","苏州","泰州","扬州"]
    },
    {
        "city":"浙江",
        "county":["杭州","嘉兴","舟山","绍兴"]
    }
]

index.css

.column{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}
.city{
    border: 1px solid #ccc;
    border-right: none;
}
.county{
    width: 400px;
    border: 1px solid #ccc;
    height: 300px;
}
.active{
    color: white;
    background: #1daace;
}