I did one AngularJs app which was rather complex, with multiple nested tabs, which had multiple nested views & controllers, needed ng-router, and was quite tricky for me to implement, as browser based coding is not my usual thing.
Now I have been asked to code something for a friend. He was to have a column of buttons down the left sized and when a button is clicked the corresponding contents should be shown on the page.
Conceptually, this seems the same as the previous project (although it is not yet clear whether there will be any nesting).
I could just have a single view, with a single controller and several <div>
s which I can ng-hide
and ng-show
, but something makes me think that I ought to use multiple views & controllers, although I am not certain.
How should I implement it, and why?
2 Answers 2
In general I think it is good to keep the separation of concerns in mind. Don't hesitate to create new views and new controllers. If you correctly define the responsibility of each controller, in the end your code is much easier to maintain.
In your specific case, if you haven't already, have a look at directives in AngularJS. They are pretty well explained in this course provided by Google.
As the previous answer states, separation of concerns is a good idea. In your context, this basically means grouping related code into separate controllers, rather than grouping based on the design pattern that they are all controller operations. This means that if your application needs to be refactored or parts reused in some way, that you won't have to go through a painful extraction process. It also means that people who come after you to maintain the code don't have to understand a monolithic controller.
ui-router
. It's a component that replaceng-router
and is made to better handle that.