AngularJS 入門チュートリアル (2) - ルーティングでパラメータを渡す方法の紹介

この記事では、AngularJS のルーティングでパラメーターを渡す方法を主に紹介し、ルーティング パラメーターを実装する際の AngularJS の関連スキルを分析し、関連する操作手順と注意事項をまとめています。必要な方はこの記事を参照してください。この例では、AngularJS がルーティングでパラメーターを渡す方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

次のように、コントローラーで属性の値を直接定義できるだけでなく、

app.controller('listController',function($scope){
  $scope.name="ROSE";
});

AngularJS はパラメーターを渡す機能も提供します。これは私がこれまでに出会った方法です。パラメータはビューから渡されます。

<!--首页html-->
<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li>

//js
.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/user/:age',{
        templateUrl:'list.html',
        controller:'listController'})
 }]);

<!--list.html-->
<p>
  <p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
  <h3>{{params.age}}</h3>
</p>
</p>

AngularJsは、ホームページのlist.htmlビューに「18」を渡す方法を提供します。ビュー。つまり、ビューのルーティング アドレスの後に実際のパラメータを置きます。ここでは、

user

のようにします。次に、実際のパラメータと一致するように、JS の when メソッドで変数を宣言します。ただし、実際のパラメータは $routeParams (配列) に「キー値」として格納されており、それを制御シンボルに注入する必要があります (いわゆる注入とは、実際にはその中のすべての属性と値を共有することを意味します)。 。次に、コントローラーで値を宣言して代入します (つまり、値を取り出します)。以下の通り:

.controller('listController',function($scope,$routeParams){
  $scope.name="ROSE";
  $scope.params=$routeParams;
});

パラメータを渡す手順は次のように要約されます:

1. ホームページビューの「/」の後に、渡す実際のパラメータを追加します。

2. マッチング用のルーティング設定のルーティング パスに /:variable の形式で変数を定義します。 3. コントローラーを設定し、$routeParams をコントローラーに挿入します。
4. コントローラーに値を割り当てます。 $scope.params=$routeParams;
5. ルーティングが完了すると、実際のパラメータがビューに正常に表示されます。

{{params.age}}

注意すべき点の 1 つは、実際のパラメータはキー値として存在し、対応する変数 (ここでは age ) を介してアクセスして、パラメータを取得する必要があることです。価値。

以上がAngularJS 入門チュートリアル (2) - ルーティングでパラメータを渡す方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。