Inserting different views in Angular using the ng-view Directive

Question

Can anyone help me with this view issue that I have. This is a hypothetical example so there is no code to see.

So say I have a site simple site with three routes

/signin 
/users 
/users/:id

I hit the sign-in route (/signin) and the sign-in view is inserted into <ng-view> in the index.html. The sign-in view is a simple form with username and password.

After a successful sign-in I arrive at the user list view (/users), which contains say a header, footer, left-side-nav and the user list as the main content in the middle.

I then click on a user in the list and I’m taken to the user detail page (/users/:id). The problem I have now is i only want to update the main content. I dont want to keep inserting the header, footer and left-nav into the view. So to get around that I could do this in my index.html

<header/>
<left-nav/>
<div ng-view></div>
<footer/>

Now when I change routes only the main content changes but the issue I have now is if I return to the signin screen it now contains a header, footer and nav that I dont want.

This ideally what I want.

Go to sign-in page.
Sign-in view gets inserted.
Successful sign-in.
User list view gets inserted. Contains header, footer, nav and main content containing user list.
Click on user in list.
User detail page is displayed in main content. Header, footer and nav remain static.

How do I make this work without some hooky fix?

As an addition, I know I can just hide the the other elements, i.e hide the header, footer ect, when I'm in the sign-in screen but that doesn't feel like the right thing to do. A colleague tells me that's the way you do things in Angular. — screenm0nkey
– screenm0nkey, Commented Jan 31, 2014 at 10:12
Hiding elements could lead to a code bloated with conditionals. See my example of nested views at jsbin — Igor Malyk
– Igor Malyk, Commented Jan 31, 2014 at 12:17

Igor Malyk · Accepted Answer · 2014-01-31 12:07:02Z

1

What you want is basically a nested views and states. So that all routes under /parent like /parent/:id have the same layout. As of now angular ngRoute doesn't support nested ng-views. There are two ways of solving this

Use the ng-include's and a separate service to handle the routing logic i.e. when to use ng-include to get the layout (header, footer, menu) for this route and of what type.
Use ui-router which supports nested routing out of the box and will likely be incorporated into the angular-core sooner or later.

Toggling visibility of the elements according to the current route is a fast way to a messed code and a lot of nested conditional statements if you are going to have more than two different layouts.

Hope this example helps JsBin Example. Feel free to ask additional questions regarding the nested views.

edited Jan 31, 2014 at 12:07

answered Jan 31, 2014 at 10:33

Igor Malyk

2,6562 gold badges27 silver badges34 bronze badges

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

2 Comments

screenm0nkey Over a year ago

Is this a standard way for app development in the Angular community, to use the ui-router and nested states?

Igor Malyk Over a year ago

I am not sure about the whole community but I do use them in my two projects and ui-router seems to be a good tool with a lot of features. Of course that is an additional code for users to download but it is worth it. I first tried to use ng-hide/ng-if/ng-switch to hide/show the elements depending on the current route. Then I moved to ng-include's and a logic of what templates to include for a given route. Now I'm using the ui-router and it handles all the issues.

Collectives™ on Stack Overflow

Inserting different views in Angular using the ng-view Directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related