AngularJS路由使用案例-优快云博客

本文介绍了一个AngularJS应用中实现页面路由的具体案例。通过定义不同URL路径对应的模板文件，实现了简单的多页面布局效果，并且设置了默认重定向页面。

AngularJS路由使用案例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>AngularJS路由使用案例</title>
 6         <script type="text/javascript" src="../js/angular.min.js"></script>
 7         <script type="text/javascript" src="../js/angular-route.min.js"></script>
 8     </head>
 9     <body ng-app="myapp">
10         <div>
11             <h1>在你我他学习吧，你可以学习到如下技术：</h1>
12             <a href="#/JAVAEE"></a>
13             <a href="#/AngularJS"></a>
14             <a href="#/EasyUI"></a>
15             <a href="#/MySQL"></a>
16         </div>
17         <!--路由加载后，更新变化的内容-->
18         <div ng-view></div>
19         <div>
20             <h1>footer</h1>
21         </div>
22     </body>
23     <script type="text/javascript">
24         //定义myapp模块
25         var myapp = angular.module("myapp",["ngRoute"]);
26         //配置模块的路由
27         myapp.config(["$routeProvider",function($routeProvider){
28             $routeProvider.when('/JAVAEE',{
29                 templateUrl:'javaee.html'
30             }).when('/AngularJS',{
31                 templateUrl:'angularjs.html'
32             }).when('/EasyUI',{
33                 templateUrl:'easyui.html'
34             }).when('/MySQL',{
35                 templateUrl:'mysql.html'
36             }).otherwise({
37                 redirectTo:'JAVAEE'
38             });
39         }]);
40     </script>
41 </html>