Components are essentially templates with a controller. They are not Directives, nor should you replace Directives with Components, unless you are upgrading “template Directives” with controllers, which are best suited as a component. Components also contain bindings that define inputs and outputs for data and events, lifecycle hooks and the ability to use one-way data flow and event Objects to get data back up to a parent component. These are the new defacto standard in AngularJS 1.5 and above. Everything template and controller driven that we create will likely be a component, which may be a stateful, stateless or routed component. You can think of a “component” as a complete piece of code, not just the .component() definition Object. Let’s explore some best practices and advisories for components, then dive into how you should be structuring them via stateful, stateless and routed component concepts.
Supported properties
These are the supported properties for .component() that you can/should use:
| Property | Support |
| bindings | Yes, use ‘@’, ‘<‘, ‘&’ only |
| controller | Yes |
| controllerAs | Yes, default is $ctrl |
| require | Yes (new Object syntax) |
| template | Yes |
| templateUrl | Yes |
| transclude | Yes |
