3

I have a couple pages that share a layout. I am adding some new pages that are going to be using angular. I am trying to find out how to set it up the template so in the child pages I can add to the html elements attribute a ng-app='xyz'.

e.g.

_layout.gsp

<html lang="en"  >

would love to just do child.gsp - 

<html ng-app='angularApp'>
<meta name="layout" content="layout">

But obv, that doesn't work. Is there any easy way to achieve this ?

Is there a way to use the content pattern? I tried...

//child.gsp
<meta name="angularApp" content="angularApp"/>

//layout.gsp
<html lang="en" <%  meta(name: 'angularApp')? "ng-app='${meta(name: 'angularApp')}'":"" %> >

But it just results in nothing...

dmahapatro
  • 49,365
  • 7
  • 88
  • 117
Nix
  • 57,072
  • 29
  • 149
  • 198
  • If you add `ng-app='angularApp'` on the `_layout` template, shouldn't that be available to children? – dmahapatro Jun 17 '13 at 15:37
  • Do you need different `ng-app`s for different child gsps? – dmahapatro Jun 17 '13 at 17:06
  • I dont, but I wanted the flexibility... – Nix Jun 17 '13 at 18:25
  • Following @ivar's answer you would end up copy of the same `ng-app` for all the children pages although it will work well. In general, if you have only one `ng-app` then you can follow the way I have mentioned in my answer. – dmahapatro Jun 17 '13 at 18:38

2 Answers2

9

In _layout.gsp that is being used by your view:

<html lang="en" ${pageProperty(name:'page.ngapp')} > ...... </html>

Then you will be able to alter the value in subsequent gsp views that use previous layout:

<content tag="ngapp">ng-app='angularApp'</content>

EDIT: In newer version of grails that I was using (2.4.4) I had to specify the attribute - value combination without quotes:

<content tag="ngapp">ng-app=angularApp</content>

Finally the rendered view will have whatever you wanted there to be:

<html lang="en" ng-app="angularApp" > ..... </html>
Ivar
  • 4,350
  • 2
  • 27
  • 29
1
//layout.gsp
<html lang="en" ng-app="angularApp">

//child.gsp
<meta name="layout" content="layout"/>

The angular app will be injected in the main (parent) layout and will be available for all the children views when required. You can also use ng-view if you are interested in a single page application.

dmahapatro
  • 49,365
  • 7
  • 88
  • 117
  • I dont follow this? Wouldn't this "always" be in the child.gsp pages? – Nix Jun 17 '13 at 18:44
  • @Nix Yes, you access your angular app in child gsp pages but you do not have to inject the angular app on each child page if you have already injected the app in main layout. `$scope` will be available across the child pages if they use the content of `layout.gsp`. – dmahapatro Jun 17 '13 at 18:52
  • I dont see any injection in your code. I read this as all layouts will have the `ng-app='angularApp'` attribute. – Nix Jun 17 '13 at 18:58
  • @Nix Sorry, I meant "bootstraped" instead of "injected". Yes, exactly that is the objective. If we have only one angular app to be used by the gsps then bootstrap the app in the layout and access the app in the children gsps instead of using `ng-app` on each of the child pages. – dmahapatro Jun 17 '13 at 19:09
  • Thats not what I need. I conditionally want to set it in the children pages. – Nix Jun 17 '13 at 19:10
  • @Nix Got it. As a side note (no offense), I do not see any additional benefit in bootstrapping the same angular app to all the child pages explicitly. May be you have a different design consideration, but the approach is redundant if all the child pages use `layout.gsp`. – dmahapatro Jun 17 '13 at 19:20
  • I am not using the same app on all pages. – Nix Jun 17 '13 at 19:40