AngularJS路由使用案例： javaee.html代碼： angularjs.html代碼： easyui.html代碼： mysql.html代碼： ...
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>
