参考手册
AngularJS 动画
AngularJS 应用程序

AngularJS 路由

ngRoute 模块能让您的应用程序成为单页应用程序。

在 AngularJS 中路由是什么?

如果您想导航到应用程序中的不同页面，但又希望该应用程序是 SPA（单页面应用程序），且无需重新加载页面，则可以使用 ngRoute 模块。

ngRoute 模块将应用程序 路由 到不同的页面，而无需重新加载整个应用程序。

导航到 "red.htm", "green.htm", 和 "blue.htm":

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!red">Red</a>
  11. <a href="#!green">Green</a>
  12. <a href="#!blue">Blue</a>
  14. <div ng-view=""></div>
  16. <script>
  17. var app = angular.module("myApp", ["ngRoute"]);
  18. app.config(function($routeProvider) {
  19.     $routeProvider
  20.     .when("/", {
  21.         templateUrl : "main.htm"
  22.     })
  23.     .when("/red", {
  24.         templateUrl : "red.htm"
  25.     })
  26.     .when("/green", {
  27.         templateUrl : "green.htm"
  28.     })
  29.     .when("/blue", {
  30.         templateUrl : "blue.htm"
  31.     });
  32. });
  33. </script>
  35. <p>点击链接导航到 "red.htm", "green.htm", "blue.htm", 或者返回 "main.htm"</p>
  36. </body>
  37. </html>
运行一下

该怎么做?

要使应用程序为路由做好准备，必须包含 AngularJS 路由模块:

  1.   <script src="https://cankaoshouce.com/js/angular-route.js"></script>

然后，必须将 ngRoute 作为依赖项添加到应用程序模块中:

  1.   var app = angular.module("myApp", ["ngRoute"]);

现在，您的应用程序可以访问 route 模块，该模块提供 $routeProvider。

使用 $routeProvider 在应用程序中配置不同的路由:

  1.  app.config(function($routeProvider) {
  2.  $routeProvider
  3.  .when("/", {
  4.     templateUrl : "main.htm"
  5.  })
  6.  .when("/red", {
  7.     templateUrl : "red.htm"
  8.  })
  9.  .when("/green", {
  10.   templateUrl :   "green.htm"
  11.  })
  12.  .when("/blue", {
  13.   templateUrl : "blue.htm"
  14.    });
  15. });

从哪里开始?

应用程序需要一个容器来放置路由提供的内容。

此容器是 ng-view 指令。

在应用程序中包含 ng-view 指令有三种不同的方式:

实例:
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!red">Red</a>
  11. <a href="#!green">Green</a>
  12. <a href="#!blue">Blue</a>
  14. <div ng-view=""></div>
  16. <script>
  17. var app = angular.module("myApp", ["ngRoute"]);
  18. app.config(function($routeProvider) {
  19.     $routeProvider
  20.     .when("/", {
  21.         templateUrl : "main.htm"
  22.     })
  23.     .when("/red", {
  24.         templateUrl : "red.htm"
  25.     })
  26.     .when("/green", {
  27.         templateUrl : "green.htm"
  28.     })
  29.     .when("/blue", {
  30.         templateUrl : "blue.htm"
  31.     });
  32. });
  33. </script>
  35. <p>点击链接</p>
  37. <p>本例使用 ng-view 指令作为 DIV 元素的属性。</p>
  38. </body>
  39. </html>
运行一下
实例:
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!red">Red</a>
  11. <a href="#!green">Green</a>
  12. <a href="#!blue">Blue</a>
  14. <ng-view></ng-view>
  16. <script>
  17. var app = angular.module("myApp", ["ngRoute"]);
  18. app.config(function($routeProvider) {
  19.     $routeProvider
  20.     .when("/", {
  21.         templateUrl : "main.htm"
  22.     })
  23.     .when("/red", {
  24.         templateUrl : "red.htm"
  25.     })
  26.     .when("/green", {
  27.         templateUrl : "green.htm"
  28.     })
  29.     .when("/blue", {
  30.         templateUrl : "blue.htm"
  31.     });
  32. });
  33. </script>
  35. <p>点击链接</p>
  37. <p>本例使用 ng-view 指令作为 DIV 元素的属性。</p>
  38. </body>
  39. </html>
运行一下
实例:
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!red">Red</a>
  11. <a href="#!green">Green</a>
  12. <a href="#!blue">Blue</a>
  14. <div class="ng-view"></div>
  16. <script>
  17. var app = angular.module("myApp", ["ngRoute"]);
  18. app.config(function($routeProvider) {
  19.     $routeProvider
  20.     .when("/", {
  21.         templateUrl : "main.htm"
  22.     })
  23.     .when("/red", {
  24.         templateUrl : "red.htm"
  25.     })
  26.     .when("/green", {
  27.         templateUrl : "green.htm"
  28.     })
  29.     .when("/blue", {
  30.         templateUrl : "blue.htm"
  31.     });
  32. });
  33. </script>
  35. <p>点击链接</p>
  37. <p>本例使用 ng-view 指令作为 DIV 元素的属性。</p>
  38. </body>
  39. </html>
运行一下

应用程序只能有一个 ng-view 指令，这将是路由提供的所有视图的占位符。

$routeProvider

使用 $routeProvider 您可以定义用户单击链接时要显示的页面。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!london">City 1</a>
  11. <a href="#!paris">City 2</a>
  13. <p>点击链接阅读有关伦敦和巴黎的信息。</p>
  15. <div ng-view=""></div>
  17. <script>
  18. var app = angular.module("myApp", ["ngRoute"]);
  19. app.config(function($routeProvider) {
  20.     $routeProvider
  21.     .when("/", {
  22.         templateUrl : "main.htm"
  23.     })
  24.     .when("/london", {
  25.         templateUrl : "london.htm"
  26.     })
  27.     .when("/paris", {
  28.         templateUrl : "paris.htm"
  29.     });
  30. });
  31. </script>
  33. </body>
  34. </html>
运行一下

使用应用程序的 config 方法定义 $routeProvider。当应用程序加载时，将执行在 config 方法中注册的工作。

控制器

使用 $routeProvider，您还可以为每个 "view" 定义一个控制器。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!london">City 1</a>
  11. <a href="#!paris">City 2</a>
  13. <p>点击链接</p>
  15. <p>请注意，每个 "view" 都有自己的控制器，每个控制器都给 "msg" 变量一个值。</p>
  17. <div ng-view=""></div>
  19. <script>
  20. var app = angular.module("myApp", ["ngRoute"]);
  21. app.config(function($routeProvider) {
  22.     $routeProvider
  23.     .when("/", {
  24.         templateUrl : "main.htm",
  25.     })
  26.     .when("/london", {
  27.         templateUrl : "london.htm",
  28.         controller : "londonCtrl"
  29.     })
  30.     .when("/paris", {
  31.         templateUrl : "paris.htm",
  32.         controller : "parisCtrl"
  33.     });
  34. });
  35. app.controller("londonCtrl", function ($scope) {
  36.     $scope.msg = "I love London";
  37. });
  38. app.controller("parisCtrl", function ($scope) {
  39.     $scope.msg = "I love Paris";
  40. });
  42. </script>
  44. </body>
  45. </html>
运行一下

"london.htm" 和 "paris.htm" 是普通的 HTML 文件，您可以像添加 AngularJS 应用程序的任何其他 HTML 部分一样添加 AngularJS 表达式。

这些文件看起来像这样:

london.htm

  1. <h2>London</h2>
  2. <h3>London is the capital city of England.</h3>
  3. <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  4. <p>{{msg}}</p>

paris.htm

  1. <h2>Paris</h2>
  2. <h3>Paris is the capital city of France.</h3>
  3. <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  4. <p>{{msg}}</p>

模板

在前面的示例中，我们使用了 $routeProvider.when 方法中的 templateUrl 属性。

您还可以使用 template 属性，它允许您直接在属性值中编写 HTML，而不引用页面。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!banana">Banana</a>
  11. <a href="#!tomato">Tomato</a>
  13. <p>点击链接更改内容。</p>
  15. <p>ng-view 指令中显示的 HTML 写在 $routeProvider 的 template 属性中。当你使用方法时。</p>
  17. <div ng-view=""></div>
  19. <script>
  20. var app = angular.module("myApp", ["ngRoute"]);
  21. app.config(function($routeProvider) {
  22.     $routeProvider
  23.     .when("/", {
  24.         template : "<h2>Main</h2><p>Click on the links to change this content</p>"
  25.     })
  26.     .when("/banana", {
  27.         template : "<h2>Banana</h2><p>Bananas contain around 75% water.</p>"
  28.     })
  29.     .when("/tomato", {
  30.         template : "<h2>Tomato</h2><p>Tomatoes contain around 95% water.</p>"
  31.     });
  32. });
  33. </script>
  35. </body>
  36. </html>
运行一下

otherwise 方法

在前面的示例中，我们使用了 $routeProvider 的 when 方法。

您还可以使用 otherwise 方法，这是其他方法都无法匹配时的默认路由。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <script src="https://cankaoshouce.com/js/angular/angular-route.js"></script>
  6. <body ng-app="myApp">
  8. <p><a href="#/!">Main</a></p>
  10. <a href="#!banana">Banana</a>
  11. <a href="#!tomato">Tomato</a>
  13. <p>点击链接更改内容。</p>
  15. <p>使用 "otherwise" 方法定义在没有单击任何链接时显示的内容。</p>
  17. <div ng-view=""></div>
  19. <script>
  20. var app = angular.module("myApp", ["ngRoute"]);
  21. app.config(function($routeProvider) {
  22.     $routeProvider
  23.     .when("/banana", {
  24.         template : "<h2>Banana</h2><p>Bananas contain around 75% water.</p>"
  25.     })
  26.     .when("/tomato", {
  27.         template : "<h2>Tomato</h2><p>Tomatoes contain around 95% water.</p>"
  28.     })
  29.     .otherwise({
  30.         template : "<h2>Nothing</h2><p>Nothing has been selected</p>"
  31.     });
  32. });
  33. </script>
  35. </body>
  36. </html>
运行一下
AngularJS 动画
AngularJS 应用程序

分类导航