AngularJS是一个强大的前端JavaScript框架，由Google维护，主要用于构建单页应用程序（SPA，Single Page Applications）。它提供了许多特性，包括数据绑定、依赖注入、指令和路由等，以简化Web应用开发。本篇文章将深入探讨AngularJS中的路由功能，以及如何在实际项目中使用。路由是AngularJS中用于管理应用程序不同视图（views）和状态的核心机制。路由允许用户通过URL导航到不同的页面，同时确保页面状态与URL紧密关联。在AngularJS中，路由是通过ngRoute模块提供的，这个模块包含了一个名为$routeProvider的服务，它允许开发者定义应用程序的路由配置。要在项目中启用路由，需要在应用模块中注入ngRoute模块。这通常在应用的主模块定义中完成：


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

接下来，我们需要配置路由。这涉及使用$routeProvider服务定义每个路由，包括其对应的视图模板和控制器：


app.config(function($routeProvider) {

  $routeProvider

    .when('/', {

      templateUrl: 'home.html',

      controller: 'HomeController'

    })

    .when('/about', {

      templateUrl: 'about.html',

      controller: 'AboutController'

    })

    .when('/contact', {

      templateUrl: 'contact.html',

      controller: 'ContactController'

    })

    .otherwise({

      redirectTo: '/'

    });

});

在上面的例子中，我们定义了三个路由：根路径/对应于home.html模板和HomeController，/about对应于about.html和AboutController，/contact对应于contact.html和ContactController。otherwise方法用于处理未匹配到任何路由的情况，这里重定向至根路径。在HTML中，我们使用指令来指定视图的插入点，当路由改变时，这个位置会加载相应的模板：


<div ng-app='\"myApp\"'>

  <a target='_blank' href="\" #/\"'>Home</a>

  <a target='_blank' href="\" #/about\"'>About</a>

  <a target='_blank' href="\" #/contact\"'>Contact</a>

  <div ng-view=""></div>

</div>

在上述代码中，我们创建了链接到各个路由的HTML元素，ng-view指令会根据当前的路由加载相应的模板。此外，路由可以带有参数，以便传递动态数据。例如：


.when('/user/:userId', {

  templateUrl: 'user-profile.html',

  controller: 'UserProfileController'

})

在这个路由中，:userId是一个参数，可以在UserProfileController中通过$routeParams获取：


app.controller('UserProfileController', function($scope, $routeParams) {

  var userId = $routeParams.userId;

  //使用userId获取用户信息

});