路由切换页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>



<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<style>
#navigator{width: 100%; display: inline-block;background-color: blueviolet;height: 50%;}
#nextdiv{width: 100%; display: inline-block;height: 500px;}
</style>
</head>
<body ng-app="routeDemo">
<div id="navigator">
<ul>
<li><a href="#/home">首页</a></li>
<li><a href="#/woman">音乐</a></li>
<li><a href="#/man">游戏</a></li>

</ul>
</div>
<div id="nextdiv">
<div ng-view=""></div>
</div>
</body>
<script type="text/ng-template" id="index.home.html">
<h1>欢迎登陆八维在线首页</h1>
</script>
<script type="text/ng-template" id="index.woman.html">
<h1>欢迎来到音乐的世界</h1>
</script>
<script type="text/ng-template" id="index.man.html">
<h1>欢迎来到游戏的世界</h1>
</script>
<script type="text/javascript">
angular.module('routeDemo',['ngRoute'])
.controller('HomeController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('WomanController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('WomanController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('ManController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('LifeController',function ($scope,$route) {
$scope.$route = $route;
})
.controller('CookController',function ($scope,$route) {
$scope.$route = $route;
})

//配置$routeProvider用来定义路由规则
//$routeProvider为我们提供了when（path，object）& other(object)函数按顺序定义所有路由，函数包含两个参数：
//@param1:url或者url正则规则
//@param2：路由配置对象
.config(function($routeProvider){
$routeProvider.
when('/home',{
//templateURL：插入ng-view的HTML模板文件
templateUrl:'index.home.html',
controller:'HomeController'

}).
when('/woman',{
templateUrl:'index.woman.html',
controller:'WomanController'
}).
when('/man',{
templateUrl:'index.man.html',
controller:'ManController'
}).
when('/life',{
templateUrl:'index.life.html',
controller:'LifeController'
}).
when('/cook',{
templateUrl:'index.cook.html',
controller:'CookController'
})
})
</script>
</html>

猜你喜欢