Question

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.

Answer 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

Answer 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.

Multiple ng-views for homepage in angularjs

2 个答案: