Angular.js路由简单小案例-优快云博客

本文介绍了一个简单的AngularJS路由示例，展示了如何通过AngularJS路由功能实现不同页面间的切换。包括了首页、分页1和分页2等页面的设置方法，并提供了一个完整的HTML示例代码。

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


代码案例：

 1 <html>
 2   <head>
 3       <meta charset="utf-8">
 4     <title>AngularJS 路由实例</title>
 5   </head>
 6   <body ng-app='routingDemoApp'>
 7    
 8     <h2>AngularJS 路由应用</h2>
 9     <ul>
10       <li><a href="#/">首页</a></li>
11       <li><a href="#/computers">分页1</a></li>
12       <li><a href="#/printers">分页2</a></li>
13       <li><a href="#/blabla">其他</a></li>
14     </ul>
15      
16     <div ng-view></div>
17     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
18     <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> //注意：要引入Angular-route.js
19     <script>
20       angular.module('routingDemoApp',['ngRoute'])   //注意：依赖注入 ngRoute 模块
21       .config(['$routeProvider', function($routeProvider){
22         $routeProvider
23         .when('/',{template:'这是首页'})
24         .when('/computers',{template:'这是分页1的页面'})
25         .when('/printers',{template:'这是分页2页面'})
26         .otherwise({redirectTo:'/'});    //找不到路径时跳转的页面
27       }]);
28     </script>
29    
30    
31   </body>
32 </html>