Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
my-page.html
my-page.js
page1.html
page2.html
routing.js
sample-routing.html
sample.html
ui-lib.js

README.md

AngularJS Directives to model multisite template inclusions

In our project we have modeled multi site trasclusion after JSF 2's ui:composition, ui:insert, ui:define (see [ui:composition][1]).

Implementation consists of three simple directives: ui-template, ui-insert, ui-define (see [angularjs-api/template/ui-lib.js][2]).

To define a template one writes the following markup (see [angularjs-api/template/my-page.html][3]):

<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][4]):

  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][5]):

<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][6]

See also: [Multisite Transclusion in AngularJS][7] [1]: http://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/ui/composition.html [2]: ui-lib.js [3]: my-page.html [4]: my-page.js [5]: sample.html [6]: sample.html [7]: http://www.nesterovsky-bros.com/weblog/2015/05/04/MultisiteTransclusionInAngularjs.aspx

You can’t perform that action at this time.