6

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.

user3718908x100
  • 7,939
  • 15
  • 64
  • 123

2 Answers2

5

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

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • I'm soo confused by all this, how do i check if the current page/route/state is home and inject the slider into my view? – user3718908x100 May 04 '15 at 19:54
  • 1
    you can have access to current state using `$state` service which will have all the information about `state`, `params` , url like if you do `$state.current.name` will give name of `state` & `$state.params` will contain a collection of parameter which are present in route with there values – Pankaj Parkar May 04 '15 at 19:56
  • So i put that code inside my controller but then how does the slider template autoload itself on my homepage? – user3718908x100 May 04 '15 at 19:58
  • you need to specify that template inside your `$state` defination with your slider template and controller – Pankaj Parkar May 04 '15 at 19:59
  • Please show me an example of this, this is all new to me. – user3718908x100 May 04 '15 at 20:01
  • @user3718908 this would be best example of nested state http://plnkr.co/edit/u18KQc?p=preview – Pankaj Parkar May 04 '15 at 20:03
  • Okay i checked that out and it is an example of a nested state but in the example you need to click a link to see the nested state, my nested state(my slider) should show by itself when the page loads, any ideas? – user3718908x100 May 04 '15 at 20:16
  • 1
    @user3718908 you could use ` $urlRouterProvider.otherwise("/home");` to load your default state, that state will load your template & controller – Pankaj Parkar May 04 '15 at 20:17
  • Sorry you've been very helpful but i still don't get it, will continue looking for something. – user3718908x100 May 04 '15 at 20:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76930/discussion-between-pankajparkar-and-user3718908). – Pankaj Parkar May 04 '15 at 20:21
  • Hello thank you for your help, i read through all the stuff you showed me and i was able to implement what i wanted to do. :) – user3718908x100 May 06 '15 at 12:40
3

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.

Alex Pan
  • 4,341
  • 8
  • 34
  • 45