different page structures with angular js ui-router

Question

My be this is very basic, but I am really stuck here, here is my question : I am using angular-ui-router with angular js

This is how my pages are structured (Left:Homepage, Right:Inner Pages (/about-us) ) : enter image description here

Homepage (/)

Header
Content (100% width, one column)
Footer

so I create directives for Header, & Footer, and they will be common through out the site. & I load Content in ui-view, here is how my main template look like

<header-directive></header-directive>
<div ui-view></div>
<footer-directive></footer-directive>

And here are all the other pages strucure e.g (/about-us)

Header
Content Image/Map (100% width)
Content (75% Width)
Sidebar (25% Width)
Footer

So according to the Homepage structure above I need to load Content Image/Map, Content, and Sidebar in the UI-VIEW now, but Sidebar is common too, and that won't change on inner pages.

So the inner pages I only want to load Content Image/Map, and Content. Is there a way to achieve that ?

Tome Pejoski · Accepted Answer · 2015-01-25 12:58:46Z

1

There is a very good blog post about UI-Router, http://www.funnyant.com/angularjs-ui-router/. Here the author creates similar example to yours, so I think it might help you.

answered Jan 25, 2015 at 12:58

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

different page structures with angular js ui-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related