5

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

  • Angular JS => 单页应用
  • Grails => 用于 WebApp 本身和 3rd 方应用程序的 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 构建自己的前端，而不是使用资源插件，然后我只在布局本身中链接最终文件。

我js在 web-app 中构建了文件夹以包含一个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 无法获取那些部分模板，因为部分文件夹没有复制到 tomcatwork目录中。

我不知道还有哪些其他方法可以用于 Grails 支持的项目。

4

4 回答 4

0

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

class ViewController {

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

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

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

于 2013-09-19T11:39:29.867 回答
0

我认为问题在于静态资源不是来自默认 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'
      })
于 2013-09-19T13:25:03.610 回答
0

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

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

templateUrl: 'view/invoiceList'

最好的问候， 比约恩

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

于 2014-11-11T09:09:38.153 回答
0

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

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

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'
    });
}]);
于 2014-05-09T05:17:37.273 回答