如何设置 Grails 和 AngularJS 部分模板

Posted 2023-05-07

【中文标题】如何设置 Grails 和 AngularJS 部分模板

【英文标题】：How to setup Grails and AngularJS partial templates

【发布时间】：2013-09-24 05:11:00

【问题描述】：

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

Angular JS

=> 单页应用程序

Grails

=> 用于 WebApp 本身和第 3 方应用程序的 REST API。

这是我设置项目的方式：

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 支持的项目。

【问题讨论】：

请改进您的问题 - 例如你试过什么；显示一些代码...

我有一个非常相似的问题，除了我的 Partials 包含在 Grails 插件的 web-app 目录中，而不是 Grails 应用程序中。有人对如何引用它们有任何想法吗？

你找到解决办法了吗？

【参考方案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'
      )

【讨论】：

抱歉，我看不出您的实现与我的有何不同。你能解释一下你是如何组织你的部分模板文件夹的吗？

我的结构和你的一样。

【参考方案2】：

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

class ViewController 

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


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

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

【讨论】：

所以你基本上保持了标准 grails 项目的通常结构？你如何运行你的 e2e 测试？关于您使用的 contextPath 变量，如果可以的话，我建议您将 grails 路径配置为在主 localhost 下运行，这样您就可以避免污染您的 JS 全局命名空间；)

【参考方案3】：

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

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

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

【参考方案4】：

作为James' answer 的替代方案，您可以直接使用 GSP。见my answer in another thread。

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

templateUrl: 'view/invoiceList'

最好的问候， 比约恩

附：很抱歉将其添加为完整答案，我更愿意将其作为对詹姆斯的评论。但是，系统拒绝我添加评论:-(