Angular.js路由简单小案例


代码案例：

 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>

Angular.js路由 简单小案例

Angular.js路由简单小案例