How do you point to an AngularJS Template from within a JS file provided by a Grails plugin?

Question

I have a Grails app which pulls in several Grails Plugins. These plugins need to be reused by several other Grails apps not just my own.

In a Resources Bundle in one of the Grails Plugins I have the following defined: leaving this for completeness, but I have since switched to the Asset-Pipline

modules = {
    directivea {
        resource url: 'directives/directivea/directivea.js'
        resource url: 'services/restapis.js'
    }
}

In a Javascript file in one of the plugins I have the following directive defined:

ModuleA.directive('directivea',function() {
    return {
        restrict: 'EA',
        scope: {
            'objId' : '='
        },
        replace: true,
        link: function(){
            $scope.ObjId = attributes[''];
            $scope.someFunction($scope.ObjId);
        },
        controller: function(){
            $scope.someFunction = function(objId){
                //some stuff happens here
            };
        },
        templateUrl: 'directives/directivea/directivea.html'
    }
});

It seems to be executing the controller just fine but when it tries to pull in the template it chokes on:

GET /appname/directives/directivea/directivea.html 404 (Not Found)

This makes sense because that's not where the partial template will be. Where would it be though? How can I keep that information isolated to within the plugin but usable by all the downstream applications? I'd like to avoid defining in-line templates if I can.

**EDIT TO INCLUDE STRUCTURE**

Structure of Plugin:

• grails-app
  • conf
    • PluginNameForGrailsResources.groovy
    • BuildConfig.groovy
  • controllers
    • PluginControllerA.groovy
    • PluginControllerB.groovy
  • domain
    • PluginDomainA.groovy
• web-app
  • css
  • directives
    • directivea
      • directivea.js
      • directivea.html
  • services
    • restapis.js
• application.properties
• PluginNameForGrailsGrailsPlugin.groovy

Structure of the application referencing my Plugin:

• grails-app
• conf
  • BuildConfig.groovy
• controllers
• domain
• views
  • layouts
    • main.gsp
  • index.gsp (references to directivea via resources r:require tag)
• web-app
• css
  • main.css
• js
  • index.js
• application.properties

**EDIT TO INCLUDE STRUCTURE POST-ASSET-PLUGIN-SWITCHOVER** no more Resources defined, BuildConfig.groovy now references the asset pipline instead of Resources, no more files in web-app

• grails-app
  • conf
    • BuildConfig.groovy
  • controllers
    • PluginControllerA.groovy
    • PluginControllerB.groovy
  • domain
    • PluginDomainA.groovy
  • assets
    • javascripts
      • directivea
        • directivea.js
        • directivea.html
      • services
        • restapis.js
    • application.properties
    • PluginNameForGrailsGrailsPlugin.groovy

Answer 1

Using the Grails Resource plugin

Refer this sample grails app which uses this grails plugin.

Plugin hosts an angular module. I tried to keep it simple by just adding a directive and no other module. Also note that I have used static/.. in the templateUrl in directive.

Also refer Config.groovy in the app which uses below config

grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/img/**']

as mentioned in the answer to this question. May be you are hitting this issue.

Give it a try. "Hello World" is rendered from the directive present in an angular module inside the plugin.

If you are using latest version of Grails then I would suggest to switch to asset pipeline whenever convenient.

Using the Grails Asset Plugin

Use the Grails asset-pipeline plugin (v 1.9.7 as of this posting) and the Grails Angular-template-asset-pipeline plugin (v 1.2.5 as of this posting).

For details on exactly how to set this up, see the answers to How to reference a static HTML resource using the Grails Asset Pipeline plugin.

Primarily, ensure your Angular JS module is lowercase or uses _'s or -'s in the name and that your template file has a slightly different filename (ignoring the extension) than any of the javascript assets you're including.

Answer 2

Note that the javascript is referencing things from the web-app root, not from the resources or assets directory. You can find more about Angular routing from the core documentation: $route

So templateUrl: directives/directivea/directivea.html needs to actually reference a file in the /web-app/directives/directivea/directivea.html directory.

Note that the resources plugin does not seem to be very modular, and global files need to be specified for sharing (and most other things). If you move to grails 2.4 and the assets plugin, you can do modular file paths.