route路由

最新推荐文章于 2024-04-14 02:40:38 发布

墨明棋妙呀

最新推荐文章于 2024-04-14 02:40:38 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Wangmengyao1115/article/details/78543734

本文介绍了一个使用AngularJS实现的简单路由配置示例。该示例定义了多个路由规则，包括主页面、商品页面、购物车页面、订单页面和个人中心页面等。每个页面都配置了对应的模板和控制器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<title></title>

<script type="text/javascript" src="../../angular/angular.js" ></script>

<script type="text/javascript" src="../../angular/angular-route.js" ></script>
<script>
/* 3.创建AngularJS主应用程序，注入路由的支持服务。ngRoute */
var app = angular.module("myApp",['ngRoute']);
/* 4.使用config配置函数，配置路由规则 */
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/goods",{
template:"<h3>这是商品页面</h3>"
})
.when("/",{
/*template:"<h3>这是主页面</h3>"*/
templateUrl:"home.html",
controller:"homeCtrl",
redirectTo:"/goods"
})
.when("/car",{
/*template:"<h3>这是购物车页面</h3>"*/
templateUrl:"car.html"
}).when("/order",{
template:"<h3>这是订单页面</h3>"
}).when("/me",{
/*template:"<h3>这是个人中心页面</h3>"*/
templateUrl:"updatePwd.html"
})
.otherwise({redirectTo:"/goods"});
}]);
app.controller("myCtrl",function($scope){

});

//创建主页面控制器
app.controller("homeCtrl",function($scope,$rootScope){
$scope.name = "张三";
$rootScope.name = "李四";
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>

<ul>
<li><a href="#/">主页面</a></li>
<li><a href="#/goods">商品</a></li>
<li><a href="#/car">购物车</a></li>
<li><a href="#/order">订单</a></li>
<li><a href="#/me">个人中心</a></li>
<li><a href="#/asdfas">其他</a></li>
</ul>


<script type="text/ng-template" id="updatePwd.html">
<h3>个人中心页面</h3>
{{name}}
<form>
用户名：<input type="text" value="张三" disabled="disabled" /><br/><br/>
旧密码：<input type="text" placeholder="请输入旧密码" /><br/><br/>
新密码：<input type="text" placeholder="请输入新密码" /><br/><br/>
验证密码:<input type="text" placeholder="请再次输入密码" /><br/><br/>
<input type="submit" value="更改密码" />
</form>
</script>


<script type="text/ng-template" id="home.html">
<h3>主页面</h3>
登录成功，欢迎{{name}}！！！
</script>


<div ng-view style="border: 1px solid blue; width: 600px; height: 600px;">

</div>
</center>
</body>