效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由</title> <script src="angular.js" type="text/javascript"></script> <script src="angular-route.js" type="text/javascript"></script> <style type="text/css"> li{ list-style: none; float: left; margin: 8px; } </style> <script type="text/javascript"> var app = angular.module("myApp",["ngrout"]); app.config(["$routeProvider",function ($routeProvider) { $routeProvider .when("/",{ templateUrl:"bbs/home.hteml", controller:"defaultCtrl" }) .when("/news",{ templateUrl:"bbs/home.hteml", controller:"defaultCtrl" }) .when("/sport",{ templateUrl: "http://www.qq.com/", controller: "defaultCtrl" }) .when("/game",{ templateUrl:"bbs/home.hteml", controller:"defaultCtrl" }) .otherwise({ redirectTo:"/" }); }]); app.constructor("homeCtrl",function ($scope) { }); app.constructor("defaultCtrl",function ($sope,$routeParams) { console.log("类型"+$routeParams['type']); $scope.$on("$routeChangeStart",function (p1, p2) { console.log("Route Change Start"); }); $scope.$on("$routeChangeSuccess",function (p1, p2) { console.log("Route Change Success"); }); $scope.$on("$routeChangeError",function (p1, p2) { console.log("Route Change Error"); }); }); </script> </head> <body ng-app="myApp"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/">新闻</a></li> <li><a href="#/">体育</a></li> <li><a href="#/">游戏</a></li> <li><a href="#/">其他</a></li> </ul> <div style="clear: both"></div> </body> </html>