Best practice using angular architecture with components

Question

I'm trying to wrap my mind arround angular components, to understand components better I'm developing a simple todo crud using the component architecture.

The problem is that I think it makes sense to put all operations of the crud in a single controller thus respecting the single responsibility principle but at the same time it is a good practice (I think) to split the views (one for list todos and delete another to create/update todos).

I know that multiple views with a single controller can be achieved using two separate components registering the same controller and some ng/ui-route magic, but using this blows up the encapsulation proposal that the components try to offer.

So, has anyone figured out a good solution to this problem?

Answer 1

I think you have to consider always the modularity, so you can use create a service to handle all the crud and API operations and it can be reused by your other controllers and directives. Here is an example of how we did in our project. This is the git repo of on of my partners.

https://github.com/leog/epsilon

Answer 2

Here is demo from jhipster repository link

Using angular ui-router in bank-account.state.js described all states with views and controllers.