angularJS是一种单页面web应用（简称spa）,路由允许我们通过不同的URL路径来访问不同的内容，在AngularJS中需要用到 # + 标记 的格式；好了，我们直接看代码：
【1】通过a标签进行跳转：
<script>
var app = angular.module("app",["ngRoute"]);
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/content1",{template:"1111"})
.when("/content2",{templateUrl:"select.html"})
.when("/content3",{template:"33333"})
var app = angular.module("app",["ngRoute"]);
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/content1",{template:"1111"})
.when("/content2",{templateUrl:"select.html"})
.when("/content3",{template:"33333"})
.when("/content4",{template:"4444"})
.otherwise({redirectTo:"/content1"});
}])
}])
</script>
</head>
<body ng-app="app">
<div ng-view></div>
<ul>
<li><a href="#/content1">111</a></li>
<li><a href="#/content2">222</a></li>
<li><a href="#/content3">333</a></li>
<li><a href="#/content4">444</a></li>
</ul>
<body ng-app="app">
<div ng-view></div>
<ul>
<li><a href="#/content1">111</a></li>
<li><a href="#/content2">222</a></li>
<li><a href="#/content3">333</a></li>
<li><a href="#/content4">444</a></li>
</ul>
</body>
【2】通过ng-click跳转：
<h3>这是第三部分child3.html的页面{{name3}}</h3>
<p>
<span ng-click="clear()">清空缓存</span>
<span ng-click="info()">版本信息</span>
<span ng-click="check()">检查</span>
<span ng-click="clear()">清空缓存</span>
<span ng-click="info()">版本信息</span>
<span ng-click="check()">检查</span>
</p>
<script>
var app = angular.module("app",["ngRoute"]);
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/content1",{template:"1111"})
var app = angular.module("app",["ngRoute"]);
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/content1",{template:"1111"})
.when("/check",{templateUrl:"child/check.html"})
.when("/clear",{templateUrl:"child/clear.html"})
.when("/info",{templateUrl:"child/info.html"})
.otherwise({redirectTo:"/content1"});
}])
}])
</script>
<script>
app.controller("child3Controller",["$scope","$location", function ($scope,$location) {
$scope.check= function () {
$location.path("check");
};
$scope.clear= function () {
$location.path("clear");
};
$scope.info= function () {
$location.path("info");
};
$scope.check= function () {
$location.path("check");
};
$scope.clear= function () {
$location.path("clear");
};
$scope.info= function () {
$location.path("info");
};
}]);
</script>
通过AngularJS的来实现这种效果，写的代码看上去还是比较冗余，大家可以学习一下onsenUI中的写法，那就比较直接简单了！