您的位置：首页 > 其它

文章标题简单路由案例

2017-10-21 12:38 197 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<style>
a{ text-decoration: none;} div{ border: 1px solid; width: 600px; height: 300px; margin-top: 100px}
a:hover{ color: crimson;}
</style>
</head>
<body ng-app='routingDemoApp'>
<center>
<h2>AngularJS 路由应用</h2>

<a href="#/">商品列表</a>
<a href="#/computers">用户信息</a>
<a href="#/printers">地址信息</a>

<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'外星人电脑<br/> 联想电脑 <br/>华硕电脑 <br/>神州笔记本'})
.when('/computers',{template:'张三<br/> 李四<br/> 张五<br/> 李六'})
.when('/printers',{template:'上地一街 <br/>上地二街<br/> 上地三街<br/> 上地四街'})

}]);
</script>

</center>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航

文章标题 简单路由案例

文章标题简单路由案例