Multiple ng-views for homepage in angularjs

Asked 4/5, 2015 at 19:39 Answered 4/5, 2015 at 19:42

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.

Kolnick answered 4/5, 2015 at 19:39 Comment(0)

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

Biosynthesis answered 4/5, 2015 at 19:42 Comment(11)

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? – Kolnick 4/5, 2015 at 19:54

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 – Biosynthesis 4/5, 2015 at 19:56

So i put that code inside my controller but then how does the slider template autoload itself on my homepage? – Kolnick 4/5, 2015 at 19:58

you need to specify that template inside your $state defination with your slider template and controller – Biosynthesis 4/5, 2015 at 19:59

Please show me an example of this, this is all new to me. – Kolnick 4/5, 2015 at 20:1

@user3718908 this would be best example of nested state plnkr.co/edit/u18KQc?p=preview – Biosynthesis 4/5, 2015 at 20:3

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? – Kolnick 4/5, 2015 at 20:16

@user3718908 you could use ` $urlRouterProvider.otherwise("/home");` to load your default state, that state will load your template & controller – Biosynthesis 4/5, 2015 at 20:17

Sorry you've been very helpful but i still don't get it, will continue looking for something. – Kolnick 4/5, 2015 at 20:21

Let us continue this discussion in chat. – Biosynthesis 4/5, 2015 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. :) – Kolnick 6/5, 2015 at 12:40

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.

Yeast answered 4/5, 2015 at 19:41 Comment(2)

This may be asking for too much but since i am new can i get an example of what i want to achieve? – Kolnick 4/5, 2015 at 19:44

@user3718908 just added an example for you. – Yeast 4/5, 2015 at 19:45

Recommended topics

Hot tags