current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

My index.html looks basically like this:

<body>
  <header ng-controller="navCtrl">
    <!-- quite a bit of html for the menu -->
  </header>
  <div ng-view>
  </div>
</body>

Since I cannot use multiple ng-views on one page I was wondering what would be the best way to move the menu (<header />) into a partial so my index.html stays nice and clean?

share|improve this question
    
I think ngInclude is what you're looking for. – CodeHater Jun 6 '14 at 12:53
up vote 2 down vote accepted

One way is to use ng-include :

<header ng-include src="'partials/topbar.htm'">
</header>
share|improve this answer
up vote 1 down vote

You could make the menu header a directive. Directives include their own templates so you could encapsulate the functionality and it would be reusable on other pages.

ie something like: <header main-nav></header> where main-nav is your directive that does whatever it needs to do.

share|improve this answer
    
As I remember, directives serves for re-using functionality, but header is complex sub-module of application instead of something that will be re-used. – Appeiron Nov 4 '15 at 10:02
    
Directives can be whstever you want them to be as an encapsulated unit. – lucuma Nov 4 '15 at 10:14
    
As well as hands! We can run on them too :D (at least it requires acrobatics) askinmask.com/2013/08/… – Appeiron Nov 4 '15 at 10:15
    
Not sure I agree with your analogy but all the same to each their own. dailymotion.com/video/… – lucuma Nov 25 '15 at 16:16
up vote 0 down vote

Have you considered using ui-router? It makes what you're saying super simple because you can have multiple ui-views and you can break your navigation into one and the app into another. It's awesome I'd highly recommend.

share|improve this answer
up vote 0 down vote

If your adding a menu that is only used once in a application, don't create a directive. Directives should be used when you want to avoid repeating code. You will probably move on to develop another application and then you will probably need a menu. But nothing can tell you at this point that that application will use the same navigation. Use the routing in angularjs with ng-view. Add whatever angular you need in the menu part to highlight links in the menu if you need. If the main page gets to big, move the menu area into a ng-include.

share|improve this answer
up vote 0 down vote

Right approach:

  • install ui-router that will allow you to use multi-views
  • ui-router separate view placed in top module
  • separate controller for header module
  • separate templateUrl for header menu or templateProvider to forecast dynamic menus (if you have user role restrictions etc.)

Bad approach:

  • ng-include with ng-controller in it
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.