如何设置Grails和AngularJS部分模板
How to setup Grails and AngularJS partial templates
我正在实现一个使用AngularJS作为前端和Grails作为后端的项目。
- 角度 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 )
与其使用资源插件,我更喜欢使用 Grunt 构建自己的前端,然后我只在布局本身内链接最终文件。
我在 web 应用程序中构建了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驱动的项目。
我相信问题是静态资源不是从默认的 grails-app 目录衍生而来的,所以你需要包含来自文档根目录的完整路径,例如 templateUrl: '/partials/invoices-list.html',
这是我对ui路由器的设置:
App.config([
'$stateProvider'
'$urlRouterProvider'
($stateProvider, $urlRouterProvider) ->
$urlRouterProvider.otherwise("/")
$stateProvider
.state('intro', {
url: "/",
templateUrl: '/templates/intro.html'
})
我通过标准的 ajax 请求提供我的部分/视图。
class ViewController {
def invoiceList() {
render(template: 'invoiceList')
}
...
}
$routeProvider
.when('/invoices', {
templateUrl: contextPath + '/view/invoiceList',
controller: InvoiceListCtrl
})
contextPath
派生自我存储在主 GSP 的全局变量中的${request.contextPath}
。
默认情况下,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'
});
}]);
作为詹姆斯答案的替代方案,您可以直接使用GSP。在另一个线程中查看我的答案。
关于contextPath
:我会说,如果您不添加前面的斜杠,您会自动获得正确的上下文。
templateUrl: 'view/invoiceList'
此致敬意比约恩
附言很抱歉将此添加为完整答案,我更希望将其作为对詹姆斯的评论。但是,系统拒绝我添加评论:-(
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- AngularJS:我可以跳过函数参数回调吗
- AngularJS UI路由器不能像ng路由器那样工作
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何包含特定于每个视图angularjs的javascript文件
- AngularJS:ng之后,重复$scope值未按预期更新
- AngularJS-在JSON选择器中使用变量名
- $window.ga在AngularJS事件中未定义
- AngularJS-使用'true'属性
- 打开一个模态并将其链接到AngularJS中的指令
- Angularjs代码未在匿名函数中运行
- angularjs+rails应用程序中未显示模板
- 我的AngularJS表达式没有'不起作用
- AngularJS JSON not arriving php
- 使用AngularJS中的筛选器更新给定的表
- Angularjs工厂注入错误
- 如何设置Grails和AngularJS部分模板
- 将Grails GSP自定义标记转换为AngularJS指令
- 如何使用angularjs在grails的控制器中渲染的模板上单击来调用函数
- Spring Security CAS grails插件带有AngularJS,登录页面不显示