Search code examples
javascriptangularjsgrailsgspgrails-resources-plugin

How do you reference javascript files from a grails plugin within a different grails app?

I have a custom plugin which supplies several Grails controllers and several Grails domain objects. In addition there are a few UI components that have been written with AnagularJS that I would like to make use of in several other projects. The following files in the web-app directory:

  • js/directives/directivea/directivea.js
  • js/directives/directivea/directivea.html
  • js/services/restapi/restapi.js

In the plugin itself i have an index.html & index.js file that i use to run the plugin as a stand-alone app. I have no need for the functionality GSPs provide, all my controllers provide a strictly JSON ReST api that the AngularJS services communicate with.

In the plugin if I reference these files within the index.html file using a link to their path within the web-app directory (for example: js/services/restapi/restapi.js) everything works just fine. However; once I pull the plugin into one of my downstream projects, the controllers and domain objects are working wonderfully but I can't seem to determine how to reference the javascript from the plugin.

I'm open to switching to utilizing GSPs rather than static HTML files which opens the door for using the Resources plugin but i can't seem to get that to work either..

I've created the file PluginNameResources.groovy in the grails-app/conf folder of the plugin with the contents:

modules = {
    directivea {
        defaultBundle 'ui'

        resource url: 'js/directives/directivea/directivea.js'
        resource url: 'js/servicces/restapis.js'
    }
}

This is in the index.gsp of the plugin:

<html ng-app="grailsPluginAApp">
<head lang="en">
    <meta charset="UTF-8">
    <title>Grails Plugin A</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
    <script src="js/index.js"></script>
    <r:require module="hierarchyviewer"/>
</head>
<body ng-controller="index">
    <div>
        <directiveA />
    </div>
</body>
</html>

web-app/js/index.jsp contains:

var app = angular.module('grailsPluginAApp', ['RestAPIs','DirectiveAModuleName']);

All of this results in some strange javascript errors:

Uncaught object angular.js:36
(anonymous function) angular.js:36
(anonymous function)

I should add that I've looked into this question about someone trying to create a similar structure and I've tried to replicate the results with the same outcome i'm already having.

Solution

  • The solution to this was to place the reference to angular in the layout instead of the view. Grails was doing some unexpected things to my view HEAD block.