Loading angularjs in grails 2.3.4

https://stackoverflow.com/questions/21477305

05-10-2022
|

Domanda

I have an index.gsp page and want to load my angularjs lib files:

<head>
<meta name="layout" content="main" />
<title>Title Page</title>

<!-- here we are loading angularjs -->
<r:require module="angular" />

</head>
<r:layoutResources />
<body>
    <div ng-view>
        <div>Hello World!</div>
        <p>Nothing here {{'yet' + '!'}}</p>
        <p>1 + 2 = {{ 1 + 2 }}</p>
    </div>
</body>

However I only get the plain HTML:

Hello World!

Nothing here {{'yet' + '!'}}

1 + 2 = {{ 1 + 2 }}

My ApplicationResources.groovy looks like that:

modules = {

    'angular' {
        resource url:'js/lib/angular-1.2.8/angular.min.js'
        resource url:'js/lib/angular-1.2.8/angular-resource.min.js'
    }

}

My folder structure looks like that:

enter image description here

When I start my application I get this as an error:

| Server running. Browse to http://localhost:8080/testApplication
| Application loaded in interactive mode. Type 'stop-app' to shutdown.
| Enter a script name to run. Use TAB for completion:
....[/testApplication].[gsp] Servlet.service() for servlet [gsp] in context w
ith path [/testApplication] threw exception
java.lang.RuntimeException: It looks like you are missing some calls to the r:la
youtResources tag. After rendering your page the following have not been rendere
d: [defer]
        at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)

        at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstruct
orAccessorImpl.java:57)
        at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingC
onstructorAccessorImpl.java:45)
        at java.lang.reflect.Constructor.newInstance(Constructor.java:526)
        at org.springsource.loaded.ri.ReflectiveInterceptor.jlrConstructorNewIns
tance(ReflectiveInterceptor.java:986)
        at org.codehaus.groovy.reflection.CachedConstructor.invoke(CachedConstru
ctor.java:77)
        at org.codehaus.groovy.runtime.callsite.ConstructorSite$ConstructorSiteN
oUnwrapNoCoerce.callConstructor(ConstructorSite.java:102)
        at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCallConstru
ctor(CallSiteArray.java:57)
        at org.codehaus.groovy.runtime.callsite.AbstractCallSite.callConstructor
(AbstractCallSite.java:182)
        at org.codehaus.groovy.runtime.callsite.AbstractCallSite.callConstructor
(AbstractCallSite.java:190)
        at org.grails.plugin.resource.DevModeSanityFilter.doFilter(DevModeSanity
Filter.groovy:54)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:243)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:210)
        at org.codehaus.groovy.grails.web.servlet.mvc.GrailsWebRequestFilter.doF
ilterInternal(GrailsWebRequestFilter.java:69)
        at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerR
equestFilter.java:107)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:243)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:210)
        at org.codehaus.groovy.grails.web.filters.HiddenHttpMethodFilter.doFilte
rInternal(HiddenHttpMethodFilter.java:67)
        at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerR
equestFilter.java:107)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:243)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:210)
        at org.springframework.web.filter.CharacterEncodingFilter.doFilterIntern
al(CharacterEncodingFilter.java:88)
        at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerR
equestFilter.java:107)
        at org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(D
elegatingFilterProxy.java:343)
        at org.springframework.web.filter.DelegatingFilterProxy.doFilter(Delegat
ingFilterProxy.java:260)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:243)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:210)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperV
alve.java:222)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextV
alve.java:123)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.j
ava:171)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.j
ava:100)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineVal
ve.java:118)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.jav
a:408)
        at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp
11Processor.java:1041)
        at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(
AbstractProtocol.java:603)
        at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoin
t.java:310)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.
java:1145)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor
.java:615)
        at java.lang.Thread.run(Thread.java:744)

I do not think so that the "not loading of angularjs" has really sth to do with this error, but I really do not know why it does not load?

I appreciate your answer!

UPDATE

Even though by removing the tag <r:layoutResources /> I get the same error

Soluzione

You need to register angular by setting the ngApp directive. If you change

<div ng-view>

<div ng-app>

you should be fine.

EDIT

Here the code with which I tested and suppose to work nicely.

index.gsp

<head>
  <meta name="layout" content="main" />
  <title>Title Page</title>
  <r:require module="angular" />
</head>
<body>
  <div ng-app>
    <div>Hello World!</div>
    <p>Nothing here {{'yet' + '!'}}</p>
    <p>1 + 2 = {{ 1 + 2 }}</p>
  </div>
</body>

main.gsp

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title><g:layoutTitle default="Grails"/></title>
  <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
  <g:layoutHead/>
  <g:javascript library="application"/>     
  <r:layoutResources />
</head>
<body>
  <div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div>
  <g:layoutBody/>
  <div class="footer" role="contentinfo"></div>
  <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>
  <r:layoutResources />
</body>
</html>

ApplicationResources.groovy

modules = {
  application {
    resource url: 'js/application.js'
  }

  'angular' {
    resource url: 'js/angular.js'
  }
}

output

Hello World!
Nothing here yet!
1 + 2 = 3

Altri suggerimenti

Try using ng-app and layoutResources both in head and body.

<head>
<meta name="layout" content="main" />
<title>Title Page</title>

<!-- here we are loading angularjs -->
<r:require module="angular" />
<r:layoutResources />
</head>

<body>
    <div ng-app>
        <div>Hello World!</div>
        <p>Nothing here {{'yet' + '!'}}</p>
        <p>1 + 2 = {{ 1 + 2 }}</p>
    </div>
    <r:layoutResources />
</body>

and ApplicationResources.groovy as

'angular' {
    resource url:'/js/lib/angular-1.2.8/angular.min.js'
    resource url:'/js/lib/angular-1.2.8/angular-resource.min.js'
}

Add path as /js/lib/...

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow