Multiple ng-views for homepage in angularjs

All we need is an easy explanation of the problem, so here it is.

Okay i am new to angular, just started working with ngRoute and ngView directives, i have come across something that is an issue for me but i suspect is only an issue due to my lack of expereince in angluar.

I have the following markup(simplified) on 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 is the default layout structure that my page uses. Now my issue is for the home page alone, a slider is shown within the div with the class “header”. Like this:

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

Now this is for the homepage only so i’m totally 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 am doing it this way, it is simply because i bought an html template online, now i am trying to integrate angularjs into the template.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

There would be only single ng-view on a single page. It won’t possible to have multiple ng-view. If you want to load other partials then you need to use ng-include directive.

Ui-router best option which has supported the multiple views which can be nested on into the other, you could take the advantage of nested views.

You could have query params here in Angular UI Router like in format url: '/test?oneParam&twoParam' whereas this feature doesn’t support in ng-route

I would suggest you to take switch from ng-route to ui-route, which has great control over url, templates & states

Method 2

You can only have one ng-view.

However , it is possible to change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.

You can also look into using ui-router, which allows for multiple parallel views.

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply