Angular JS: include partial HTML inside another ng-include

Question

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>

Community · Accepted Answer · 2017-05-23 12:31:52Z

3

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

stateprovider in angularjs - not rendering the ui-view
and shown here in this plunker

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Aug 22, 2014 at 8:14

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

5 Comments

domokun Over a year ago

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.

Radim Köhler Over a year ago

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...?

domokun Over a year ago

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...

Radim Köhler Over a year ago

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;)

CozyAzure Over a year ago

@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.

Collectives™ on Stack Overflow

Angular JS: include partial HTML inside another ng-include

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related