在 angularjs 中使用路由（angular-ui-router）

安装

我们可以通过 npm 去安装 angular-ui-router

npm install angular-ui-router

路由声明

为我们的应用程序添加路由声明，使用 $stateProvider 服务为应用程序添加 state 即可。

代码示例 1

angular.module('app').config([
  '$stateProvider',
  function ($stateProvider) {
    $stateProvider.state('cat', {
      url: '/cat',
      templateUrl: 'views/cat.html',
      controller: 'CatController',
    });
  },
]);

嵌套路由

路由之间可以嵌套，并且子路由可以访问父路由 $scope 中的值（这个过程类似于 JavaScript 中的委托。

路由参数

每个路由可以附带参数，参数格式可以分为 2 种：

1. 查询字符串参数，如 /cat?a=123&b=456

2. 路径参数，如 /cat/123/456

代码示例 2

angular.module('app').config([
  '$stateProvider',
  function ($stateProvider) {
    $stateProvider.state('cat', {
      // 声明 query_string 参数，此处的冒号是可选的
      url: '/cat?a&b',
      templateUrl: 'views/cat.html',
      controller: 'CatController',
    });
  },
]);

代码示例 3

angular.module('app').config([
  '$stateProvider',
  function ($stateProvider) {
    $stateProvider.state('cat', {
      // 声明 path 参数，此处冒号是必须的
      url: '/cat/:a/:b',
      templateUrl: 'views/cat.html',
      controller: 'CatController',
    });
  },
]);

获取路由参数

代码示例 2 和代码示例 3 展示了如何配置路由参数，在 CatController 中可以通过$stateParams服务访问这些参数，见代码示例 4

代码示例 4

angular.module('app').controller('CatController', [
  '$stateParams',
  function ($stateParams) {
    const a = $stateParams.a; // 123
    const b = $stateParams.b; // 456
  },
]);

渲染视图

通过 ui-view 指令指定一个元素，作为路由组件的渲染容器。如<div ui-view></div>。

路由间的跳转

通过 $state.go() 方法，可以在路由之间跳转，而不是手动拼接 URL。

代码示例：

$scope.onClickEdit = function () {
  // 跳转到 cat 对应的组件，并且附带了两个参数，参数表现为查询字符串参数还是路径参数根据 cat 的 URL 定义变化。
  $state.go('cat', { a: 123, b: 456 });
};

刷新组件

通过 $state.reload() 方法，可以刷新当前组件及其子组件。对比 location.reload() 方法的好处是不用刷新整个应用，为我们省去了大量资源加载的时间。

注意： 因为 $state.reload() 方法会导致组件重新实例化，因此我们需要考虑组件的副作用的影响。