AngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例-jsチュートリアル-php.cn

AngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例

寻∝梦

リリース： 2018-09-08 14:43:21

オリジナル

1318 人が閲覧しました

この記事では angularjs コンポーネントを紹介します。コンポーネントがどのように機能するかを見てみましょう。それでは、今すぐこの記事を読み始めてください

angularjs についての序文:

人気のあるフロントエンド JS フレームワークは、VUE、REACK、ANGULAR のようなもので、これら 3 つのフレームワークには、双方向のデータバインディングという共通の特徴があります。、コンポーネントベースの開発。 angular1.5 のバージョンより前は、ディレクティブはコンポーネント形式として使用されており、ディレクティブ自体はコンポーネントではなく命令であるため、コンポーネントの責任を十分に引き受けることができません。そのため、Google はバージョン 5 でコンポーネントコンポーネントを開始しました。では、コンポーネントはどのように機能するのでしょうか?どのように使用すればよいでしょうか?この章では、コンポーネントコンポーネントの使用法について詳しく説明します。

AngularJS では、コンポーネントはディレクティブよりもコンポーネントベースの開発に適しています。

まず、比較的単純なコンポーネントの例を見てみましょう。

index.html

<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-controller="MainCtrl as ctrl">

    <h3>hero</h3>
    <br>
    <hero-detail hero=&#39;ctrl.hero&#39;></hero-detail>


    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <script src="js/heroDetail.js"></script></body></html>

ログイン後にコピー

index.html では、hero-detail タグを定義します。このタグの宣言方法は、hero-detail 属性が定義されていることに注意してください。それは何に使われますか？下を見てみます

index.js

(function(angular){

  angular.module(&#39;ComponentTestApp&#39;,[])
    .controller(&#39;MainCtrl&#39;,function(){
      this.hero = {
        name:&#39;Sunday&#39;
      }
    });})(angular);

ログイン後にコピー

index.jsでこのコントローラーを宣言し、コントローラーで次のコード行を書きました

this.hero = {
        name:&#39;Sunday&#39;
      }

ログイン後にコピー

注意深い友人はすでに見たと思います、はい、これは属性に対応しますコンポーネント内での通信の鍵となるindex.html hero='ctrl.hero'で宣言しました。

heroDetail.html

<h1>HeroName: {{$ctrl.hero.name}}</h1>

ログイン後にコピー

heroDetail.htmlには、index.htmlから転送された値を表示します。

heroDetail.js

(function(angular){

  function HeroDetailController(){

  }

  angular.module(&#39;ComponentTestApp&#39;)
    .component(&#39;heroDetail&#39;,{
      templateUrl:&#39;views/heroDetail.html&#39;,
      controller:HeroDetailController,
      bindings:{
        hero:&#39;=&#39;
      }
    });})(angular);

ログイン後にコピー

heroDetail.jsでは、heroDetailのコンポーネントを宣言します。ここで、index.htmlに表示されるタグは横棒で区切られており、JSコードではキャメルケースを使用して表示する必要があることに注意してください。。その中には、コンポーネント内の通信プロトコルを表すバインディングオブジェクトがあります。

ページ上の表示効果は次のとおりです:
AngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例

データバインディングにバインディングを使用する場合、「=」は双方向のデータバインディングであるため、公式はデータバインディングに「=」を使用することを推奨していません。 , これは、コンポーネント内のデータを変更すると、その親コンポーネントの値も変更されることを意味します。公式の推奨では、一方向のデータバインディングには「<」を使用します。「<」を使用した場合でも、同じオブジェクトが親コンポーネントとコンポーネントのスコープで参照されることに注意してください。親コンポーネントのコンポーネントオブジェクトプロパティまたは配列要素を変更しても、親コンポーネントには変更が反映されます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアルにアクセスして学習してください)

さて、データバインディングを導入しましたが、コンポーネントと親コンポーネントメソッドの間のバインディングはどのように実行されるのでしょうか?
次の例を見てみましょう

index.html

<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-controller="MainCtrl as ctrl">

    <hero-detail on-log="ctrl.log(text)"></hero-detail>



    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <script src="js/heroDetail.js"></script></body></html>

ログイン後にコピー

index.js

(function(angular){

  angular.module(&#39;ComponentTestApp&#39;,[])
    .controller(&#39;MainCtrl&#39;,function(){

      this.log = function(text){
        console.log("输出的内容为： " + text);
      }

    });})(angular);

ログイン後にコピー

heroDetail.html

<input type="text" placeholder="被输出的内容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>

ログイン後にコピー

heroDetail.js

(function(angular){

  function HeroDetailController($scope){

    $scope.text = &#39;&#39;;
    var ctrl = this;

    $scope.onLog = function(){
      ctrl.onLog({text:$scope.text});
    }
  }

  angular.module(&#39;ComponentTestApp&#39;)
    .component(&#39;heroDetail&#39;,{
      templateUrl:&#39;views/heroDetail.html&#39;,
      controller:HeroDetailController,
      bindings:{
        onLog:&#39;&&#39;
      }
    });})(angular);

ログイン後にコピー

コードでは、「&」記号を使用して onLog メソッドをバインドします() このメソッドはテキストパラメータを受け取ります。パラメータが渡されるときは、json 形式で渡されることに注意してください。このように、outputLogボタンをクリックすると、inputに入力した内容が出力されます。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザーマニュアルにアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。