首页 > 代码库 > Angular之ngRoute与uiRoute

Angular之ngRoute与uiRoute

2024-10-19 03:29:39   212人阅读

ngRoute不支持嵌套路由

用法如下：

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
 6     <title>angular 路由</title>
 7 </head>
 8 <style>
 9     ul li{
10         list-style: none;
11         float: left;
12         padding: 10px;
13     }
14 </style>
15 <body>
16     <ul>
17         <li><a href="#page1">page1</a></li>
18         <li><a href="#page2">page2</a></li>
19         <li><a href="#page3">page3</a></li>
20     </ul>
21     <div ng-view></div>
22 </body>
23 <script src="./script/libs/angularjs.1.4.6.min.js"></script>
24 <script src="./script/libs/angular-route.js"></script>
25 <script>
26     angular.module(‘myApp‘,[‘ngRoute‘])
27     .config(function($routeProvider){
28         $routeProvider.when("/page1",{
29             template:"this is page1"
30         }).when("/page2",{
31             template:"this is page2"
32         }).when("/page3",{
33             template:"this is page3"
34         }).otherwise({
35             redirectTo:"/page1"   //默认路由
36         })
37     });
38 </script>
39 </html>

uiRouter支持嵌套路由

用法如下：

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
 6     <title>angular路由</title>
 7 </head>
 8 <style>
 9     ul li{
10         list-style: none;
11         float: left;
12         padding: 10px;
13     }
14 </style>
15 <body>
16     <ul>
17         <li><a href="#page1">page1</a></li>
18         <li><a href="#page2">page2</a></li>
19         <li><a href="#page3">page3</a></li>
20     </ul>
21     <div ui-view></div>
22 </body>
23 <script src="./script/libs/angularjs.1.4.6.min.js"></script>
24 <script src="./script/libs/angular-ui-router.js"></script>
25 <script>
26     angular.module(‘myApp‘,[‘ui.router‘])
27     .config(function($stateProvider,$urlRouterProvider){
28         $stateProvider.state(‘page1‘,{
29             url:"/page1",
30             template:"this is p1"
31         }).state(‘page2‘,{
32             url:"/page2",
33             template:"this is p2"
34         }).state(‘page3‘,{
35             url:"/page3",
36             template:"this is p3"
37         });
38         $urlRouterProvider.otherwise(‘page1‘);
39     });
40 </script>
41 </html>

 

Angular之ngRoute与uiRoute


联系
我们