AngularJS 1.5 版本Component详解

现在比较火的前段JS框架像 VUE,REACK,ANGULAR，这三种框架都有共同的特点那就是，双向数据绑定，组件化开发。而在angular1.5的版本之前，都是以directive作为组件化的形式，而directive本身是一个指令，而并非是一个组件，所以它并不能很好的承担组件这一个职责，所以google在angular1.5的版本中推出了component组件，用于承担应用之中组件化开发的重担

快乐的程序媛

4711人浏览 · 2017-05-30 20:24:15

快乐的程序媛 · 2017-05-30 20:24:15 发布

在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='ctrl.hero'></hero-detail>


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

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在index.html中我们定义了一个 hero-detail 标签，这个标签的声明方式与 directive 相似，注意在这个标签中定义了一个属性 hero-detail ，这个定义的属性是做什么用的那？我们接着往下看

index.js

(function(angular){

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

})(angular);

   
   1
2
3
4
5
6
7
8
9
10
11
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11

在index.js中我们声明了这个controller，并且在controller中我们写了这么一行代码

this.hero = {
        name:'Sunday'
      }
   
   1
2
3
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3

相信细心的小伙伴已经看出来了，没错，这里对应我们在index.html中声明的属性 hero='ctrl.hero' 是component中通信的关键。

heroDetail.html

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

   
   1
2
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2

在 heroDetail.html 中我们把从index.html中传输过来的值展示出来。

heroDetail.js

(function(angular){

  function HeroDetailController(){

  }

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

})(angular);

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在heroDetail.js 中，我们声明 heroDetail 的 component ，这里要注意在index.html中以横杠分离展示的标签，在js代码中需要使用驼峰标示展示。其中的： bindings 对象，表示 component 之中通讯的协议。

现在是页面中的展示效果：
这里写图片描述

在我们使用 bindings 进行数据绑定的时候，官方并不推荐我们使用 “=” 进行数据绑定，因为“=” 是一种双向的数据绑定，这就意味着我们在 component中去修改数据的时候，在它的父组件中的值也会被修改。官方推荐我们使用 “< ” 进行单向的数据绑定，值得注意的是就算我们使用的是 “<” 因为在父组件和组件作用域都是引用同一个对象的，因此如果要更改组件中的对象属性或数组元素，父组件仍将反映该更改。

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>

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

index.js

(function(angular){

  angular.module('ComponentTestApp',[])
    .controller('MainCtrl',function(){

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

    });

})(angular);

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13

heroDetail.html


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

   
   1
2
3
4
5
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5

heroDetail.js

(function(angular){

  function HeroDetailController($scope){

    $scope.text = '';
    var ctrl = this;

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

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

})(angular);

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   
   
    
    
   
   
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在代码中我们通过 “&” 符号去绑定了一个方法 onLog() 该方法接收一个 text 参数，需要注意的是，在参数进行传递的时候，是以json的形式进行传递的。这样我们在点击 outputLog按钮的时候，就会输出我们在input中输入的内容。

转自：http://blog.csdn.net/u011068996/article/details/54893258

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^