Having a strong experience in ASP.NET and JSF, we found angular's transclusion concept is obscure and counterintuitive. It took a while for both of us to grasp the transclude's ideas described the Developer Guide. We suspect that this is due to the bad design: a bad design leads to a bad wording.
The other consequence of the bad design is that the transclusion is limited to one template per directive, which limits the use of the feature.
Consider:
my-page
templateUrl: my-page.html
my-page.html
Unfortunately, you cannot immediately implement this design in angularjs. On the other hand ASP.NET's Master Pages, and JSF's ui:composition readily solve this task.
Here is one of JSF's approaches:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"> <h:body> <table> <tr> <td><ui:insert name="menu"/></td> </tr> <tr> <td><ui:insert name="content"/></td> </tr> </table> </h:body> </html>
ui:composition
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"> <h:body> <ui:composition template="my-page.xhtml"> <ui:define name="content"> My Content <ui:define> <ui:define name="menu"> <a href="#file">File</a> <a href="#edit">Edit</a> <a href="#view">View</a> <ui:define> </ui:composition> </h:body> </html>
We have decided to model angular directives after JSF, and have defined three simple directives: ui-template, ui-insert, ui-define (see angularjs-api/template/ui-lib.js).
To define a template one writes the following markup (see angularjs-api/template/my-page.html):
<table ui-template> <tr> <td ui-insert="menu"></td> </tr> <tr> <td ui-insert="content"></td> </tr> </table>
and declares a directive (see angularjs-api/template/my-page.js):
var myPage = { templateUrl: "my-page.html", transclude: true }; angular.module("app"). directive("myPage", function() { return myPage; });
and finally, to instantiate the directive one needs to write (see angularjs-api/template/sample.html):
<my-page> <div ui-define="content"> My content </div> <div ui-define="menu"> <a href="#file">File</a> <a href="#edit">Edit</a> <a href="#view">View</a> </div> </my-page>
The working sample can be seen through rawgit: sample.html
The other sample that integrates with routing can be found at sample-routing.html
Remember Me
a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u