您的位置：首页 > Web前端 > AngularJS

用AngularJS路由实现web页面跳转

2018-02-26 09:19 591 查看

<!DOCTYPE html>

<html lang="en">

<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>
li{
float: left;
margin-left: 25px;
list-style: none;
}
</style>

</head>

<body ng-app='routeDemo'>



<div id="navigator" style="width: 100%;display: inline-block;background-color: paleturquoise;height: 200px;">



<ul>

<li><a href="#/home">首页</a></li>

<li><a href="#/woman">音乐</a></li>

<li><a href="#/man">游戏</a></li>

</ul>

</div>



<div style="width: 100%;display: inline-block;height: 400px;">

<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;

})

//配置$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'

})

})

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航