Search code examples
angularjsgrailsasset-pipelinegrails3

Grails 3 src/main/webapp loading app.js file

So I'm trying to get a simple Grails 3 and Angular app working. Upon firing up locally, I would expect my app.js file to get loaded and then load my index.html.

I'm not entirely sure how the index/main gsps work, but my understanding is that, using asset-pipeline, it should direct to my app.js under src/main/webapp/js and $routeProvider will handle the rest. But it's never redirecting to my app.js. It appears to still be searching for files within the grails-app/assets folder.

Here is my index.gsp:

<!doctype html>
<html>
<head>

<asset:javascript src="app.js"/>
</head>
<body>

<asset:javascript src="app.js"/>
</body>
</html>

main.gsp:

<!doctype html>
<html lang="en" class="no-js">
<head>

<p>Here</p>

<asset:javascript src="../../../src/main/webapp/js/app.js"/>

<g:layoutHead/>
</head>
<body>

<g:layoutBody/>

<asset:javascript src="../../../src/main/webapp/js/app.js"/>

Here is my context-path from application.yml

server:
   contextPath: '/item-upload'

My app.js is located under src/main/webapp/js. This is the replacement directory for webapp in Grails 3. So I'm putting my js, html, and css files there.

App.js:

(function (angular) {
'use strict';

angular.module('common.initSideNavPanel', []);

var ngModule = angular.module('app', [
    'ngRoute',
    'ngAnimate',
    'item-upload'
]);

// Configure routing
ngModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'html/index.html', controller: 'UploadCtrl', pageName: 'upload'});

}]);

}(window.angular));

Any ideas what I'm doing wrong?

Solution

  • Directory Structure is important.

    Asset pipeline plugin requires the resources to be at certain directories, unless you are taking control of specifying the asset pipeline configuration in build.gradle file.

    From documentation of asset pipeline, this is supposed to be the folder structure.

    Within the grails-app/assets directory are several subfolders
    grails-app/assets/javascripts
    grails-app/assets/stylesheets
    grails-app/assets/images
    Otherwise, take control

    You can include additional folders via (see here)

    // in build.gradle
assets {
  includes = ['your/more/js/or/images/folders/etc', 'another/one']
  excludes = ['**/*.less']
}

    Once you have done that, to refer your resources in gsp files, you need to use

    <asset:javascript src="app.js"/>

    How do you refer the path to resource in <asset> tag.

    Say you have a file grails-app/assets/javascripts/angularjs/app.js like this in assets folder, then to refer it, you shall do

    <asset:javascript src="angularjs/app.js"/> // NOTE: assets/javascripts is omitted from the path.

    Hope this helps.

    As a side note, move away from src/main/webapp folder. Grails 3 recommend using src/main/resources/public (for public resources. static files like htmls etc) and src/main/resource.