Using templates with AngularJs

The purpose of this blog is to demonstrate how to use templates in AngularJS. A fully worked example is provided via jsFiddle. The example is simple and easy to follow. A detailed but succinct explanation of the code is provided.

The template is “complex html” that we’ll want to reuse. The directive will allow this complex html to be delivered anywhere without code duplication. This obviously has advantages in terms of code reuse and maintainability.

The example is for demonstration purposes, it simply shows how to create templates using AngularJS.

The Markup

 

The Template

 

The AngularJS

 

Working example – JSFiddle

http://jsfiddle.net/jralston/du9oy5nL/

How it all works…..

The contents of the template should not contain any DOM ID’s due the fact that it can be repeated on the page. We don’t want duplicate DOM ID’s.

The link function is called during the rendering of each directive. I.e. The link function is executed once for each instance of the template. If we put a console.log() in the link function, we would see it invoked twice.

The getUuid() function is just for demonstration purposes. It generates a unique ID something like this ‘ae6aa6ad-140f-40e4-919e-ff850f3eb13d’. It demonstrates perfectly however, that each instance of the template is unique.

restrict: “E”

Causes the element to be matched. We could have used “A” for attribute or “C” for class. In our case however, the directive will be triggered anywhere the ‘my-template‘ element appears.

template

This defines the template markup. templateUrl can also be used, this would allow another page to be uses as the template.

replace:true

Setting this to true means the element ‘my-template’ will be replaced by the contents of the template. If we set it to false, the element my-template would remain in the markup.

my-template versus myTemplate

HTML markup is not case sensitive therefore it’s not really feasible to attempt to do case sensitive matches. So why not do case insensitive matches? I’m not certain but I guess it’s to do with the fact that object properties are case sensitive so there’s something of a conflict of interest here. I guess the developers of angular reached a decision on how to match markup to JS objects after exhausting the topic. This is what they came up with and that’s just the way things are by design.

Isolated Scope

Note the use of scope: {} in the directive. This effectively isolates the scope. So when we set $scope.uuid in the link function we’re setting it just for that instance of the template.

To demonstrate this, comment out scope: {} and run the code. Now we see that both UUID’s are the same (not unique a t all). This is because both directives/templates are now inheriting the parent scope. The assignment $scope.uuid = getUuid(); is setting the uuid on the parent scope. Or more accurately, the directive/template instances don’t have their own unique scope, they basically operate on the parent scope.

It’s possible to pass in parameters to the directive. Subsequent blogs will cover this but for now suffice it to say:

 

 

A note on IE8

IE 8 will throw a JS error regarding the presence of invalid markup. I.e. the ‘my-template‘ element. To keep IE8 happy, simply add this to the top of the page

 

More on this here: http://outbottle.com/angularjs-permitting-angularjs-templates-in-ie8/

 

Conclusion

This posting has shown by example how to use a repeatable template using AngularJS. A fully worked example is provided complete with detailed explanation.

Scope isolation is explained and can be demonstrated easily in the jsFiddle. A brief introduction is provided, in context, regarding the passing of parameters from the parent to child directives.

Questions, comments and corrections always welcome……