---

AngularJS 路由

AngularJS 是一个很强大的前端框架，其中路由是一项重要的功能。路由可以让单页应用程序(SPA)的页面间进行跳转和切换，从而提升用户体验。本文将详细介绍 AngularJS 路由的相关知识。

路由模块的导入

在使用 AngularJS 路由时，需要导入路由模块并注入到应用中。导入方式如下：

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

其中，ngRoute 是 AngularJS 提供的路由模块。

路由配置

路由配置主要包括两个方面：路由路径和路由控制器。路由路径是为了设置当访问哪个路径时，应该显示哪个视图。而路由控制器则负责对视图进行控制。

路由配置可以使用 routeProvider 服务进行配置。例如：

app.config(function($routeProvider) {   
  $routeProvider
    .when('/', {
        templateUrl: 'home.html',
        controller: 'homeCtrl'
    })
    .when('/about', {
        templateUrl: 'about.html',
        controller: 'aboutCtrl'
    })
    .otherwise({
        redirectTo: '/'
    }); 
});

上述代码设置了两个路由路径 ‘/’ 和 ‘/about’。当访问 ‘/’ 路径时，显示的视图为 home.html，并且对应的控制器是 homeCtrl。当访问 ‘/about’ 路径时，显示的视图为 about.html，并且对应的控制器是 aboutCtrl。当访问其他任意路径时，会自动跳转到 ‘/’ 路径。

路由链接

为了跳转到不同的路径，我们需要在 HTML 中添加路由链接。路由链接可以使用 ngRoute 指令进行设置。例如：

<ul>
  <li><a href="#/">Home</a></li>
  <li><a href="#/about">About</a></li>   
</ul>

上述代码设置了两个路由链接，其中 # 后面跟着需要跳转的路径。

另外，AngularJS 还提供了 ng-href 和 ng-click 指令来代替 href 属性。这样可以在不支持 hash 模式的浏览器中也能正常工作，例如：

<ul>
  <li><a ng-href="#/">Home</a></li>
  <li><a ng-href="#/about" ng-click="goToAbout()">About</a></li>   
</ul>

上述代码中，ng-href 指令用来设置链接，ng-click 指令用来设置点击后执行的函数。这里的 goToAbout() 函数可以在控制器中定义。

路由参数

有时候我们需要在路由路径中传递参数，以便显示相应的内容。AngularJS 路由支持通过路由路径传递参数。

路由路径的形式如下：

'/user/:userId/profile'

其中 :userId 表示传递的参数，可以在控制器中通过 $routeParams 服务获取。例如：

$routeProvider
    .when('/user/:userId', {
        templateUrl: 'user.html',
        controller: 'userCtrl'
    });

上述代码中，当访问 ‘/user/123’ 路径时，将跳转到 user.html 视图，并且对应的控制器是 userCtrl。可以在 userCtrl 中获取 userId 参数：

app.controller('userCtrl', function($routeParams) {
  $scope.userId = $routeParams.userId;
});

总结

AngularJS 路由是一个非常强大的功能，能够让单页应用的页面跳转和切换变得更加流畅和自然。本文介绍了路由模块的导入、路由配置、路由链接以及路由参数四个方面的知识。希望能对大家了解 AngularJS 路由有所帮助。