<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.导入angular.js库文件-->
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<!--2.导入angular-route.js,放在angular.js后面-->
<script type="text/javascript" src="../AngularJS库/angular-route.js" ></script>
<script>
//3.在anjularJS模块中注入路由 ["ngRoute"]
var app = angular.module("myApp",["ngRoute"]);
//4.在config函数中配置路由规则,里面是一个数组[]
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{template:"这是主页面"})
.when("/user",{template:"这是个人中心"})
.when("/car",{template:"这是购物车"})
.when("/setting",{template:"这是设置"})
.when("/haha",{template:"这是哈哈"})
.when("/yonghu/:name/:age",{
templateUrl:"yonghu.html",
controller:"yonghuCtrl"
})
.otherwise({redirectTo:"/"});
}]);
app.controller("myCtrl",function($scope,$location){
$scope.tiao = function(url){
//alert("f");
$location.path(url);
};
});
app.controller("yonghuCtrl",function($scope,$routeParams){
/*$scope.yonghud = function(url){
alert(url);
//$location.path(url);
} */
$scope.name = $routeParams.name;
$scope.age = $routeParams.age;
});
</script>
<style>
div{
width: 200px;
height: 200px;
background: salmon;
border: 1px solid saddlebrown;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--5.通过# 加标记访问路由-->
<input type="text" ng-model="name" />
<input type="text" ng-model="age" />
<ul>
<li><a href="#/">主页面</a></li>
<li><a href="#/user">个人中心</a></li>
<li><a href="#/car">购物车</a></li>
<li><a href="#/setting">设置</a></li>
<li><a href="#/yonghu/{{name}}/{{age}}">用户</a></li>
</ul>
<button ng-click="tiao('/haha')">按钮路由</button>
<!--<button ng-click="yonghud('/yonghu')">用户</button>-->
<div ng-view></div>
</body>
<script type="text/ng-template" id="yonghu.html">
<p>{{name}}</p>
<p>{{age}}</p>
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.导入angular.js库文件-->
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<!--2.导入angular-route.js,放在angular.js后面-->
<script type="text/javascript" src="../AngularJS库/angular-route.js" ></script>
<script>
//3.在anjularJS模块中注入路由 ["ngRoute"]
var app = angular.module("myApp",["ngRoute"]);
//4.在config函数中配置路由规则,里面是一个数组[]
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/",{template:"这是主页面"})
.when("/user",{template:"这是个人中心"})
.when("/car",{template:"这是购物车"})
.when("/setting",{template:"这是设置"})
.when("/haha",{template:"这是哈哈"})
.when("/yonghu/:name/:age",{
templateUrl:"yonghu.html",
controller:"yonghuCtrl"
})
.otherwise({redirectTo:"/"});
}]);
app.controller("myCtrl",function($scope,$location){
$scope.tiao = function(url){
//alert("f");
$location.path(url);
};
});
app.controller("yonghuCtrl",function($scope,$routeParams){
/*$scope.yonghud = function(url){
alert(url);
//$location.path(url);
} */
$scope.name = $routeParams.name;
$scope.age = $routeParams.age;
});
</script>
<style>
div{
width: 200px;
height: 200px;
background: salmon;
border: 1px solid saddlebrown;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--5.通过# 加标记访问路由-->
<input type="text" ng-model="name" />
<input type="text" ng-model="age" />
<ul>
<li><a href="#/">主页面</a></li>
<li><a href="#/user">个人中心</a></li>
<li><a href="#/car">购物车</a></li>
<li><a href="#/setting">设置</a></li>
<li><a href="#/yonghu/{{name}}/{{age}}">用户</a></li>
</ul>
<button ng-click="tiao('/haha')">按钮路由</button>
<!--<button ng-click="yonghud('/yonghu')">用户</button>-->
<div ng-view></div>
</body>
<script type="text/ng-template" id="yonghu.html">
<p>{{name}}</p>
<p>{{age}}</p>
</script>
</html>