angular UI Router - when to use abstract mode / nesting/named views?

Question

Couldn't figure this from the docs:

My use case: A big SPA, with multiple "widgets" or "apps" on a page - Each with a controller, data and template. preferably each of those should be a view. Currently each template is loaded with ng-include which is both annoying, not seperating interests and not working very well, since the view controller might be initialized before the main ctrl is resolved - which is the reason we switched to UI router.most of the time the url aren't nested - for example a /page url can contain a Listview, a userview etc.

I want to move this to UI router (after I already moved the existing routing to UI router and checked everything is working correctly) and I'm not sure what is the right way to compose the widgets/views together. Should I use an abstract view that would hold /page template (and containing the routes) and set each widgets as a view inside this abstract? or would it work without the abstract. should I use named or nested (saw somewhere that named views are regarded a code smell, not sure why). what are the guidlines to choosing between the options and what are the best practices to set this up? I'll be happy for any advice about this.

Thanks!

Answer 1

If you want to have a common parent view (for example, a view with an admin bar for example) that , you can use abstract states. This

If you need to group routes with a common view, then you have to use an abstract state. For example, if you want to have an /admin route where all views have the same navbar, then you can create the abstract state admin because you want that their children share their navbar, but you don't want that the single /admin route will be reachable by a user. However, if you want that the /admin route will be reachable, you don't need to set the state as abstract (in this case, the ui-view directive inside the parent state will show nothing).

A little summary from the docs. An abstract state can be useful to:

• Prepend a url to all child state urls.
• Insert a template with its own ui-view(s) that its child states will populate.
• Inherit $scope objects down to children.

Answer 2

Abstract states are useful if you want to 'prepend' a url/state on some child states, I don't think it's the best choice for you. Use dot separated states like page and page.subpage . I think will work for you. A good practice is to set controllers, templates and resolve inside the states on the module config, this way you can use the state as a single piece of code that links your model to the view. Check the documentation for ui-router in the wiki for a better understanding.