路由——route（2）_route2()函数-优快云博客

本文介绍了一个使用AngularJS实现的简单路由应用案例，包括了页面跳转、内容展示及控制器定义等核心功能。通过配置不同路由地址对应的模板和控制器，实现了主页面、图书页面、个人中心页面、设置页面和联系人页面的动态加载。

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

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