转载请写明来源地址：http://www.jb51.cc/article/p-hqmpiisq-bph.html
理解Components
在angularjs中，Component是一种特殊的directive，它的配置更简单一些，非常适合组件化的app架构。使用web组件和使用Angular风格的app架构使得编写app更为简便。
Component的优点：
- 比普通directive要简单很多
- 更加严谨，更加规范化
- 更加适合组件化架构
- component更容易升级到angular2
不使用Component的情况
- 需要在编译阶段和预链接阶段执行的directive，因为Component这时还不可用
- 当你需要directive才有定义的选项时，如priority,terminal,multi-element
- 当你需要directive由属性，css的class而不是元素触发时
Components的创建和配置
Components由angularjs的module使用.component()方法注册。这个方法接受2个参数：
heroApp.html:
<!DOCTYPE html>
<html>
<head>
<Meta charset="uft-8"/>
<title></title>
</head>
<script src="script/angular.min.js"></script>
<body ng-app="heroApp">
<div ng-controller="MainCtrl as ctrl">
<b>Hero</b><br>
<hero-detail hero="ctrl.hero"></hero-detail>
</div>
</body>
<script> angular.module('heroApp',[]).controller('MainCtrl',function MainCtrl() { this.hero = { name: 'Spawn' }; }); function HeroDetailController() { } angular.module('heroApp').component('heroDetail',{ templateUrl: 'heroDetail.html',controller: HeroDetailController,bindings: { hero: '=' } }); </script>
</html>
heroDetail.html:
<span>Name: {{$ctrl.hero.name}}</span>
Directive和Component之间的定义比较
| 属性 | Directive | Component |
|---|---|---|
| bindings | No | Yes (binds to controller) |
| bindToController | Yes (default: false) | No (use bindings instead) |
| compile function | Yes | NO |
| controller | Yes | Yes (default function() {}) |
| controllerAs | Yes (default: false) | Yes (default: $ctrl) |
| link functions | Yes | No |
| multiElement | Yes | No |
| priority | Yes | No |
| replace | Yes (deprecated) | No |
| require | Yes | Yes |
| restrict | Yes | No (restricted to elements only) |
| scope | Yes (default: false) | No (scope is always isolate) |
| template | Yes | Yes,injectable |
| templateNamespace | Yes | No |
| templateUrl | Yes | Yes,injectable |
| terminal | Yes | No |
| transclude | Yes (default: false) | Yes (default: false) |
组件化app架构
如前所述，component使得使用组件化架构构建app更为容易，除此之外component还具备的能力具体如下：
- Component只能控制它自己的视图和数据：Component不会修改它自身scope之外的任何数据或DOM。通常情况下，AngularJS中可以通过scope继承和watch可以修改任何地方的数据，这确实很实用，但是也会导致很难明确哪个部分对修改数据负责。这就是为什么Component使用隔离范围，也因此无法进行所有scope的操作。
Component有明确定义的公共api－输入输出：隔离范围并不是全部，因为AngularJS是双向绑定的。如果你传一个对象到组件中，类似
bindings: {item: '='}，然后修改对象的属性，修改会反映到它的父组件中。但是对于component来说，component确实只是修改了它自己的scope内的数据。这样就很清晰的得知什么数据什么时候被修改。就此，component遵循一些简单的约定：输入需要使用
<和@绑定。<符号在1.5之后表示单向绑定，和=不同的是，它绑定的属性在component的scope哪不会被watch，这意味着你可以在component的scope内给属性设置一个新的值，它并不会更新父scope里的值。但是如果父scope和component的scope引用的是同一个对象，比如你在component修改对象的属性或者数组中的元素，这种改变仍然会反映到父scope。因此在<绑定后不要在component内修改对象的属性和数组的元素。当输入的值是字符串时可以使用@绑定，特别是在绑定的值不会更改的时候。bindings: { hero: '<',comment: '@' }输出使用
&进行绑定，绑定的函数将作为component事件的回调函数bindings: { onDelete: '&',onUpdate: '&' }在不操作输入数据的情况下，component可以调用相应的输出事件改变输出数据。比如删除，并不是hero自己删除自己，而是通过相应的事件把自己传给父component
<!-- note that we use kebab-case for bindings in the template as usual --> <editable-field on-update="$ctrl.update('location',value)"></editable-field><br> <button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>这样，父component来决定事件执行什么（删除item还是更新属性）
ctrl.deleteHero(hero) { $http.delete(...).then(function() { var idx = ctrl.list.indexOf(hero); if (idx >= 0) { ctrl.list.splice(idx,1); } }); }
Component有明确定义的生命周期:每个组件都可以实现
lifecycle hooks，这些方法会在component生命周期的相应的点被调用，可以实现的hook方法如下：$onInit()- 在element上的所有controller构造和所有的绑定初始化之后，在element之上前缀&的函数链接之前，每一个controller调用这个钩子方法。这是个给controller写一些初始化方法的好地方$onChanges(changesObj)- 当单向绑定更新时调用，changesObj是一个hash键值对，key是已被修改的绑定属性的name，value是一个对象，格式是{ currentValue,prevIoUsValue,isFirstChange() }，使用这个hook可以只触发组件内的更新，比如克隆绑定属性的对象以防止它被外部意外更新$doCheck()- 在每一个digest循环被调用，提供了一个机会可以在数据更改时验证或者做一些操作。任何你希望进行的操作（比如对更改的响应）都必须通过这个hook调用。当$onChanges被调用时，实现这个hook没什么作用。比如，比如你想实现一个深度的equal函数检查，或者检查一个Date对象时，他将会非常有用，因为这是AngularJS的变化检测器检测不到这个变化，自然$onChanges也不会被调用。这个hook不包含任何参数，因此，如果想要检测变化，你需要存储之前的值，然后和现在的值进行比较。$onDestroy()- 当controller包含的scope销毁时，controller会调用这个hook。使用这个hook可以释放一些外部资源，watch和事件处理程序$postLink()- 在controller的element和子元素被链接后调用。和post-link函数类似，这个hook可以设置DOM事件的处理程序或者直接进行DOM操作。包含templateUrl指令的element不会被编译和链接，因为它们要等template异步加载。它们的编译和链接要等template完成之后才会执行。这个hook非常和angular2中的ngAfterViewInit和ngAfterContentInit两个hook类似。因为angular1和angular2编译过程的不同，所以在anguar1升级到angular2时一定要小心。
通过实现这些方法，你的component可以在生命周期中hook
app就是一棵component树：理想的情况下，整个app是一棵component构成的树，清晰的定义了输入输出，并尽量不使用双向绑定。这样更容易预测数据的变化和组件状态。
Component树示例
下面这个示例对上面对例子进行了扩展，并和我们刚讲过到概念结合起来：
不再使用ngController，现在使用拥有多个hero的heroList组件象，为每个hero创建一个heroDetail组件。
heroDetail组件包含的新功能：
- 一个delete按钮，可以调用绑定到heroList组件的onDelete函数
- 一个可以改变hero的location的输入控件，该控件是可重用的editableField组件。不是editableField组件自己操作hero对象，它将改变传给heroDetail组件，heroDetail组件再传给heroList组件，由heroList组件更新原始数据。
heroApp.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="uft-8"/>
<title></title>
</head>
<script src="script/angular.min.js"></script>
<body ng-app="heroApp">
<hero-list></hero-list>
</body>
<script> /** * index.js */ angular.module('heroApp',[]); /** * heroList.js */ function HeroListController($scope,$element,$attrs) { var ctrl = this; // This would be loaded by $http etc. ctrl.list = [ { name: 'Superman',location: '' },{ name: 'Batman',location: 'Wayne Manor' } ]; ctrl.updateHero = function(hero,prop,value) { hero[prop] = value; }; ctrl.deleteHero = function(hero) { var idx = ctrl.list.indexOf(hero); if (idx >= 0) { ctrl.list.splice(idx,1); } }; } angular.module('heroApp').component('heroList',{ templateUrl: 'heroList.html',controller: HeroListController }); /** * heroDetail.js */ function HeroDetailController() { var ctrl = this; ctrl.delete = function() { ctrl.onDelete({hero: ctrl.hero}); }; ctrl.update = function(prop,value) { ctrl.onUpdate({hero: ctrl.hero,prop: prop,value: value}); }; } angular.module('heroApp').component('heroDetail',bindings: { hero: '<',onDelete: '&',onUpdate: '&' } }); /** * editableField.js */ function EditableFieldController($scope,$attrs) { var ctrl = this; ctrl.editMode = false; ctrl.handleModeChange = function() { if (ctrl.editMode) { ctrl.onUpdate({value: ctrl.fieldValue}); ctrl.fieldValueCopy = ctrl.fieldValue; } ctrl.editMode = !ctrl.editMode; }; ctrl.reset = function() { ctrl.fieldValue = ctrl.fieldValueCopy; }; ctrl.$onInit = function() { // Make a copy of the initial value to be able to reset it later ctrl.fieldValueCopy = ctrl.fieldValue; // Set a default fieldType if (!ctrl.fieldType) { ctrl.fieldType = 'text'; } }; } angular.module('heroApp').component('editableField',{ templateUrl: 'editableField.html',controller: EditableFieldController,bindings: { fieldValue: '<',fieldType: '@?',onUpdate: '&' } }); </script>
</html>
heroList.html
<b>Heroes</b><br>
<hero-detail ng-repeat="hero in $ctrl.list" hero="hero" on-delete="$ctrl.deleteHero(hero)" on-update="$ctrl.updateHero(hero,value)"></hero-detail>
heroDetail.html
<hr> <div> Name: {{$ctrl.hero.name}}<br> Location: <editable-field field-value="$ctrl.hero.location" field-type="text" on-update="$ctrl.update('location',value)"></editable-field><br> <button ng-click="$ctrl.delete()">Delete</button> </div>
editableField.html
<span ng-switch="$ctrl.editMode"> <input ng-switch-when="true" type="{{$ctrl.fieldType}}" ng-model="$ctrl.fieldValue"> <span ng-switch-default>{{$ctrl.fieldValue}}</span> </span> <button ng-click="$ctrl.handleModeChange()">{{$ctrl.editMode ? 'Save' : 'Edit'}}</button> <button ng-if="$ctrl.editMode" ng-click="$ctrl.reset()">Reset</button>
Component作为route模版
当使用ngRoute时，Component作为route的模版也是非常有用的。一个组件化的app，每一个视图都是一个组件：
var myMod = angular.module('myMod',['ngRoute']);
myMod.component('home',{
template: '<h1>Home</h1><p>Hello,{{ $ctrl.user.name }} !</p>',controller: function() {
this.user = {name: 'world'};
}
});
myMod.config(function($routeProvider) {
$routeProvider.when('/',{
template: '<home></home>'
});
})
使用$routeProvider时，你常常可以避开一些样板将已解决达route依赖传到component中。1.5版本之后，ngRoute可以自动分配resolve到route的scope属性$resolve，你也可以通过resolveAs配置属性名。当用component时，你可以利用component的优势，直接把resolve传到你的component中，而不用创建额外的route控制器。
var myMod = angular.module('myMod',bindings: {
user: '<'
}
});
myMod.config(function($routeProvider) {
$routeProvider.when('/',{
template: '<home user="$resolve.user"></home>',resolve: {
user: function($http) { return $http.get('...'); }
}
});
});
Component间的通信
Directive需要其他Directive的controller来相互通信。在component中可以为require属性提供一个对象map来实现，map的key是所需controller构成的属性，而map的值是所需组件的名称。
不过要注意的是，所需的controller在它初始化完成之前是不可用的，但是可以确定的是当前controller在$onInit执行之前所需的controller是可用的。
下面的例子是将上一篇文章由Directive方式改为了component方式：
docsTabsExample.html
<!DOCTYPE html> <html> <head> <Meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <body ng-app="docsTabsExample"> <my-tabs> <my-pane title="Hello"> <p>Lorem ipsum dolor sit amet</p> </my-pane> <my-pane title="World"> <em>Mauris elementum elementum enim at suscipit.</em> <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p> </my-pane> </my-tabs> </body> <script> angular.module('docsTabsExample',[]) .component('myTabs',{ transclude: true,controller: ['$scope',function MyTabsController($scope) { var panes = this.panes = []; this.select = function (pane) { angular.forEach(panes,function (pane) { pane.selected = false; }); pane.selected = true; }; this.addPane = function (pane) { if (panes.length === 0) { this.select(pane); } panes.push(pane); }; }],templateUrl: 'my-tabs.html' }) .component('myPane',{ require: { tabsCtrl: '^myTabs' },transclude: true,bindings: { title: '@' },controller: function () { this.$onInit = function () { this.tabsCtrl.addPane(this); console.log(this); }; },templateUrl: 'my-pane.html' }); </script> </html>
my-tabs.html
<div class="tabbable"> <ul class="nav nav-tabs"> <li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}"> <a href="" ng-click="$ctrl.select(pane)">{{pane.title}}</a> </li> </ul> <div class="tab-content" ng-transclude></div> </div>
my-pane.html
<div class="tab-pane" ng-show="$ctrl.selected"> <h4>{{title}}</h4> <div ng-transclude></div> </div>
