thymeleaf片段使用
百里香叶许多很酷的功能之一就是能够渲染模板片段–我发现这是与AngularJs一起使用的特别有用的功能。
可以将AngularJS $ routeProvider或AngularUI路由器配置为返回不同“路径”的部分视图,使用百里香叶返回这些部分视图确实效果很好。
考虑一个简单的CRUD流,用以下方式定义AngularUI路由器视图:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("list");
$stateProvider
.state('list', {
url:'/list',
templateUrl: URLS.partialsList,
controller: 'HotelCtrl'
})
.state('edit', {
url:'/edit/:hotelId',
templateUrl: URLS.partialsEdit,
controller: 'HotelEditCtrl'
})
.state('create', {
url:'/create',
templateUrl: URLS.partialsCreate,
controller: 'HotelCtrl'
});
});
上面的templateUrl是激活适当状态时呈现的局部视图,这里使用javascript变量定义了这些视图,并使用thymeleaf模板以这种方式进行了设置(以干净地将已部署应用程序的上下文路径解析为根路径):
<script th:inline="javascript">
/*<![CDATA[*/
var URLS = {};
URLS.partialsList = /*[[@{/hotels/partialsList}]]*/ '/hotels/partialsList';
URLS.partialsEdit = /*[[@{/hotels/partialsEdit}]]*/ '/hotels/partialsEdit';
URLS.partialsCreate = /*[[@{/hotels/partialsCreate}]]*/ '/hotels/partialsCreate';
/*]]>*/
</script>
现在,考虑一个片段定义,例如处理列表的一个:
文件:templates / hotels / partialList.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/sitelayout">
<head>
<title th:text="#{app.name}">List of Hotels</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.1.1/css/bootstrap.min.css}"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.1.1/css/bootstrap-theme.css}"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.css"/>
<link rel="stylesheet" th:href="@{/css/application.css}" href="../../static/css/application.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="well well-small">Hotels</h1>
</div>
</div>
<div th:fragment="content">
<div class="row">
<div class="col-xs-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Zip</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="hotel in hotels">
<td>{{hotel.id}}</td>
<td>{{hotel.name}}</td>
<td>{{hotel.address}}</td>
<td>{{hotel.zip}}</td>
<td><a ui-sref="edit({ hotelId: hotel.id })">Edit</a> | <a
ng-click="deleteHotel(hotel)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a ui-sref="create" class="btn btn-default">New Hotel</a>
</div>
</div>
</div>
</div>
</body>
</html>
这里关于百里香叶的伟大之处在于,可以在浏览器中打开并预览该视图。 要返回视图的一部分,在这种情况下,该部分以“ th:fragment =” content””开头,我要做的就是将视图的名称返回为“ hotels / partialList :: content” !
对于更新和创建视图,可以遵循相同的方法。
我有一个开放的部分是关于UI中的uri是“ / hotels / partialsList”如何映射到“ hotels / partialList :: content”,使用Spring MVC可以很容易地通过一个View Controller来完成。一种无需通过Controller返回视图名称的方法,可以通过以下方式进行配置:
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/hotels/partialsList").setViewName("hotels/partialsList::content");
registry.addViewController("/hotels/partialsCreate").setViewName("hotels/partialsCreate::content");
registry.addViewController("/hotels/partialsEdit").setViewName("hotels/partialsEdit::content");
}
}
因此,总而言之,您可以使用百里香模板创建一个完整的html视图,可以预览该模板,并通过在开发期间在浏览器中打开视图来解决所有渲染问题,然后纯粹在运行时返回该视图的相关部分以返回视图片段html页面。
- 可在此github位置获得遵循此模式的样本-https://github.com/bijukunjummen/spring-boot-mvc-test
翻译自: https://www.javacodegeeks.com/2014/06/thymeleaf-fragments-and-angularjs-router-partial-views.html
thymeleaf片段使用