AngularJS路由使用案例

时间:2022-01-02 20:24:10

AngularJS路由使用案例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS路由使用案例</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-route.min.js"></script>
</head>
<body ng-app="myapp">
<div>
<h1>在你我他学习吧,你可以学习到如下技术:</h1>
<a href="#/JAVAEE"></a>
<a href="#/AngularJS"></a>
<a href="#/EasyUI"></a>
<a href="#/MySQL"></a>
</div>
<!--路由加载后,更新变化的内容-->
<div ng-view></div>
<div>
<h1>footer</h1>
</div>
</body>
<script type="text/javascript">
//定义myapp模块
var myapp = angular.module("myapp",["ngRoute"]);
//配置模块的路由
myapp.config(["$routeProvider",function($routeProvider){
$routeProvider.when('/JAVAEE',{
templateUrl:'javaee.html'
}).when('/AngularJS',{
templateUrl:'angularjs.html'
}).when('/EasyUI',{
templateUrl:'easyui.html'
}).when('/MySQL',{
templateUrl:'mysql.html'
}).otherwise({
redirectTo:'JAVAEE'
});
}]);
</script>
</html>

javaee.html代码:

<h1>javaee</h1>

angularjs.html代码:

<h1>angular</h1>

easyui.html代码:

<h1>easyui</h1>

mysql.html代码:

<h1>mysql</h1>