AngularJS – Component vs Controller based design

Share with friends

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.

AngularJS Controller
Controller-based application

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.

AngularJS Component
Component-based application

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 to download it.

Share with friends

Leave a Reply

Your email address will not be published. Required fields are marked *