AngularJS路由代码案例

来源：互联网发布：python 遗传算法股票编辑：程序博客网时间：2024/06/05 15:23

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路由</title>
<style>
ul li{
list-style: none;
}
a{
text-decoration: none;
}
</style>

<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("/",{
/*template:"<h3>这是主页面</h3>"*/
templateUrl:"home.html",
controller:"homeCtrl",
redirectTo:"/"
})
.when("/goods",{
template:"<h3>这是商品页面</h3>"
})
.when("/car",{
/*template:"<h3>这是购物车页面</h3>"*/
templateUrl:"car.html"
}).when("/order",{
template:"<h3>这是订单页面</h3>"
}).when("/me",{
/*template:"<h3>这是个人中心页面</h3>"*/
templateUrl:"mes.html"
})
.otherwise({redirectTo:"/"});
}]);
app.controller("myCtrl",function($scope){

});

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

<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="#/dassad">其他</a></li>
</ul>

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


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


<p ng-view></p>
</body>
</html>

阅读全文

0 0