How to setup Grails and AngularJS partial templates

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'      })

I serve my partials/views via standard ajax requests.

class ViewController {  def invoiceList() {    render(template: 'invoiceList')  }  ...}$routeProvider    .when('/invoices', {        templateUrl: contextPath + '/view/invoiceList',           controller: InvoiceListCtrl    })

contextPath is derived from ${request.contextPath} that I store in a global variable in my main gsp.

By default, all the files in the web-app folder are copied to a folder called static in the war. (You can change this behaviour. See the Grails Documentation).

In your example, you can check the partial files in following urls.

http://localhost:8080/yourApp/static/js/partials/invoices-list.htmlhttp://localhost:8080/yourApp/static/js/partials/invoices-details.htmlhttp://localhost:8080/yourApp/static/js/partials/dashboard.html

So, what you need to do is to figure out the path to this files. Something like this:

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

Its important to notice that the templateUrl path should not be related to JS file.

Another example:

grails-app    views        mydomain            index.gspweb-app    js        partials            mydomain-detail.html            mydomain-list.html        controllers            mydomain-controllers.js

The resources:

http://localhost:8080/myApp/mydomain/  http://localhost:8080/myApp/static/js/partials/mydomain-detail.html  http://localhost:8080/myApp/static/js/partials/mydomain-list.html  

The route configuration:

angular.module('myapp', []).  config(['$routeProvider', function($routeProvider) {  $routeProvider    .when('/list', {        templateUrl: '../static/js/partials/mydomain-detail.html',           controller: MyDomainListCtrl    })    .when('/show/:id', {        templateUrl: '../static/js/partials/mydomain-detail.html',         controller: MyDomainDetailCtrl}    )    .otherwise({         redirectTo: '/list'    });}]);