Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite
4

I'm using an index.html created with Yeoman, that looks something like this:

<html>
  <head>...</head>
  <body>

    <div ng-include="'views/main.html'"></div>

  </body>
</html>

Now, I know that I cannot use an ng-include inside another ng-include, so I don't even try that, but that's the objective that I want to achieve.

I'm using ui.router in my main.html for the nested views, but I cannot do something like this:

<header class="header">
  <!-- Rather long HTML code that I would like to put in
       a separate file like 'views/parts/header.html' -->

</header>

<div ui-view="" class="container"></div>

One naive solution would be to eliminate the first ng-include and use it in the main.html for header, footer and stuff like that.

So, hit me with what you've got, but not with that!

Edit: this is what I would love to have (but can't, since I'm already inside an ng-include)

  <div ng-include="'views/parts/header.html'"></div>
  <div ui-view="" class="container"></div>
share|improve this question
up vote 3 down vote accepted

If I do understand you properly, that all is possible. As described here:

At the end, we can use both worlds, but we have to do one more thing:

app.controller('MainCtrl', function($scope, $state, ....){
   $state.go("/");
});

Because the ng-include and ui-router startup do not match together. We have to force state reload once the target (i.e. the content of our <div ng-include="'views/main.html'"></div>) is available.

NOTE: expecting the content of main.html like this:

<div ng-controller="MainCtrl">
    ...
    <div ui-view></div>
</div>

That should solve the issue...

EXTEND: How to re-include?

The ui-router power here seems to be unlimited. We can *(re)*use the ng-include again, inside of the ui-view. So instead of this:

<div ng-include="'views/parts/header.html'"></div>
<div ui-view="" class="container"></div> // e.g. filled by content.html

We can move the header into the view itself content.html

<div>
  <div ng-include="'views/parts/header.html'"></div>
</div>

Observe that here

share|improve this answer
1  
I think you misunderstood my question. The routing is working fine, and the correct loading at startup of ui.router states is ensured by app.run(function($state){}); in my app.js. I just want to add a partial HTML inside my main.html. Take a look at my update please. – domokun Aug 22 '14 at 8:25
1  
In fact, once you are in the world of the ui-router, you do not be chained by the ng-include limitation. Simply, change your siblings ng-include and ui-view into two sibling views <div ui-view="a"><div ui-view="b">. Because exactly this way was ui-router designed. Please check: github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. Does this help? somehow...? – Radim Köhler Aug 22 '14 at 8:28
    
I am aware of the named views, but I think this is not the case. Named views would let me use several different views in a single state (and could also be reused). To add header and footer (for example) I would have to declare them in each and every state I'm using... – domokun Aug 22 '14 at 8:51
    
I extended my answer, and also created a plunker. As we can see, the ng-include could be part of the ui-view, injected by ui-router. Does that help? (ui-router is awesome library;) – Radim Köhler Aug 22 '14 at 8:53
1  
@RadimKöhler is totally right. I think its the other way round, that domokun you misunderstood Radim's solution. To make things simpler, you can infect just have a parent state, display all your headers and footers, and then nest a child state that will be your content's container. It is much cleaner, and you dont even need ng-include anywhere else. Just my 2 cents worth. – CozyAzure Aug 22 '14 at 13:20

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.