2

If you know Facelets, it isn't something like a simple JSP include or angular ng-include where the template itself defines what contents should be in the template.

In Facelets, the template only defines which parts of it are dynamic or replaceable and the view can use it and tell what contents should be in those replaceable parts of the template. In Facelets, a single page can feed all the replaceable parts of the template in just one file.

Facelets example:

Template: template.xhtml:

    <h:body>
        <div>
            <ui:insert name="main_section">Main Section</ui:insert>
        </div>
        <div>
             <ui:insert name="section">Section</ui:insert>
        </div>
        <div>
             <ui:insert name="sub_section">Sub Section</ui:insert>
        </div>
    </h:body>

View: somepage.xhtml

<ui:composition template="./template.xhtml">
    <ui:define name="main_section">
        Welcome to main section which is defined by this somepage.xhtml
    </ui:define>

    <ui:define name="section">
        .. section as defined by this somepage.xhtml
    </ui:define>

    <ui:define name="sub_section">
        .. subsection as defined by this somepage.xhtml
    </ui:define>
</ui:composition>

This is unlike the regular include template in which the template does not allow the pages to define the contents of the template other than where exactly it is used in the template.

ngInclude Example

View: main.html

<div>
    <ng-include src="./somepage_main_section.html"></ng-include>
    <ng-include src="./somepage_section.html"></ng-include>
    <ng-include src="./somepage_sub_section.html"></ng-include>
<div>

Problem

In ng-include, there's no way somepage.html can define or feed other replaceable parts of the template. It has to separate all the parts of the template into multiple files and hardcode it.

I know that Facelets works on the server side while ng-include works on the browser side but what's important is the concept. As much as possible, we would want this same concept applied in AngularJS. We're using Play Framework by the way which means we can't use Facelets.

supertonsky
  • 2,563
  • 6
  • 38
  • 68
  • angular ui router supports views including named views, and the state defines which actual views are loaded for each view name. See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views – JB Nizet Aug 18 '14 at 09:31
  • It seems it doesn't allow all named views to be located in one file. And the views don't get to tell which template to use. Though it's a good start. – supertonsky Aug 18 '14 at 09:37

1 Answers1

0

With play you can use very flexible templating :)

<!--index.scala.html content-->
@()
<!--template.sacala.html  contains all css and js path (head)-->
@template(){
   @menu(somePamar)

   <!--Content-->


   @footer()
}
<!--/index.html.scala content-->

this web site it's good introduction to design of play framework and angularjs http://pauldijou.fr/blog/2013/02/17/angularjs-routing-playframework/

Allel
  • 109
  • 9
  • I couldn't see in the link or in your example where 1) the page can define which template to use and where 2) the page can define what contents it will feed different parts of the template. I'm not looking for simple page insertion. I'm looking for a mechanism where page can define what template to use and what contents it can feed it. – supertonsky Aug 18 '14 at 09:47
  • 1) [exemple of angularjs and play include](http://stackoverflow.com/questions/16085544/play-framework-2-1-angularjs-routing-best-solution), 2) [integrating play un angularjs](http://pauldijou.fr/blog/2013/02/17/angularjs-routing-playframework/) – Allel Aug 18 '14 at 09:54
  • The links you provided dont show how a page can mention a part of the template and tell what should be the contents. You might want to edit your answer and provide the code snippet to demonstrate where it is doing what Ive been looking for. – supertonsky Aug 19 '14 at 01:16