课程表

AngularJS 教程

AngularJS 实例/手册

工具箱
速查手册

AngularJS 路由

当前位置：免费教程 » JS/JS库/框架 » AngularJS

本章节我们将为大家介绍 AngularJS 路由。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://w3xue.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

  1. http://w3xue.com/#/first
  2. http://w3xue.com/#/second
  3. http://w3xue.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://w3xue.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。

接下来我们来看一个简单的实例：

  1. <html>
  2.     <head>
  3.     	<meta charset="utf-8">
  4.         <title>AngularJS 路由实例 - W3xue教程</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">电脑</a></li>
  12.             <li><a href="#/printers">打印机</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>
  19.         <script>
  20.             angular.module('routingDemoApp',['ngRoute'])
  21.             .config(['$routeProvider', function($routeProvider){
  22.                 $routeProvider
  23.                 .when('/',{template:'这是首页页面'})
  24.                 .when('/computers',{template:'这是电脑分类页面'})
  25.                 .when('/printers',{template:'这是打印机页面'})
  26.                 .otherwise({redirectTo:'/'});
  27.             }]);
  28.         </script>
  29.      
  30.      
  31.     </body>
  32. </html>

尝试一下 »

实例解析：

  • 1、载入了实现路由的 js 文件：angular-route.js。

  • 2、包含了 ngRoute 模块作为主应用模块的依赖模块。

    1. angular.module('routingDemoApp',['ngRoute'])

  • 3、使用 ngView 指令。

    1. <div ng-view></div>

    该 div 内的 HTML 内容会根据路由的变化而变化。

  • 4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

    1. module.config(['$routeProvider', function($routeProvider){
    2.     $routeProvider
    3.         .when('/',{template:'这是首页页面'})
    4.         .when('/computers',{template:'这是电脑分类页面'})
    5.         .when('/printers',{template:'这是打印机页面'})
    6.         .otherwise({redirectTo:'/'});
    7. }]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

  • 第一个参数是 URL 或者 URL 正则规则。
  • 第二个参数是路由配置对象。

路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

  1. $routeProvider.when(url, {
  2.     template: string,
  3.     templateUrl: string,
  4.     controller: string, function 或 array,
  5.     controllerAs: string,
  6.     redirectTo: string, function,
  7.     resolve: object<key, function>
  8. });

参数说明：

  • template:

    如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

    1. .when('/computers',{template:'这是电脑分类页面'})

  • templateUrl:

    如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

    1. $routeProvider.when('/computers', {
    2.     templateUrl: 'views/computers.html',
    3. });

    以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

  • controller:

    function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

  • controllerAs:

    string类型，为controller指定别名。

  • redirectTo:

    重定向的地址。

  • resolve:

    指定当前controller所依赖的其他模块。

实例

  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  5. <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
  6.  
  7. <script type="text/javascript">
  8. angular.module('ngRouteExample', ['ngRoute'])
  9. .controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
  10. .controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
  11. .config(function ($routeProvider) {
  12.     $routeProvider.
  13.     when('/home', {
  14.         templateUrl: 'embedded.home.html',
  15.         controller: 'HomeController'
  16.     }).
  17.     when('/about', {
  18.         templateUrl: 'embedded.about.html',
  19.         controller: 'AboutController'
  20.     }).
  21.     otherwise({
  22.         redirectTo: '/home'
  23.     });
  24. });
  25. </script>
  26.  
  27.   
  28. </head>
  29.  
  30. <body ng-app="ngRouteExample" class="ng-scope">
  31.   <script type="text/ng-template" id="embedded.home.html">
  32.       <h1> Home </h1>
  33.   </script>
  34.  
  35.   <script type="text/ng-template" id="embedded.about.html">
  36.       <h1> About </h1>
  37.   </script>
  38.  
  39.   <div> 
  40.     <div id="navigation">  
  41.       <a href="#/home">Home</a>
  42.       <a href="#/about">About</a>
  43.     </div>
  44.       
  45.     <div ng-view="">
  46.     </div>
  47.   </div>
  48. </body>
  49. </html>

尝试一下 »

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号