Angular.js - 通过 $route 或 $routeParams 访问参数

JS

Angular.JS 是一个流行的 JavaScript 框架，用于构建单页面应用（SPA）。在开发 SPA 时，我们经常需要访问 URL 中的参数。Angular.JS 提供了两个服务，即 $route 和 $routeParams，用于方便地获取 URL 参数。

$route 服务是 Angular.JS 内置的路由服务，它可以监听 URL 的变化，并将对应的参数传递给控制器。通过 $route 服务，我们可以轻松地访问 URL 中的参数。

下面是一个示例代码，展示如何使用 $route 服务获取 URL 参数：

Javascript
// 在定义 Angular.JS 应用时，注入 $route 服务
var app = angular.module('myApp', ['ngRoute']);
// 配置路由规则
app.config(function($routeProvider) {
  $routeProvider
    .when('/user/:id', {
      templateUrl: 'user.html',
      controller: 'UserController'
    });
});
// 定义控制器
app.controller('UserController', function($scope, $route) {
  // 使用 $route.current.params 获取 URL 参数
  $scope.userId = $route.current.params.id;
});

在上面的代码中，我们配置了一个路由规则，当 URL 匹配到 /user/:id 时，会加载 user.html 模板，并且使用 UserController 控制器。

在 UserController 控制器中，我们注入了 $route 服务，并通过 $route.current.params 获取 URL 参数。在这个例子中，我们将获取到的参数赋值给 $scope.userId，以便在视图中使用。

$routeParams 服务是 Angular.JS 提供的另一个方便获取 URL 参数的服务。与 $route 不同的是，$routeParams 可以直接在控制器中使用，而不需要依赖 $route 服务。

下面是一个示例代码，展示如何使用 $routeParams 服务获取 URL 参数：

Javascript
// 在定义 Angular.JS 应用时，注入 ngRoute 模块
var app = angular.module('myApp', ['ngRoute']);
// 配置路由规则
app.config(function($routeProvider) {
  $routeProvider
    .when('/user/:id', {
      templateUrl: 'user.html',
      controller: 'UserController'
    });
});
// 定义控制器
app.controller('UserController', function($scope, $routeParams) {
  // 使用 $routeParams 获取 URL 参数
  $scope.userId = $routeParams.id;
});

在上面的代码中，我们同样配置了一个路由规则，当 URL 匹配到 /user/:id 时，会加载 user.html 模板，并且使用 UserController 控制器。

与前一个例子不同的是，我们在 UserController 控制器中注入了 $routeParams 服务，并通过 $routeParams.id 获取 URL 参数。同样地，我们将获取到的参数赋值给 $scope.userId，以在视图中使用。

通过 $route 或 $routeParams 服务，我们可以轻松地获取 URL 中的参数。无论是使用 $route 还是 $routeParams，都能够方便地在控制器中获取参数，并在视图中使用。这使得我们能够更灵活地开发单页面应用，并根据不同的 URL 参数展示不同的内容。

无论是在 $route 还是 $routeParams 中获取 URL 参数，都是 Angular.JS 提供的方便实用的功能，让我们能够更好地处理单页面应用的开发需求。