Java 如何设置Grails和AngularJS部分模板

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

• Angular JS=>单页应用程序
• Grails=>要在WebApp本身和第三方应用程序中使用的restapi

以下是我设置项目的方式：

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 )

与使用资源插件相比，我更喜欢使用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支持的项目。

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

class ViewController {

  def invoiceList() {
    render(template: 'invoiceList')
  }
  ...
}

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

---

contextPath

是从

${request.contextPath}

派生出来的，我将它存储在我的主gsp中的一个全局变量中。

我认为问题在于静态资源不是从默认的grails app目录派生的，所以您需要包含来自文档根目录的完整路径，例如，

templateUrl:'/partials/invoices list.html'，

以下是我的ui路由器设置：

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

  ($stateProvider, $urlRouterProvider) ->

    $urlRouterProvider.otherwise("/")

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

---

默认情况下，

web应用

文件夹中的所有文件都会复制到

war

中名为

static

的文件夹中。 （您可以更改此行为。请参阅）

在您的示例中，您可以检查以下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'
    });
}]);

作为替代方案，您可以直接使用普惠制。看

关于

contextPath

：我想说，如果不添加前面的斜杠，您会自动获得正确的上下文

templateUrl: 'view/invoiceList'

致以最良好的祝愿， 比约恩

---

顺便说一句，很抱歉把这作为一个完整的答案，我更愿意把它作为对詹姆斯的评论。但是，系统拒绝我添加评论：-（

请改进您的问题-例如，您尝试了什么；展示了一些代码…我有一个非常类似的问题，除了我的部分包含在Grails插件的web app目录中而不是Grails app中。有人对如何引用它们有什么想法吗？您找到了解决方案吗？因此基本上保持了标准的常规结构grails项目？如何运行e2e测试？关于您使用的contextPath变量，如果可以的话，我建议将grails路径配置为在主本地主机下运行，这样可以避免污染JS全局名称空间；）对不起，我看不出你的实现与我的不同。你能解释一下你如何构造你的部分模板文件夹吗？我的结构与你的相同。