Reading Time: 2 minutes
What is Angular Component?
A component is an abstraction that combines the easy programming model of the controller with the power of directive. Components are completely contained widgets that control all the knowledge how they look, how they act and how they interface with outside. It is an atomic UI piece that is composable and reusable.
Component-based design vs controller-based design-
A. Controller-based design– Template/view and controller usually represent the entire page. It is displayed in the reserved area by ng-view.Generally, widgets are tightly coupled.
B. Component-based design– Doesn’t consider view as a larger monolithic markup, instead of several encapsulated components. A component can have their own reserved area for display.
Component-based design benefits-
One of the immediate benefits is that components can be moved without affecting the behavior of the system. Components are small reusable widgets and each page can have multiple reusable/customizable components. A component is isolated so team members can work on the separate small component. And Angular2+ is based on components model so migration will be easy from AngularJS 1.5+ to Angular2+.
Sample App based on AngularJS component-
If you are looking for component-based sample app, please click GitHub link https://github.com/manishsingh27/AngularJSComponent to download it.