路由——route（2）

来源：互联网发布：ubuntu 镜像源编辑：程序博客网时间：2024/06/15 21:36

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

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

<script type="text/javascript" src="../../js/angular/angular-route.js" ></script>
<script>
/* 3.向应用程序中注入路由依赖对象 */
var app = angular.module("myApp",['ngRoute']);
/* 4.在config函数中配置路由规则 */
app.config(["$routeProvider",function($routeProvider){
//配置路由规则
$routeProvider
.when("/",{template:"这是首页面"})
.when("/book",{template:"这是图书页面"})
.when("/my",{template:"这是个人中心页面"})
.when("/setting",{
controller:"settingCtrl",
templateUrl:"setting.html"
})
.when("/lianxiren",{
controller:"lianxirenCtrl",
templateUrl:"lianxiren.html"
})
.otherwise({redirectTo:"/"});
}]);
//主控制器
app.controller("myCtrl",function($scope){

});

//联系人页面控制器
app.controller("lianxirenCtrl",function($scope){
alert("联系人控制器");
$scope.people = [{
name:"张三",
tel:"110"
},{
name:"李四",
tel:"120"
},{
name:"王五",
tel:"119"
}];
});

//设置页面控制器
app.controller("settingCtrl",function($scope){
alert("设置控制器");
$scope.haha = "setting";
});

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<ul>
<li><a href="#/">主页面</a></li>
<li><a href="#/book">图书页面</a></li>
<li><a href="#/my">个人中心页面</a></li>
<li><a href="#/setting">设置页面文件</a></li>
<li><a href="#/lianxiren">联系人页面文件</a></li>
<li><a href="#/asdfasd">其他页面</a></li>
</ul>

<div ng-view>

</div>


<script type="text/ng-template" id="lianxiren.html">
<h3>这是联系人页面</h3>
<ul>
<li ng-repeat="p in people">姓名为：{{p.name}}的电话为：{{p.tel}}</li>
</ul>
</script>
</body>
</html>

阅读全文

0 0