thymeleaf片段使用_Thymeleaf –片段和angularjs路由器局部视图

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> | <ang-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 {@Overridepublic 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片段使用

thymeleaf片段使用_Thymeleaf –片段和angularjs路由器局部视图相关推荐

Thymeleaf –片段和angularjs路由器局部视图
百里香叶许多很酷的功能之一就是能够渲染模板片段–我发现这是与AngularJs一起使用的特别有用的功能. 可以将AngularJS $ routeProvider或AngularUI路由器配置为返回不 ...
如何在Thymeleaf 模板中使用片段Fragments
1. 引言在本文中,我们将展示如何在Thymeleaf 模板中使用片段.表示可包含在其他模板中的模板片段的片段.它可以是页眉,菜单,页脚和文档的任何其他部分,通常在许多页面上重复.片段可以参数化并包 ...
android局部布局替换,android – 子片段替换父片段根布局
我有一个5个片段的viewpager,其中一个我希望通过按钮点击完全替换它.我也希望能够通过后退按钮隐藏子片段. 这里的片段布局: 当我尝试像这样替换contacts_layout时: ImportC ...
Logic Pro X：未选定片段、双击片段后钢琴窗中不显示音符（完美解决）
Logic Pro X:未选定片段.双击片段后钢琴窗中不显示音符在图片里面可以看出,我们明明选择的是钢琴的轨道,但是实际上音符却是吉他轨道上的,且无论切换哪个轨道都无法改变. 解决办法: 将黄色的& ...
Thymeleaf抽取公共页面片段
抽取页面项目中,一般把所有的公共页面片段都抽取出来放在一个独立的页面中其他,所有的页面根据需要进行引用参考文档 th:fragment 抽取公共元素 Name,随便自定义命名 <!DOC ...
Thymeleaf选择器引用公共片段
引用公共片段可以使用选择器,引用公共片段 ~{templatename::selector} 模板名::选择器侧边栏设置一个id属性  <nav c ...
python列表片段_Python列表片段索引操作,python
张量维度为2的列表类表索引操作类表片段操作中,[:] 采用默认值从0索引到 len(list),前闭后开 [1:] 标识从索引1开始到列表结束 [:-1]标识从索引0开始到列表结束 [m:n] 表示 ...
android 片段,android – 将片段添加到片段中(嵌套片段)
我想动态地将youtube片段添加到我已经存在的片段中.我使用的代码如下: // setting the Youtube Player Dynamically private int setYoutu ...
如何截取视频片段批量截取片段的方法
如何截取视频片段多个视频批量截取片段的方法?截取视频片段的操作很常用到,尤其是喜欢在网上分享小视频的朋友们,看到某电视剧或电影等视频的某个精彩片段就会想截取下来分享到网络.怎么操作呢? 各位用户朋友 ...

thymeleaf片段使用_Thymeleaf –片段和angularjs路由器局部视图

thymeleaf片段使用_Thymeleaf –片段和angularjs路由器局部视图相关推荐

最新文章

热门文章