JavaScript、HTML、AngularJS で ui-sref を使ってコントローラーにパラメータを渡す方法

2024-05-08

UI-Router で ui-sref を使ってコントローラーにパラメータを渡す方法

AngularJS の UI-Router で、ui-sref ディレクティブを使用して、ステート遷移時にコントローラーにパラメータを渡す方法について説明します。

例

以下の例では、user/:id というステートに遷移し、id パラメータをコントローラーに渡します。

HTML

<a ui-sref="user({ id: 123 })">ユーザー詳細へ</a>

JavaScript

angular.module('app')
  .controller('UserController', function($scope, $stateParams) {
    $scope.userId = $stateParams.id;
    // ...
  });

解説

ui-sref ディレクティブ内に、遷移先のステート名を指定します。
ステート名の後にカッコ書きで囲み、パラメータをオブジェクト形式で記述します。
パラメータ名はキー、パラメータの値は値として記述します。
コンポーネント側では、$stateParams サービスを注入し、パラメータを取得します。
$stateParams.パラメータ名 で、対応するパラメータの値を取得できます。

補足

パラメータは複数指定できます。
パラメータの値は、文字列だけでなく、数値、オブジェクトなど、任意のデータ型を渡せます。
ui-sref ディレクティブ以外にも、$state.go メソッドを使用してステート遷移を行い、パラメータを渡すこともできます。

以下のサンプルコードは、UI-Router で ui-sref を使ってコントローラーにパラメータを渡す方法を実装したものです。

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>UI-Router パラメータ渡しサンプル</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <h1>UI-Router パラメータ渡しサンプル</h1>

  <a ui-sref="user({ id: 123 })">ユーザー詳細へ (ID: 123)</a>
  <a ui-sref="user({ id: 456 })">ユーザー詳細へ (ID: 456)</a>

  <div ui-view></div>
</body>
</html>

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        template: '<h1>ホーム</h1>'
      })
      .state('user', {
        url: '/user/:id',
        templateUrl: 'user.html',
        controller: 'UserController'
      });

    $urlRouterProvider.otherwise('/');
  })
  .controller('UserController', function($scope, $stateParams) {
    $scope.userId = $stateParams.id;
    console.log('ユーザーID:', $scope.userId);
  });

user.html

<div>
  <h2>ユーザー詳細</h2>
  <p>ユーザーID: {{ userId }}</p>
</div>

動作

ブラウザを開くと、/ のステートに遷移し、「ホーム」というタイトルが表示されます。
「ユーザー詳細へ (ID: 123)」または「ユーザー詳細へ (ID: 456)」をクリックすると、それぞれ user ステートに id パラメータを指定して遷移します。
user ステートのテンプレート (user.html) が表示され、userId 変数に渡された id パラメータの値が表示されます。

このサンプルコードで確認できること

ui-sref ディレクティブを使用して、ステート遷移時にコントローラーにパラメータを渡せること
$stateParams サービスを使用して、コントローラー側でパラメータを取得できること
テンプレート内でパラメータ値を参照できること

より複雑なパラメータの渡し方や、パラメータを使ったデータ処理などについては、さらに調査・学習を進めることをおすすめします。

UI-Router でコントローラーにパラメータを渡すその他の方法

ui-sref ディレクティブ以外にも、UI-Router でコントローラーにパラメータを渡す方法はいくつかあります。

$state.go('user', { id: 123 });

ui-state ディレクティブを使用して、ステート遷移時のパラメータを指定できます。

<a ui-state="user({ id: 123 })">ユーザー詳細へ</a>

resolve オプション

ステート定義の resolve オプションを使用して、パラメータを非同期に取得できます。

angular.module('app')
  .config(function($stateProvider) {
    $stateProvider
      .state('user', {
        url: '/user/:id',
        templateUrl: 'user.html',
        controller: 'UserController',
        resolve: {
          user: function($stateParams, UserService) {
            return UserService.getUser($stateParams.id);
          }
        }
      });
  })
  .controller('UserController', function($scope, user) {
    $scope.user = user;
    console.log('ユーザー情報:', user);
  });

カスタムサービス

パラメータ処理をカプセル化するために、カスタムサービスを作成できます。

angular.module('app')
  .service('ParamService', function($stateParams) {
    this.getUserId = function() {
      return $stateParams.id;
    };
  })
  .controller('UserController', function($scope, ParamService) {
    $scope.userId = ParamService.getUserId();
    console.log('ユーザーID:', $scope.userId);
  });

それぞれの方法の利点と欠点

方法	利点	欠点
`ui-sref` ディレクティブ	シンプルでわかりやすい	URL にパラメータが含まれる
`$state.go` メソッド	コード内でステート遷移を制御できる	やや冗長
`ui-state` ディレクティブ	HTML テンプレート内でステート遷移を定義できる	可読性がやや低い
`resolve` オプション	非同期処理でパラメータを取得できる	コードが複雑になる
カスタムサービス	パラメータ処理をカプセル化できる	理解と実装にコストがかかる