How to setup Grails and AngularJS partial templates

Question

I am realizing a project using AngularJS for the front end, and Grails for the backend.

• Angular JS => Single page application
• Grails => REST API to be used in the WebApp itself and 3rd party apps.

This is how I setup the project:

web-app
   |
   |_____ js ( angular controllers, modules, partial templates.)
   |
   |_____ images
   |
   |_____ css


grails-app
   |
   |_____ views ( in here I have my main view, the one I use at the first user request )

Rather than using the Resources Plugin, I prefer building my own front end with Grunt, and then I only link the final files inside the layout itself.

I structured the js folder in web-app to contain a partials folder with all the partial templates to be called within AngularJS

This is my pretty standard angular code to load the views:

angular.module('myapp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/invoices', {
        templateUrl: 'partials/invoices-list.html',   
        controller: InvoiceListCtrl
    })
    .when('/invoices/:invoiceId', {
        templateUrl: 'partials/invoice-details.html', 
        controller: InvoiceDetailCtrl}
    )
    .otherwise({redirectTo: '/dashboard'}, {
        templateUrl: 'partials/dashboard.html', 
        controller: DashboardCtrl
    });
}]);

What happens is that Angular is unable to get those partial templates, since the partial folder is not copied in the tomcat work directory.

I don't know which other approach can be used for a Grails powered project.

Answer 1

I believe the issue is that the static resource is not descended from the default grails-app directory so you need to include the full path from the document root, e.g. templateUrl: '/partials/invoices-list.html',

Here is my set up for ui-router:

App.config([
  '$stateProvider'
  '$urlRouterProvider'

  ($stateProvider, $urlRouterProvider) ->

    $urlRouterProvider.otherwise("/")

    $stateProvider
      .state('intro', {
        url: "/",
        templateUrl: '/templates/intro.html'
      })