CODEWITHSUNDEEP
javascriptangularjs
Eric
Eric

Reputation: 570

Index Page different than interior pages in Angular

I'm learning Angular.js and I'm having an issue. What I want to do is have the / path render a page and then the "interior" pages to use views. My front page is drastically different than the interior pages, so having the ng-view in the index would make the views have code that overlaps. For example, the menu on the front page is different than the interior pages, so in order to use ng-view in the index the menu would need to be in the views make maintaining the code harder. Am I missing something? It seems like I should be able to designate whether a route using a template with the index or is self contained.

Upvotes: 1

Views: 91

Answers (2)

James
James

Reputation: 630

Look into nested views using ui-router instead of ngRoute. It sounds like you are using canned ng-route with angular from what I can see. But nesting views is totally doable using ui-router. If you are deep into it and you want to keep going with ngRouter (or the router of your choice that you are using) I would recommend just creating a button that links to the page. For example, in the code below: "venues" is the page I want to link to. Here is the button,

<div class="nav-buttons"><a href="#/venues">Venues</button></a></div>

Then venues was set up as a route within my application. Doing it this way, you can create modular controllers so that your code is still easily maintainable.

The other option you have is to write directives for the particular views that you want, and then just plug those in willy nilly where needed. I will often do that with navbar buttons.

Upvotes: 2

Brent Washburne
Brent Washburne

Reputation: 13158

Think of index.html as a picture frame that holds each template. You can define the top and bottom borders of the frame (the header and footer of every page) in index.html and the picture (the page contents) inside the ng-view for each page of your app.

Upvotes: 0

Related Questions