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>