Reading Time: 2 minutes
AngularJS Component-
AngularJS is the popular JavaScript client-side framework for web applications but most of the applications are still begin designed using AngularJS controller model instead of AngularJS component model. AngularJS application should be composed based on a hierarchy of components.
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.