本篇文章介绍关于angularjs component的介绍，让我们来看看component到底是怎么样工作的。那就马上来开始阅读这篇文章吧
关于angularjs的前言：
现在比较火的前段JS框架像 VUE,REACK,ANGULAR，这三种框架都有共同的特点那就是，双向数据绑定，组件化开发。而在angular1.5的版本之前，都是以directive作为组件化的形式，而directive本身是一个指令，而并非是一个组件，所以它并不能很好的承担组件这一个职责，所以google在angular1.5的版本中推出了component组件，用于承担应用之中组件化开发的重担，那么component到底是如何工作的？又应该如何使用呢？我们将在这一章中详细的探究一下component组件的使用方式。
在angularjs中，component比diective更适合于基于组件的开发形式。
先来看一个比较简单的Component事例。
index.html
nbsp;html>Document hero
登录后复制
在index.html中我们定义了一个 hero-detail 标签，这个标签的声明方式与 directive 相似 ， 注意在这个标签中定义了一个属性 hero-detail ， 这个定义的属性是做什么用的那？我们接着往下看
index.js
(function(angular){ angular.module('ComponentTestApp',[]) .controller('MainCtrl',function(){ this.hero = { name:'Sunday' } });})(angular);
登录后复制
在index.js中我们声明了这个controller，并且在controller中我们写了这么一行代码
this.hero = { name:'Sunday' }
登录后复制
相信细心的小伙伴已经看出来了，没错，这里对应我们在index.html中声明的属性 hero=’ctrl.hero’ 是component中通信的关键。
heroDetail.html
HeroName: {{$ctrl.hero.name}}
登录后复制
在 heroDetail.html 中我们把从index.html中传输过来的值展示出来。
heroDetail.js
(function(angular){ function HeroDetailController(){ } angular.module('ComponentTestApp') .component('heroDetail',{ templateUrl:'views/heroDetail.html', controller:HeroDetailController, bindings:{ hero:'=' } });})(angular);
登录后复制
在heroDetail.js 中 ， 我们声明 heroDetail 的 component ，这里要注意 在index.html中以横杠分离展示的标签，在js代码中需要使用驼峰标示展示。其中的 ： bindings 对象，表示 component 之中通讯的协议。
现在是页面中的展示效果： 
在我们使用 bindings 进行数据绑定的时候 ， 官方并不推荐我们使用 “=” 进行数据绑定， 因为“=” 是一种双向的数据绑定，这就意味着我们在 component中去修改 数据的时候，在它的父组件中的值也会被修改 。 官方推荐我们使用 “AngularJS开发手册中学习）
OK，介绍完了 数据的绑定，那么Component与父组件方法之间的绑定又是如何进行的那 ？
让我们来看下面这个例子
index.html
nbsp;html>Document
登录后复制
index.js
(function(angular){ angular.module('ComponentTestApp',[]) .controller('MainCtrl',function(){ this.log = function(text){ console.log("输出的内容为： " + text); } });})(angular);
登录后复制
heroDetail.html
登录后复制
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);
登录后复制
在代码中我们通过 “&” 符号去绑定了一个方法 onLog() 该方法接收一个 text 参数 ， 需要注意的是，在参数进行传递的时候，是以json的形式进行传递的 。 这样我们在点击 outputLog按钮的时候，就会输出我们在input中输入的内容。
好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
以上就是AngularJS Component是怎么工作的？angularjs component的使用实例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2741941.html
