I am implementing an AngularJS application that has a three-panel main view. The layout is a bit like a mail system, with a navigation bar on the left. The right pane is split in two; when you select something from the navigation bar, it populates the top-right pane, and when you select something there, it populates the bottom-right pane. The panes need to be resizeable and scrollable.
I can see three basic ways to implement this:
There is very little info online on using AngularJS with frames, which leads me to think that (1) is not recommended. I'm just a bit worried with (2) that JavaScript resizing and scrolling will be inferior to native controls. In some cases the content may be large. And (3) seems to combine the worst of each approach.
So I'm looking for advice on which approach is likely to work best.
In my opinion its not recommended using frames because breaks generic functions of the browser like sharing urls, navigation between frames, default frameset, etc.
The best solution is using ui router plugin https://github.com/angular-ui/ui-router with nested views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. You should check the example at documentation
For Scrollable div you should use css property and for resize it probably would be nice to define a directive
I hope it helps
angular ui-router is good option for solving posted issue.
https://github.com/angular-ui/ui-router
for css - there are a lot of different framework, most famous is bootstrap. or you can craft css by your own hands.