angular 单页应用程序实现浏览器后退按钮跳转到前一页面，优化用户体验

核心是通过 点击改变$location.hash( ) 的值，通过$scope.$watch监听，更新step 的值

首先写出来一个静态页面：

<div class="container">
  <h1>这里是导航栏</h1>

  <ul>
  <li>11111</li>
  <li>22222</li>
  <li>33333</li>
  </ul>

  <div id="div1">
  <h2>第一个第一个第一页</h2>
  <a href="#" class="btn btn-default" ng-if="">上一页</a>
  <a href="#div2" class="btn btn-default">下一页</a>
  </div>
  <div id="div2">
  <h2>第二页第二页第二页</h2>
  <a href="#div1" class="btn btn-default">上一页</a>
  <a href="#div3" class="btn btn-default">下一页</a>
  </div>
  <div id="div3">
  <h2>第三页第三页第三页</h2>
  <a href="#div2" class="btn btn-default">上一页</a>
  <a href="#" class="btn btn-default" ng-if="">下一页</a>
  </div>
</div>

上面这个就是一个简单的静态页面，大体上的的效果是这样的：
但是我们三个页面肯定不能都显示出来对啊，我们的想法是，一开始是第一页，然后是我点击一次下一页，第一页消失，第二页出现。
所以我们可以在【上一页】【下一页】的a 标签上 更新 $scope. step

<div ng-if="step=2">
    <a href="#" ng-click="step=1">上一页</a>
    <a href="#" ng-click="step=3">下一页</a>
</div>

上面的例子，只要一点击 【上一页】【下一页】，$scope.step就会变成1或者3，反正不等于2，所以本div（在这里表示一页）就会隐藏，和step的值相等的页面就会出现；

简单来说，href="#" 是用来 修改浏览器导航栏内的url ，而ng-click=" step=1 "则是更新步骤，控制哪些东西可以显示

到目前为止的，我们的代码是：

<h1>这里是导航栏</h1>

<ul>
  <li><a href="#div1" ng-click="step=1">11111</a></li>
  <li><a href="#div2" ng-click="step=2">22222</a></li>
  <li><a href="#div3" ng-click="step=3">33333</a></li>
</ul>

<div id="div1" ng-show="step==1">
  <h2>第一个第一个第一页</h2>
  <a href="#" class="btn btn-default" ng-if="">上一页</a>
  <a href="#div2" class="btn btn-default" ng-click="step=2">下一页</a>
</div>
<div id="div2" ng-show="step==2">
  <h2>第二页第二页第二页</h2>
  <a href="#div1" class="btn btn-default" ng-click="step=1">上一页</a>
  <a href="#div3" class="btn btn-default" ng-click="step=3">下一页</a>
</div>
<div id="div3" ng-show="step==3">
  <h2>第三页第三页第三页</h2>
  <a href="#div2" class="btn btn-default" ng-click="step=2">上一页</a>
  <a href="#" class="btn btn-default" ng-if="">下一页</a>
</div>

可以实现的功能是，我点击上边的导航栏，和上一页下一页按钮，都可以实现跳转。点击后退按钮的功能没有实现

下面是我们的关键问题，如何点击浏览器的后退按钮，页面会后退？

$scope.$watch(function () {
var url=$location.path();
return url;
},function (v) {
var stepnum=v.charAt(v.length-1);
$scope.step=stepnum;
})

通过监听 $location 的path( )

1. $watch的三个参数，newValue, Oldvalue, scope
2. $location 对象都有啥api ，属性？方法？常在什么时候用？ path()  和 哈希值有什么区别？ window.location 和$location有什么区别
3. 截取字符串的最后一个

字符串的方法有哪些？如何截取字符串的最后一个？
charAt( 2 );
charAt( str.length-1 );

substr(从第几个开始截取，一共要截取几个 )
substr( str.length-1, 1 );

split( "要按照什么截取的字符" )
var arr=str.split("")
arr.splice(arr.length-1,1 )

$location都有哪些功能？

它是干什么的?
$location解析地址栏中的URL（基于window.location），让你在应用代码中能获取到。改变地址栏中的URL会反应$location服务中，反之亦然。
$location服务:

* 暴露当前地址栏的URL
* 
    * 获取并监听URL。
    * 改变URL。

* 当出现以下情况时同步URL
* 
    * 改变地址栏
    * 点击了后退按钮（或者点击了历史链接）
    * 点击了一个链接

* 一系列方法来获取URL对象的具体内容用（protocol, host, port, path, search, hash）.formatDate

什么时候用$location？

1. 对url的改变做出响应
2. 你想改变当前的url时候

$location对象是需要配置的，在app.config里面进行配置；
app.config(function($locationProvider){
$locationProvider.html5Mode(false).hashPrefix('!');
})

转载于:https://www.cnblogs.com/dujuncheng/p/6439277.html