Does Angular JS support multiple view routing on the same page

Question

Does Angular JS support multiple ng-view sections with their own templates on the same page? When configuring, you need to connect a different URL path to different controllers and patterns. But when you have several views on the same page, each of them will have to configure its own template and controller using the #path value from the URL, and in order to change the presentation template, we will need to switch with changing the #path value.

So, how would different ng-view sections play with each other - since each had to add its own unique #path value to the url. Or, the url and #value paths are somehow stored as a private construct in each ng view and therefore allow multiple ng-view sections on the same page.

Answer 1

Multiple views are a limitation in angularjs, and the documentation doesn't let you know how to properly structure an application with complex views. Please see Jan Varwig on this subject.

• How to do nested views in AngularJS (Hint: Dont)

• AngularJS: opinions versus directives

Relevant sections:

" Views are not designed to structure your application! Actually, views are more like 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 solve complex interfaces is to combined use: Area objects / variables that explicitly preserve your viewing state of the ngSwitch Directive in this view of the Directive to include custom templates / perform complex DOM manipulation behavior Stop thinking about your application in terms of the views you need to download, which is more consistent with the imperative framework, but doesn't work in angular.

" View-Containers are pointless, separated from semantics via routes. Another, secondary problem that I encounter with UI-Routers nested representations is that they violate yet another basic idea of ​​AngularJS: your DOM is the main place to describe the structure of your reading the template should give you an idea of ​​what is happening. If you want to edit the user, put the directive in your template: The reader will immediately see what this directive does and what data it depends on. If you write correctly Likewise, this will be location-independent, you can place it somewhere else in your application if you pass the user the attribute that it will work in. Using views, you create templates with meaningless containers, passing the actual purpose of each view to routes / states defined elsewhere. If you insert routes, the context of each view becomes implicit, it’s more difficult to move them, and the only way to pass data to the 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 that provides some support for the fact that multiple layouts (including nested layouts) are bound to a URL.

Caveat emptor

Note. UI-Router is under active development. Thus, although this library is well tested, the API may change. Consider using production applications only if you are comfortable after changing the change log and updating them accordingly.

Answer 3

Use ui-router instead of the finished ng route! The ui-router fully has nested looks, and its amazing and very easy to learn. I would recommend using ui-router instead of ngRoute for everyone.

Answer 4

After reading this, it turned out that although the functionality for multiple ng-view had a number of requests, it could not get into the Angular release, but there is a possibility of something in future releases.

In this discussion, Mishko Hevery pointed out a different approach that ng-include should use.

Then in Jan Varwig's posts there is also a customizable directory approach that Vikas has already quoted.

Also found is this Angular Project with several views on github , which may be an optional approach.

Answer 5

You can use templates for this kind of thing.

Create a file, for example. firstNavigation.html that your html fragment has. Then call it in the controller like this.

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