Geek Answers Handbook

How to customize partial Grails and AngularJS templates

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

  • Angular JS => Single Page Application
  • Grails => REST API, which will be used in WebApp and third-party applications.

This is how I set up 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 )

Instead of using the Resources plugin, I prefer to build my own interface using Grunt, and then I only link the final files inside the layout itself.

I structured the js folder in a web application to contain a partials folder with all the partial templates that are called in AngularJS

This is my pretty standard angular code for loading 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 cannot get these partial templates, because the incomplete folder is not copied in the tomcat work directory.

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

+5
source share
4 answers

I believe the problem is that the static resource does not come from the grails-app directory by default, so you need to include the full path from the document root, for example. templateUrl: '/partials/invoices-list.html',

Here is my setup for ui-router:

 App.config([ '$stateProvider' '$urlRouterProvider' ($stateProvider, $urlRouterProvider) -> $urlRouterProvider.otherwise("/") $stateProvider .state('intro', { url: "/", templateUrl: '/templates/intro.html' })
0
source

I serve my partial / views through 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} , which I store in a global variable in my main gsp.

0
source

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

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

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

So, you need to find out the path to these files. Something like that:

 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 }); }]);

It is important to note that the templateUrl path must not be associated with a JS file.

Another example:

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

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

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' }); }]);
0
source

as an alternative to James's answer, you can use GSP directly. See my answer in another thread .

Regarding contextPath : I would say that you automatically get the correct context if you don't add the previous slash.

 templateUrl: 'view/invoiceList'

Regards, Bjorn

PS Sorry to add this as a complete answer, I would prefer it as a comment to James. However, the system refused to add a comment to me: - (

0
source

More articles:


All Articles