$routeProvider 路由

最新推荐文章于 2022-05-08 13:29:52 发布

小呆萌--

最新推荐文章于 2022-05-08 13:29:52 发布

阅读量902

点赞数

分类专栏： angularJS 文章标签： routeProvider 路由

本文链接：https://blog.csdn.net/qq_40446718/article/details/78539924

版权

angularJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script>
angular.module("myApp",["ngRoute"]).config(function($routeProvider){
//when : 路径名 /index; 路径规则
$routeProvider.when("/:type",{
templateUrl:"gequ.html" , //视图名称
controller:"demoC" //控制器
})
}).controller("demoC",function($scope,$routeParams){
console.log("歌曲类型", $routeParams.type);
//http://127.0.01:8080/stu?type=2

if($routeParams.type==1){
$scope.datas=["丑八怪","土耳其"];
}else if($routeParams.type==2){
$scope.datas=["难忘今宵","贝多芬"];
}else if($routeParams.type==3){
$scope.datas=["一人饮酒醉","昨日帝王篇"];
}
})
</script>
</head>
<body ng-app="myApp">
<nav>
<a href="#/1">流行歌曲</a>
<a href="#/2">古典歌曲</a>
<a href="#/3">嘻哈歌曲</a>
<a href="#/4">轻音乐曲</a>
</nav>

<div ng-view></div>
</body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script>
angular.module("myApp",["ngRoute"]).config(function($routeProvider){

$routeProvider.when("/index",{
template:"首页内容"
}).when("/news",{
template:"新闻"
})
.when("/zhibo",{

templateUrl:"views.html"
})
.otherwise({
});
redirectTo:"/news"
})

</script>
</head>
<body ng-app="myApp">
<nav>
<a href="#/index">首页</a>
<a href="#/news">新闻</a>
<a href="#/zhibo">直播</a>
</nav>

<div ng-view></div>
</body>
</html>

小呆萌--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$routeProvider 路由

angular.module("myApp",["ngRoute"]).config(function($routeProvider){//when : 路径名 /index; 路径规则$routeProvider.when("/:type",{templateUrl:"gequ.html" , //视图名称controller:"demoC" //控制器})
复制链接

扫一扫