Proper way to structure a page in angular

Question

I had an interesting discussion with one of my colleagues. We are building a complex UI using angular, we have 2 different approaches

1. Use 1 controller for the whole page, it's simple, everything will just work
2. Break the page into multiple smaller directives, each inherits the main controller's scope. The main controller fetches the data and passes it down to child directives (well not really pass it down, more like the children can just get it from the scope). Basically, each child directive handles one portion of the UI. This approach requires more files and is more complex

I am looking for more options and/or opinions about the 2 approaches mentioned above.

Answer 1

Checkout the Angular Style guide by John Papa https://github.com/johnpapa/angular-styleguide

This style guide contains all the best practices you need to know about AngularJS

Answer 2

Since you said you build a complex UI, I would strongly recommend using the second appraoch. The first one has just one average: its faster to write. The disadventages outweigh this by far. It will grow fast and you will lose track of what is happening what might lead to unsuspected behaviors. Its much harder to test and maintain. The second approach is also better when it comes to reusability which improves code quality.