In my previous post I talked about the problems of controllers (both at the back-end and the front-end). The issue is that controllers are too general and tend to become full with mixed logic, especially if the page they control has many UI pieces. So instead of having one controller per page, we can have one controller per component and hence decrease the coupling in one’s code.
Some JavaScript libraries, f.x. React, are designed with the component in the center. In Angular 1.x we have the concepts of a controller and a directive. One can attach a controller to any part of the page or when using a router, a controller is automatically assigned to the view. You can easily remove all usages of controllers on your page simply by moving the code into an appropriate directive. Do not forget that you can also rely on the different types of services in Angular for custom logic.
In Angular 2 the notion of controller is completely removed. You should work with directives only and you can actually choose what kind of a directive you want to use for the specific case:
- Component directives provide a “static” template with some logic behind. It is the same as a directive with a template and an isolated scope in Angular 1.x
- Template directives work with a user-defined template. It is similar to a directive with transclude in Angular 1.x
- Decorator directives add extra functionality to an existing DOM element (see Decorator pattern). It is the same as a directive with no translude, no own scope and no template in Angular 1.x
If you think you will miss the mapping to a controller from the router in Angular 2, you can actually do a mapping to a ComponentDirective instead, but I would still opt for slicing your views into smaller components.
