Rumah > Artikel > hujung hadapan web > AngularJS Component是怎么工作的？angularjs component的使用实例

AngularJS Component是怎么工作的？angularjs component的使用实例

寻∝梦asal: 2018-09-08 14:43:211261semak imbas

本篇文章介绍关于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 之中通讯的协议。

现在是页面中的展示效果：

在我们使用 bindings 进行数据绑定的时候，官方并不推荐我们使用 “=” 进行数据绑定，因为“=” 是一种双向的数据绑定，这就意味着我们在 component中去修改数据的时候，在它的父组件中的值也会被修改。官方推荐我们使用 “< ” 进行单向的数据绑定，值得注意的是就算我们使用的是 “<” 因为在父组件和组件作用域都是引用同一个对象的，因此如果要更改组件中的对象属性或数组元素，父组件仍将反映该更改。（想看更多就到PHP中文网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使用手册中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci AngularJS Component是怎么工作的？angularjs component的使用实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php json html angular JS 对象作用域 input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：angularJs如何搭建web项目？angularjs搭建web项目的详细介绍Artikel seterusnya：AngularJS表达式如何使用？angularjs的表达式的使用详解

Artikel berkaitan

Lihat lagi