如何设置Grails和AngularJS部分模板

我正在实现一个项目，使用AngularJS作为前端 ，Grails作为后端。

• Angular JS =>单页面应用程序
• Grails => REST API将在WebApp本身和第三方应用程序中使用。

这就是我设置项目的方式：

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 ) 

我不喜欢使用Resources Plugin，而是使用Grunt构建自己的前端，然后我只链接布局本身的最终文件。

我在web-app中构建了js文件夹，以包含一个partials文件夹，其中包含要在AngularJS中调用的所有部分模板

这是加载视图的非常标准的角度代码：

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

会发生什么是Angular无法获取这些部分模板，因为部分文件夹不会复制到tomcat work目录中。

我不知道哪种方法可以用于Grails驱动的项目。

Answer 1

我认为问题是静态资源不是来自默认的grails-app目录，所以你需要包含文档根目录的完整路径，例如templateUrl: '/partials/invoices-list.html',

这是我为ui-router设置的：

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

Answer 2

我通过标准的ajax请求提供我的部分/视图。

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

contextPath派生自${request.contextPath} ，我将其存储在主gsp中的全局变量中。

Answer 3

默认情况下， web-app文件夹中的所有文件都将复制到war名为static的文件夹中。 （您可以更改此行为。请参阅Grails文档 ）。

在您的示例中，您可以检查以下url中的部分文件。

 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 

所以，你需要做的是找出这个文件的路径。 像这样的东西：

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

重要的是要注意templateUrl路径不应该与JS文件相关。

另一个例子：

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

资源：

 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 

路线配置：

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

Answer 4

作为詹姆斯回答的替代方案，您可以直接使用GSP。 在另一个post中查看我的答案 。

关于contextPath ：如果你不添加前面的斜杠，我会说你会自动获得正确的上下文。

 templateUrl: 'view/invoiceList' 

最好的问候，Björn

PS很抱歉把这个作为一个完整的答案添加，我会更喜欢它作为对詹姆斯的评论。 但是，系统拒绝我添加评论:-(