All geek questions in one place

Multiple ng views for the main page in angularjs

It's good that I'm new to angular, I just started working with the ngRoute and ngView directives, I came across something that is a problem for me, but I suspect that this is only a problem due to my lack of experience in angluar.

I have the following markup (simplified) in my index.html page:

<html> <head> <title>Sample APP</title> </head> <body> <div class="header"> <nav class="pull-right">...</nav> </div> <div class="main" ng-view> </div> <div class="footer"> </div> </body> </html>

The above default layout structure used by my page. Now my problem concerns only the home page, the slider is shown in a div with the class "header". Like this:

 <div class="header"> <nav class="pull-right">...</nav> <div class="slider">...</div> <div>

Now this is only for the main page, so I am completely confused about how to implement this. Do I need two ng-view directives on my index page? eg:

 <html> <head> <title>Sample APP</title> </head> <body> <div class="header"> <nav class="pull-right">...</nav> <div class="slider" ng-view>...</div> </div> <div class="main" ng-view> </div> <div class="footer"> </div> </body> </html>

Also, if you need to know why I do it this way, itโ€™s just because I bought the html template online, now I am trying to integrate angularjs into the template.

+6
source share
2 answers

There will be only one ng-view on one page. It is impossible to have multiple ng-view . If you want to load other partial files, you need to use the ng-include directive.

Ui-router is the best option that supports several kinds that can be nested in another, you can take advantage of nested views.

You can have request parameters here in Angular UI Router, as in url: '/test?oneParam&twoParam' format url: '/test?oneParam&twoParam' , while this function is not supported in ng-route

I suggest you switch from ng-route to ui-route , which has excellent control over url , templates and states

+5
source

You can only have one ng-view .

However, you can change its contents in several ways: ng-include , ng-switch or map different controllers and templates via routeProvider.

You can also learn about ui-router , which allows you to use multiple parallel views.

Here is an example of multiple views using ui-router .

+3
source

Source: https://habr.com/ru/post/986528/

More articles:


All Articles