还记得我们刚开始学习html时使用的锚节点实现跳转吗？
<a href="#target">我想跳转至目标位置</a> <p>第一条</p> ....
<p id="#target">我是目标位置</p> ...
在js中实现跳转也是利用了这一点，下面直接在代码中解释吧：
<body>
<ul>
<li><a href="#/music">音乐</a></li>
<li><a href="#/friend">朋友</a></li>
</ul>
<div id="view">
<!--页面上需要修改的内容-->
</div>
</body>
<script>
window.addEventListener('hashchange', function(){ //hashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。
console.log(location.hash); //输出结果见下图：
var view=document.getElementById('view'); //获取页面中想要插入元素的id
switch(location.hash){
case '#/music': //利用switch case来判断当前点击的锚节点是什么 ，同时设置相应的内容
view.innerHTML='音乐';
break;
case '#/friend':
view.innerHTML="朋友";
break;
}
})
</script>
接下来是在angulajs框架里如何使用路由切换实现单页面跳转：
直接代码中解释好了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<ul>
<li><a href="#/first">第一种方式</a></li>
<li><a href="#/second">第二种方式</a></li>
<li><a href="#/third">第三种方式</a></li>
<li><a href="#/fourth">第四种方式</a></li>
</ul>
<div ng-view>
<!--页面上需要修改的内容-->
</div>
</body>
<script src="../../angular-1.5.8/angular.js"></script>
<script src="../../angular-1.5.8/angular-route.js"></script>
<script>
// 创建模块
var app=angular.module('myApp',['ngRoute']); //写路由表
app.config(function($routeProvider){
$routeProvider
.when('/first',{
template:'<h1>第一种方式：直接写入进来</h1>'
})
.when('/second',{
template:'<h1>{{secondWay}}</h1>',
controller:function($scope){ //这里是匿名的控制器
$scope.secondWay='第二种方式：使用匿名的controller的方式'
}
})
.when('/third',{
template:'<h1>{{thirdWay}}</h1>',
controller:'myCtrl' //第三种方式：使用命名的myCtrl的控制器写入
})
.when('/fourth',{
templateUrl:'mytemplate.html',
controller:'myCtrl2'
// 第四种方式：angularjs跳转到模板所在路径实现方法
})
//以下为当我们在地址栏输入错误的路径时处理的结果
// .otherwise({
// template:'<h1>{{extraError}}</h1>',
// controller:function($scope){
// $scope.extraError='这里是路径错误时产生的文字';
// }
// })
//
//不过一般我们会默认的让它跳转到一个页面
.otherwise({
redirectTo:'/first' //默认第一个单页面
});
}) //对应上面的第三种方式：有控制器名称的用法
app.controller('myCtrl',function($scope){
$scope.thirdWay='第三种方式：这是使用有名字的控制器的方法';
});
//对应上面的第四种写法：有控制器名称并链入模板页面
app.controller('myCtrl2',function($scope){
$scope.fourthWay='第四种方式：这是从外部html模板中获取的数据';
});
</script>
</html>
重要补充说明：
1.第四种方式需要在额外创建一个名为"mytemplate.html"的页面
（因为templateUrl属性值是一个url路径,路径指向一个html模板,html模板会填充(或替换)指令内容）：
页面内容为：
2.在设置ng-app（angualar作用范围）时注意是放在body里面，我一开始放在了ul里，结果导致报错.
3.其次注意需要使用当有服务的代码编辑器打开，（webStorm可以）即地址栏是http://localhost:63342/...
如果直接打开,或者在（sublime）中运行，即以：file:///D:/ ... 就不是在服务器上运行那么它就会出错：显示：mytemplate.html那个页面无法加载：
个人理解，如有不足，希望各位大神留言补充~