Angular UI-Routerでパラメータを使用して状態間を遷移する方法

URLパラメータを使用する方法: UI-Routerでは、パラメータをURLに含めて状態間で受け渡すことができます。例えば、以下のような状態定義を考えます。

$stateProvider.state('stateName', {
  url: '/state/:param1/:param2',
  ...
});

この場合、urlプロパティで/state/:param1/:param2というパターンを定義しています。:を使ってパラメータを表現し、実際の値はURL中に含めます。

パラメータを渡す場合は、ui-srefディレクティブを使用します。

<a ui-sref="stateName({param1: 'value1', param2: 'value2'})">リンク</a>

この例では、param1とparam2の値を指定してstateNameに遷移するリンクを作成しています。

パラメータを受け取る場合は、状態のコントローラやコンポーネントで$stateParamsを使用します。

app.controller('StateController', function($stateParams) {
  var param1 = $stateParams.param1;
  var param2 = $stateParams.param2;
  // パラメータの値を使って処理を行う
});

クエリパラメータを使用する方法: URLパラメータではなく、クエリパラメータを使用してパラメータを渡すこともできます。以下はその例です。

<a ui-sref="stateName({param1: 'value1', param2: 'value2'})">リンク</a>

この場合、URLには/state?param1=value1&param2=value2という形式で遷移します。

パラメータを受け取る場合は、$stateParamsではなく$stateParams.queryParamsを使用します。

app.controller('StateController', function($stateParams) {
  var param1 = $stateParams.queryParams.param1;
  var param2 = $stateParams.queryParams.param2;
  // パラメータの値を使って処理を行う
});

カスタムデータを使用する方法: UI-Routerでは、状態間の遷移時にカスタムデータを渡すこともできます。以下はその例です。

$stateProvider.state('stateName', {
  data: {
    customData: {
      param1: 'value1',
      param2: 'value2'
    }
  },
  ...
});

この場合、dataプロパティにカスタムデータを定義しています。

カスタムデータを受け取る場合は、状態のコントローラやコンポーネントで$state.current.dataを使用します。

app.controller('StateController', function($state) {
  var customData = $state.current.data.customData;
  var param1 = customData.param1;
  var param2 = customData.param2;
  // パラメータの値を使って処理を行う
});

上記の方法は、AngularのUI-Routerを使用して状態間を遷移する際にパラメータを渡したり受け取ったりするためのいくつかの方法です。必要に応じて適切な方法を選択し、コード例を参考にしてください。