ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS 入門チュートリアル (2) - ルーティングでパラメータを渡す方法の紹介

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

黄舟
リリース: 2017-05-27 10:35:14
オリジナル
1257 人が閲覧しました

この記事では、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([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider.
    when(&#39;/user/:age&#39;,{
        templateUrl:&#39;list.html&#39;,
        controller:&#39;listController&#39;})
 }]);
ログイン後にコピー

<!--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(&#39;listController&#39;,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 サイトの他の関連記事を参照してください。

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート