I have developed a unique plugin that offers multiple Grails controllers and domain objects. Additionally, I have created several AngularJS UI components that I wish to utilize in various other projects. These specific files are located within the web-app directory:
- js/directives/directivea/directivea.js
- js/directives/directivea/directivea.html
- js/services/restapi/restapi.js
Within the plugin, I have an index.html & index.js file that serves as the standalone application for the plugin. As I solely require JSON ReST API functionality provided by my controllers, my AngularJS services interact with them accordingly.
When referencing these files from the index.html file within the plugin using their designated paths within the web-app directory (e.g., js/services/restapi/restapi.js), everything functions seamlessly. However, upon incorporating the plugin into my downstream projects, although the controllers and domain objects work impeccably, I encounter difficulties referencing the JavaScript files from the plugin.
I am open to transitioning to utilizing GSPs instead of static HTML files, which would allow me to leverage the Resources plugin, but unfortunately, I have been unable to make it operational.
To address this, I have generated the PluginNameResources.groovy file in the grails-app/conf folder of the plugin containing the following details:
modules = {
directivea {
defaultBundle 'ui'
resource url: 'js/directives/directivea/directivea.js'
resource url: 'js/servicces/restapis.js'
}
}
The index.gsp of the plugin is structured as follows:
<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>
The web-app/js/index.jsp contains:
var app = angular.module('grailsPluginAApp', ['RestAPIs','DirectiveAModuleName']);
Despite these efforts, I am encountering peculiar JavaScript errors such as:
Uncaught object angular.js:36
(anonymous function) angular.js:36
(anonymous function)
Furthermore, I have explored a related question on this topic, attempting to replicate similar structural implementations with no avail.