angularJs路由小Demo
来源：互联网 发布：世界银行拨款数据 编辑：程序博客网 时间：2024/05/18 00:20
index.html:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<script src="angularJS/angular.min.js"></script>
<script src="angularJS/angular-route.js"></script>
<script>
angular.module("myApp",["ngRoute"]).config(function($routeProvider){
$routeProvider.when("/:type",{
templateUrl:"music.html",
controller:"luyou14"
})
}).controller("luyou14",function($scope, $routeParams){
if($routeParams.type == 1){
$scope.musics = [{"name":"北京巷弄", "path":"music1/bjxn.mp3"}, {"name":"被情伤过的女人", "path":"music1/bqsgdnr.mp3"}];
}else if($routeParams.type == 2){
$scope.musics = [{"name":"悲伤的李白", "path":"music2/bsdlb.mp3"}, {"name":"冲动的惩罚", "path":"music2/cddcf.mp3"}];
}
})
</script>
</head>
<body ng-app="myApp">
<nav>
<a href="#/1">音乐一</a>
<a href="#/2">音乐二</a>
</nav>
<div ng-view></div>
</body>
</html>
music.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp">
<table>
<tr ng-repeat="music in musics">
<td>{{music.name}}</td>
<td><a href="{{music.path}}">播放</a></td>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- angularJs路由小Demo
- angularjs路由小案例
- angularjs路由小项目
- angularjs模型小demo
- AngularJs 服务区别小Demo
- Angularjs路由
- AngularJS-路由
- AngularJS 路由
- AngularJS 路由
- AngularJS路由
- angularjs路由
- angularJS路由
- Angularjs 路由
- angularjs-路由
- AngularJS 路由
- AngularJS-路由
- angularjs---------路由
- AngularJS 路由
- 线程的同步问题
- 添加运算符-LintCode
- scala
- 欢迎使用CSDN-markdown编辑器
- 为什么实体类需要序列化
- angularJs路由小Demo
- Eclipse Memory Analyzer
- SSH无密钥登陆 与 配置公钥后仍需要输入密码的解决方案
- JVM详解
- 线程并发二：线程基本操作
- Eclipse中的Web项目自动部署到Tomcat
- 02:二分法求函数的零点
- 6种负载均衡算法
- Spring get/post方式/转发，重定向
