Angular stateParams

Rana Hasnain Khan 2024年2月15日 Angular Angular stateParams

$stateParams サービスを紹介し、Angular で使用します。

Angular の `$stateParams` サービスとは

$stateParams は URL ベースのパラメータを取得するサービスであり、これらのパラメータを使用して状態に応じた情報を表示できます。

2つの状態を含む例を作成し、状態がどのように機能するかを理解し、$stateparams を使用してパラメーターを格納してみましょう。

$stateProvider を使用して状態を作成します。状態は、URL、templateUrl、および controller の 3つのパラメーターを取ります。

URL に、state.go を使用して状態が移動するページリンクを追加します。templateUrl では、その状態のテンプレートの名前または URL を提供します。コントローラーでは、状態のコントローラーを提供します。

LoginState と SignUpState の 2つの状態を作成しましょう。したがって、コードは次のようになります。

console.clear();

var app = angular.module('app', [
  'ui.router'
]);

app.config(function($stateProvider) {
  $stateProvider
        .state('LoginState', {
            url: '',
            templateUrl: 'Firststate',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('SignUpState', { id : '2nd Parameter' });
              };
              
              console.log('Firststate params:', $stateParams);
            }
        })
        .state('SignUpState', {
          url: 'SignUpState/:id',
            templateUrl: 'SecondState',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('LoginState', { someOtherParam : '1st Parameter' });
              };
              
              console.log('SecondState params:', $stateParams);
            }
        });
});

次に、これらのテンプレートのテンプレートを作成し、Ui-router スクリプトファイルを含めます。テンプレートには保存されたパラメータが表示され、それぞれ SignUpState と LoginState に移動するためのボタンがあります。

<body ng-app="app">
  
  <ui-view></ui-view>
  
  <script type="text/ng-template" id="Firststate">
    <h1>Login State</h1>
    <h2>$stateParams: {{params}}</h2>
    <p>(you can see it always empty)</p>
    <button ng-click="go()">Sign Up</button>
  </script>
  
  <script type="text/ng-template" id="SecondState">
    <h1>SignUp State</h1>
    <h2>$stateParams: {{params}}</h2>
    <button ng-click="go()">Login</button>  
  </script>
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.js"></script>
</body>

出力：

AngularJS stateparam の結果

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

著者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Angular の $stateParams サービスとは

Angular の `$stateParams` サービスとは