路由传值

最新推荐文章于 2023-04-04 20:03:22 发布

daimengs

最新推荐文章于 2023-04-04 20:03:22 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/daimengs/article/details/80174513

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://apps.bdimg.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>

<script type="text/javascript">
//申明angular作用域时，引入路由
var app = angular.module("myApp",['ngRoute']);
//$routeParams接收路由传递的数据
app.controller("myCtrl",function($scope,$routeParams){
$scope.uname = $routeParams.name;
$scope.uage = $routeParams.age;
})
//创建配置路由
app.config(["$routeProvider",function($routeProvider){

// home是主页的路由
$routeProvider
.when("/home",
{
template:"<h1>我是主页，我是大标题</h1>"
}
).when("/goods",
{
templateUrl:"goods.html"
}
).when("/myself/:name/:age",
{
templateUrl:"myself.html",
controller:"myCtrl"
}
).otherwise({redirectTo:"/home"});
}]);
</script>
<style type="text/css">
div{
width: 1200px;
height: 200px;
background-color: red;
}
</style>
</head >
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<a href="#/home">主页</a>
<a href="#/goods">商品</a>
<a href="#/myself/zhangsan/20">个人中心</a>
<a href="#/other">其他</a>
</nav>


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

<script type="text/ng-template" id="myself.html">
<h1>我是个人中心</h1>
姓名：<input type="text" ng-model="uname" /><br />
年龄：<input type="text" ng-model="uage"/><br />
</script>
</html>

daimengs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由传值

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"
复制链接

扫一扫