Is it possible to do reusable snippets within AngularJS templates?

Question

I'm finding myself repeating the same snippets of code again and again, is it possible to do something like this in AngularJS:

<div ng-snippet="mySnippet"> 
  This is a snippet 
</div> 

<div ng-snippet="anotherSnippet"> 
  Yet another snippet!!
</div>

<ng:include src="anotherSnippet">
<ng:include src="anotherSnippet">
<ng:include src="mySnippet">

and the output of the above would be:

Yet another snippet!!
Yet another snippet!!
This is a snippet

I'm not necessarily looking for this exact "ng:include" solution or pattern but something that would reduce the repetition in my templates.

DaveJ · Accepted Answer · 2012-10-03 08:26:49Z

39

<script type='text/ng-template' id="mySnippet"> 
    This is a snippet 
</script> 

<script type='text/ng-template' id="anotherSnippet"> 
    Yet another snippet!!
</script>

<ng-include src="'anotherSnippet'"></ng-include>
<ng-include src="'anotherSnippet'"></ng-include>
<ng-include src="'mySnippet'"></ng-include>

This should be what you want.

Docs for script and ng-include.

edited Oct 3, 2012 at 8:26

DaveJ

2,4376 gold badges30 silver badges35 bronze badges

answered Oct 2, 2012 at 22:54

Renan Tomal Fernandes

11k4 gold badges50 silver badges31 bronze badges

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

1 Comment

Travis Heeter Over a year ago

Awesome. What about a form where you want inputs to link to different objects, and different names for the inputs? plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview

dnc253 · Accepted Answer · 2012-10-02 21:43:44Z

12

This sounds like you want to use directives. Here is a simple example: http://jsfiddle.net/gyF6V/1/

answered Oct 2, 2012 at 21:43

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

3 Comments

btford Over a year ago

I'd go with directives over includes; they'll make your markup more readable.

Nick Manning Over a year ago

Whenever I see html inside a string, something inside me just doesn't feel right.

dnc253 Over a year ago

If you don't want html inside the the javascript, just use the templateUrl property instead of template and point it to the html file that has your template.

Collectives™ on Stack Overflow

Is it possible to do reusable snippets within AngularJS templates?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related