component(name, options);
Register a component definition with the compiler. This is a shorthand for registering a special type of directive, which represents a self-contained UI component in your application. Such components are always isolated (i.e. scope: {}) and are always restricted to elements (i.e. restrict: 'E').
Component definitions are very simple and do not require as much configuration as defining general directives. Component definitions usually consist only of a template and a controller backing it.
In order to make the definition easier, components enforce best practices like use of controllerAs, bindToController. They always have isolate scope and are restricted to elements.
Here are a few examples of how you would usually define components:
var myMod = angular.module(...);
myMod.component('myComp', {
template: '<div>My name is {{$ctrl.name}}</div>',
controller: function() {
this.name = 'shahar';
}
});
myMod.component('myComp', {
template: '<div>My name is {{$ctrl.name}}</div>',
bindings: {name: '@'}
});
myMod.component('myComp', {
templateUrl: 'views/my-comp.html',
controller: 'MyCtrl',
controllerAs: 'ctrl',
bindings: {name: '@'}
});
For more examples, and an in-depth guide, see the component guide.
See also $compileProvider.directive().
Parameters
| Param | Type | Details |
|---|---|---|
| name | string | Name of the component in camelCase (i.e. |
| options | Object | Component definition object (a simplified directive definition object), with the following properties (all optional):
|
Returns
ng.$compileProvider |
the compile provider itself, for chaining of function calls. |
Please login to continue.