AngularJS路由使用案例：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title>AngularJS路由使用案例</title> 6 ????????<script type="text/javascript" src="../js/angular.min.js"></script> 7 ????????<script type="text/javascript" src="../js/angular-route.min.js"></script> 8 ????</head> 9 ????<body ng-app="myapp">10 ????????<div>11 ????????????<h1>在你我他学习吧，你可以学习到如下技术：</h1>12 ????????????<a href="#/JAVAEE"></a>13 ????????????<a href="#/AngularJS"></a>14 ????????????<a href="#/EasyUI"></a>15 ????????????<a href="#/MySQL"></a>16 ????????</div>17 ????????<!--路由加载后，更新变化的内容-->18 ????????<div ng-view></div>19 ????????<div>20 ????????????<h1>footer</h1>21 ????????</div>22 ????</body>23 ????<script type="text/javascript">24 ????????//定义myapp模块25 ????????var myapp = angular.module("myapp",["ngRoute"]);26 ????????//配置模块的路由27 ????????myapp.config(["$routeProvider",function($routeProvider){28 ????????????$routeProvider.when(‘/JAVAEE‘,{29 ????????????????templateUrl:‘javaee.html‘30 ????????????}).when(‘/AngularJS‘,{31 ????????????????templateUrl:‘angularjs.html‘32 ????????????}).when(‘/EasyUI‘,{33 ????????????????templateUrl:‘easyui.html‘34 ????????????}).when(‘/MySQL‘,{35 ????????????????templateUrl:‘mysql.html‘36 ????????????}).otherwise({37 ????????????????redirectTo:‘JAVAEE‘38 ????????????});39 ????????}]);40 ????</script>41 </html>javaee.html代码：
<h1>javaee</h1>
angularjs.html代码：
<h1>angular</h1>
easyui.html代码：
<h1>easyui</h1>
mysql.html代码：
<h1>mysql</h1>
AngularJS路由使用案例
原文地址：https://www.cnblogs.com/niwotaxuexiba/p/8125117.html