How do I dynamically load multiple templates using AngularJS?

Question

I'm new to AngularJS, coming from a PHP background where I do all the template aggregation on the server. With PHP I would grab several templates, mash them together, then send it to the clients browser. AngularJS allows me to insert a template using ng-view. This is great, but it doesn't handle the case where the template that I insert may include tags that are placeholders for other templates. For example, I may have the following as one of my templates:

<div class="some_class">
    <div class="another_class">
        {content}
    </div>
</div>

In PHP I would insert this template, then replace the contents of {content} with another template. In AngularJS I know how to insert the main template (using ng-view), but I'm not sure how to dynamically load my "partial template" into the {content} tag. How is this suppose to be done with AngularJS?

https://github.com/angular-ui/ui-router perhaps? – akonsu Jun 30 '13 at 03:33 — akonsu, Jun 30 '13 at 03:33
Use `ui-router` like akonsu said. – holographic-principle Jun 30 '13 at 14:04 — holographic-principle, Jun 30 '13 at 14:04

score 18 · Accepted Answer · edited Feb 02 '16 at 22:25

18

A straightforward approach would be to use the ngInclude directive:

<div class="some_class">
  <div class="another_class">
    <ng-include src="templatePath"></ng-include>
  </div>
</div>

Then, in Controller that is associated with this template you can define the templatePath variable dynamically:

function MyCtrl($scope){
  $scope.templatePath = // define this var dynamically here
}

edited Feb 02 '16 at 22:25

reinierpost

8,425
1
38
70

answered Jun 30 '13 at 13:47

Stewie

60,366
20
146
113

score 3 · Answer 2 · edited May 23 '17 at 11:59

3

Using ng-view to nest multiple templates is not currently supported natively in Angular.js. There are, however, multiple options to emulate that functionality. See the answers in this SO question for several of those options, including the ui-router suggested by akonsu.

edited May 23 '17 at 11:59

Community

1
1

answered Jun 30 '13 at 05:02

John Woodruff

1,608
16
29

How do I dynamically load multiple templates using AngularJS?

2 Answers2