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>更多专业前端知识，请上 【猿2048】www.mk2048.com