异常教程

AngularJS 路由（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，单页应用（SPA）因其流畅的用户体验和高效的资源利用而备受青睐。AngularJS 作为早期的主流前端框架，其路由系统为开发者提供了强大的导航管理能力。本文将从基础概念出发，逐步讲解如何通过 AngularJS 路由实现页面跳转、参数传递、动态加载等功能，并结合实际案例帮助读者快速上手。无论你是编程新手还是有一定经验的开发者，都能通过本文掌握 AngularJS 路由的核心逻辑。

AngularJS 路由的核心概念

1. 什么是路由？

路由（Routing）是 Web 应用中控制页面跳转和视图切换的核心机制。在传统多页应用（MPA）中，每次跳转都会重新加载整个页面，而单页应用通过路由实现局部更新，仅加载和渲染需要变化的组件，从而提升性能。

在 AngularJS 中，路由由 ngRoute 模块提供支持。它将 URL 地址与视图（View）和控制器（Controller）关联，形成“URL → 组件”的映射关系。例如，访问 /users 时，路由会加载用户列表的 HTML 模板和对应的控制器逻辑。

比喻：路由系统就像一座城市的导航系统。URL 是目的地的地址，而路由引擎则是司机，根据地址找到对应的“目的地”（视图和逻辑），最终让用户看到正确的界面。

2. 核心组件与流程

AngularJS 路由主要依赖以下三个关键组件：

组件名称作用
$routeProvider配置路由规则，将 URL 路径与视图、控制器绑定。
$route提供当前路由的参数和信息，如 current 属性存储激活的路由状态。
$location操作浏览器地址栏，支持 URL 的读写和监听，是路由的核心驱动引擎。

工作流程：

  1. 用户访问 URL，触发 $location 监听事件。
  2. AngularJS 根据 URL 匹配路由表中的路径规则。
  3. 加载匹配路径对应的模板（HTML）和控制器（JS）。
  4. 将模板渲染到 <div ng-view></div> 容器中（默认容器）。

AngularJS 路由的配置方法

1. 模块配置与路由表

步骤 1：引入 ngRoute 模块

在 AngularJS 项目中，需先通过 angular.module 注册依赖：

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

步骤 2：配置路由规则

通过 .config() 方法注入 $routeProvider，定义路由表：

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutController'
    })
    .otherwise({
      redirectTo: '/home' // 默认跳转路径
    });
}]);

关键参数说明：

  • templateUrl：指向 HTML 模板文件的路径。
  • controller：绑定的控制器名称。
  • resolve（可选）：在路由激活前执行异步操作（如 API 请求）。

比喻：路由表就像一本电话簿，记录着每个 URL 对应的“联系人”（模板和控制器）。当用户拨打电话（访问 URL）时，系统会自动找到对应的联系人并建立连接。

2. 路由参数与动态路径

路径参数（Path Parameters）

通过 :paramName 在路径中定义动态参数，例如：

$routeProvider.when('/user/:id', { /* ... */ });

在控制器中，可通过 $routeParams 服务获取参数值：

app.controller('UserController', ['$scope', '$routeParams', function($scope, $routeParams) {
  $scope.userId = $routeParams.id; // 获取 URL 中的用户 ID
}]);

查询参数（Query Parameters）

URL 中的查询参数（如 ?page=2）可通过 $location.search() 获取：

var page = $location.search().page; // 获取 page 参数的值

案例：假设用户访问 /user/123?theme=dark，则：

  • :id 对应 123，存储在 $routeParams.id。
  • theme=dark 存储在 $location.search().theme。

3. 懒加载与异步加载

通过 resolve 属性实现路由的懒加载，即在路由激活前动态加载资源：

$routeProvider.when('/products', {
  templateUrl: 'views/products.html',
  controller: 'ProductsCtrl',
  resolve: {
    productsData: ['$http', function($http) {
      return $http.get('/api/products'); // 等待 API 响应后再渲染页面
    }]
  }
});

在控制器中，可以直接使用 productsData：

app.controller('ProductsCtrl', ['$scope', 'productsData', function($scope, productsData) {
  $scope.products = productsData.data;
}]);

优势：避免在页面加载时一次性加载所有资源，提升初始加载速度。

AngularJS 路由的高级技巧

1. 路由守卫（Route Guards）

通过 resolve 或自定义服务实现路由权限控制。例如，仅允许已登录用户访问 /dashboard：

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/dashboard', {
    templateUrl: 'views/dashboard.html',
    controller: 'DashboardCtrl',
    resolve: {
      authCheck: ['AuthService', function(AuthService) {
        if (!AuthService.isLoggedIn()) {
          window.location.href = '/login'; // 未登录时跳转到登录页
        }
      }]
    }
  });
}]);

2. 嵌套路由（Nested Routes）

通过 views 属性实现多级路由，例如在 /users 页面中嵌套 /users/profile：

$routeProvider.when('/users', {
  templateUrl: 'views/users.html',
  controller: 'UsersCtrl',
  resolve: { /* ... */ },
  views: {
    'profile@users': {
      templateUrl: 'views/user-profile.html',
      controller: 'UserProfileCtrl'
    }
  }
});

注意：嵌套路由需在父模板中定义 <div ui-view="profile"></div>。

实战案例：构建用户管理系统

1. 项目结构

my-app/  
├── index.html  
├── scripts/  
│   └── app.js  
└── views/  
    ├── home.html  
    ├── users.html  
    └── user-detail.html

2. 配置路由表（app.js）

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

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl'
    })
    .when('/users', {
      templateUrl: 'views/users.html',
      controller: 'UsersCtrl',
      resolve: {
        users: ['$http', function($http) {
          return $http.get('/api/users');
        }]
      }
    })
    .when('/users/:id', {
      templateUrl: 'views/user-detail.html',
      controller: 'UserDetailCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);

3. 控制器逻辑

// HomeCtrl.js
app.controller('HomeCtrl', ['$scope', function($scope) {
  $scope.message = "Welcome to User Management System!";
}]);

// UsersCtrl.js
app.controller('UsersCtrl', ['$scope', 'users', function($scope, users) {
  $scope.users = users.data;
}]);

// UserDetailCtrl.js
app.controller('UserDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
  $scope.userId = $routeParams.id;
}]);

4. HTML 模板示例（users.html）

<div>
  <h2>User List</h2>
  <ul>
    <li ng-repeat="user in users">
      <a ng-href="/users/{{user.id}}">{{user.name}}</a>
    </li>
  </ul>
</div>

结论

AngularJS 路由是构建单页应用的核心能力之一。通过本文的讲解，读者可以掌握从基础配置到高级功能的完整流程，并通过实际案例理解路由参数、懒加载和权限控制等关键技巧。

对于初学者，建议从简单路由开始，逐步尝试参数化路径和动态加载；中级开发者则可探索嵌套路由和自定义守卫，以满足复杂业务需求。随着 AngularJS 的逐渐退出主流，但其路由设计理念仍对现代框架（如 Angular 和 Vue Router）有重要影响，掌握其原理能为后续学习打下坚实基础。

希望本文能帮助你顺利实现 AngularJS 路由的开发，打造流畅的单页应用体验！

最新发布

查看更多文章