首頁 > 文章 > web前端 > AngularJS Component是怎麼運作的？ angularjs component的使用實例

AngularJS Component是怎麼運作的？ angularjs component的使用實例

寻∝梦原創: 2018-09-08 14:43:211261瀏覽

這篇文章介紹關於angularjs component的介紹，讓我們來看看component到底是怎麼樣運作的。那就馬上開始閱讀這篇文章吧

關於angularjs的前言：

現在比較火的前段JS框架像 VUE,REACK,ANGULAR，這三種框架都有共同的特色那就是，雙向資料綁定，組件化開發。而在angular1.5的版本之前，都是以directive作為組件化的形式，而directive本身是一個指令，而並非是一個組件，所以它並不能很好的承擔組件這一個職責，所以google在angular1. 5的版本中推出了component元件，用來承擔應用程式之中元件化開發的重擔，那麼component到底是如何運作的？又該如何使用呢？我們將在這一章中詳細的探究一下component元件的使用方式。

在AngularJS中，Component比diective更適合基於元件的開發形式。

先來看一個比較簡單的Component例子。

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 標籤，這個標籤的宣告方式與directive 相似，注意在這個標籤中定義了一個屬性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中我們宣告了這個controller，並且在controller中我們寫了這麼一行程式碼

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

.相信細心的小夥伴已經看出來了，沒錯，這裡對應我們在index.html中宣告的屬性hero='ctrl.hero' 是component中通訊的關鍵。

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 的component ，這裡要注意在index.html中以橫槓分離展示的標籤，在js程式碼中需要使用駝峰標示展示。其中的： bindings 對象，表示 component 之中通訊的協定。

現在是頁面中的展示效果：
AngularJS Component是怎麼運作的？ angularjs component的使用實例

在我們使用bindings 進行資料綁定的時候，官方並不推薦我們使用「=」進行資料綁定，因為「=」是一種雙向的資料綁定，這意味著我們在component中去修改資料的時候，在它的父元件中的值也會被修改。官方推薦我們使用「AngularJS開發手冊中學習）

#OK，介紹完了資料的綁定，那麼Component與父元件方法之間的綁定又是如何進行的那？
讓我們來看下面這個範例

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() 這個方法接收一個text 參數，需要注意的是，在參數進行傳遞的時候，是以json的形式進行傳遞的。這樣我們在點選 outputLog按鈕的時候，就會輸出我們在input輸入的內容。

好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。

以上是AngularJS Component是怎麼運作的？ angularjs component的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php json html angular JS 对象作用域 input

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：angularJs如何搭建web專案？ angularjs搭建web專案的詳細介紹下一篇：angularJs如何搭建web專案？ angularjs搭建web專案的詳細介紹

看更多