Does Angular JS support routing of multiple views on the same page

Question

Does Angular JS support having multiple ng-view sections each with its own templates on the same page? When setting up its configuration you need to wire up the different url path to different controllers and templates. But when you have multiple views on the same page, then they will each need to adjust their template and controller using the #path value from the url, and to change the view template we'll be need to switch as the #path value changes.

So how would the different ng-view sections play with each other - as each would need to append its own unique #path value to the url. Or is the url path and #value somehow kept as a private construct within each ng-view and therefore allowing multiple ng-view sections on the same page.

Answer 1

Multiple views is a limitation in angularjs and the documentation does not make it clear how to structure an application with complex views properly. Please have a look at Jan Varwig's posts on this topic

• How to do nested views in AngularJS (Hint: Don't)

• AngularJS: Views vs. Directives

Relevant Sections:

" Views are not what you use to structure your application! In fact, views are more of a crutch, a shortcut, to create structures similar to traditional websites, only with angular as a driver. When developing a web application, the way to deal with complex interfaces is to use, in combination: Scope objects/variables that store your desired view state explicitly ngSwitch directives on this view state Directives to include custom templates/perform complex DOM manipulation behavior Stop thinking of your application in terms of views that need to be loaded. That kind of thinking aligns better with imperative frameworks but doesn't work well in angular."

" View-Containers are meaningless, separated from their semantics through the routes. The other, secondary gripe that I have with UI-Routers nested views is that they violate another core idea of AngularJS: Your DOM is the main place to describe the structure of your app. Reading a template should give you an idea of what goes where. If you want to edit a user, put a directive into your template: A reader will immediately see what that directive does and what data it depends on. If you write the directive correctly it will be location independent, you can place it somewhere else in your app, as long as you pass in a user through the attribute it will work. Using views litters you templates with meaningless containers, outsourcing the actual purpose of every view into the routes/states defined elsewhere. If you nest routes, the context of every view becomes implicit, it is harder to move them around and the only way to pass data into a view is through the scope."

Answer 2

ng-route does not support multiple ng-view inside ng-app .

You can take a look at ui-router as a project which provides some support for having multiple layouts (including nested layouts) tied to the URL.

Caveat Emptor

Note: UI-Router is under active development. As such, while this library is well-tested, the API may change. Consider using it in production applications only if you're comfortable following a changelog and updating your usage accordingly.

Answer 3

Use ui-router instead of the canned ng-route! ui-router totally has nested views, and its awesome and really easy to learn. I would reccomend using ui-router instead of ngRoute to anyone.

Answer 4

Having done further reading on this, it appears that although functionality for multiple ng-view has had number of requests it was not able to make it into the Angular release, but there is possibility of something in future releases.

In this discussion Misko Hevery pointed out another approach, which is to use ng-include.

Then there is also the custom directive approach in Jan Varwig's posts which Vikas has already cited.

Also found this Angular Multiple View project on github which can be a further approach.

Answer 5

For this sort of thing you can use templates.

Create a file eg firstNavigation.html which has your snippet of html. Then call it in the controller like so.

$scope.nav = 'src/partials/firstNavigation.html';