route路由

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

墨明棋妙呀

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

阅读量220

点赞数

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

版权

<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>

墨明棋妙呀

关注

0
点赞
踩
0

收藏

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

/* 3.创建AngularJS主应用程序，注入路由的支持服务。ngRoute */var app = angular.module("myApp",['ngRoute']);/* 4.使用config配置函数，配置路由规则 */app.config(["$routeProvider",function($routeProvider){$routeProvider.when("
复制链接

扫一扫