Vert.x AngularJS编写client-side应用 译<十二>

2019独角兽企业重金招聘Python工程师标准>>>

TIP：相应的代码在step-9文件夹中（https://github.com/vert-x3/vertx-guide-for-java-devs）

到目前为止我们的Web界面使用传统的HTML内容的服务器端渲染，某些类型的应用程序可以利用客户端渲染，改善用户体验，避免整页重新加载，侵入的原生程序体验。

许多流行的框架应运而生，我们选择流行的AngularJS来写，但是你也可以同等的使用React，Vue.js,Roit和其他框架或者类库。

Single page application

我们之前编写的Wiki页面可以选择页面，编辑模式下一半是Markdown editor，一半是预览效果：

HTML预览是由我们的后台调用一个新的endpoint呈现，重新渲染会在当Markdown editor文本改变的时候。为了避免用户在频繁编写Markdown，造成后台超负荷处理了不成功的请求，造成了编写Markdown后预览的渲染延迟，在延迟的时间内什么都没改变。

应用界面也是动态的，"新的页面"删除按钮消失:

Vert.x Backend

简化HTTP verticle代码

client-side应用需要后天支持以下：

    1.浏览器可以引入静态的HTML, CSS 和 JavaScript 

    2.服务端提供的web api（HTTP/JSON service）

我们简化HTTP verticle，仅仅实现我们需要的，从step8中使用Rxjava版本开始，我们移除了服务端渲染的代码，像authentication 和 JWT token 只是提供了HTTP/JSON接口。

比如我们现在将apiUpdatePage方法实现改成：

Exposed routes

前端请求/app,我们会重定向到/app/index.html静态文件：

    1.不使用缓存是有用的

    2.默认文件需要放在webroot路径下，对于Maven 或 Gradle 应用src/main/resources/webroot

最后我们需要应用程序后台渲染Markdown到HTML，我们提供一个HTTP post请求：

AngularJS frontend

TIP：这篇文档不太介绍AngularJS（see the official tutorial instead)，我们假设读者熟悉了其他的一些框架。

Application view

src/main/resources/webroot/index.html文件的头部分如下：

    1.AngularJS模块命名为wikiApp

    2.wiki.js用于AngularJS module 和 controller

你看到的，我们除了AngularJS，还加入了其他CDNs中的依赖：

    1.boostrap

    2.Font Awesome

    3.Lodash

Bootstrap需要其他的scripts，为了文件加载的性能考虑：

我们的AngularJS controller 是 WikiController，被绑定到div，也是一个Bootstrap 容器：

<div class="container" ng-controller="WikiController">
  <!-- (...) -->

顶部的按钮包含以下的元素：

    1.对于每一个wiki页面，我们用ng-repeat 和 ng-click 定义controller action (load)

    2.更新按钮绑定 reload controller action

    3.ng-show引导是否显示元素，根据controller pageExists的值判断

    4.div被用于显示成功或者失败的提示

Markdown预览和编辑元素如下：

    1.ng-model绑定textarea到controller的pageMarkdown

Application controller

wiki.js JavaScript以AngularJS模板申明开始：

wikiApp没有其他附加依赖，声明一个WikiController，这个controller需要以下的属性：

    1.$scope

    2.$http 发送异步HTTP 请求到后端

    3.$timeout

Controller方法被系到$scope对象上，我们以线面3个简单方法开始：

创建页面的初始化controller 属性加到$scope对象上，重新加载页面，执行HTTP的Get请求，重新加载后台的数据。pageExists用来判断在页面上显示不显示相应elements。

载入页面的内容也是执行HTTP GET请求，更新预览的DOM操作：

下一个方法用来支持saving / updating and deleting 页面，第一个参数用来指出success，第二个参数用来指出error。我们这里介绍success和error helper methods显示通知（3s->success,5s->error）

初始化页面的列表数据，并开始一个新的空白页面编辑器：

最后，这里是我们的实时的Markdown文本渲染：

    1.$scope.$watch 在state 改变的时候允许被修改，这里我们监测的pagemarkdown属性绑定到编辑文本的变化。

    2.300毫秒的延迟是个好的选择来出发渲染

    3.我们做了延迟渲染而不是在每一个按键都去执行，比如state是取消了之前的页面，又去创建了一个新的页面的这种情况。

    4.我们让后台渲染编辑器的文本到HTML，然后刷新预览。

原文链接：http://vertx.io/docs/guide-for-java-devs/

我的微信公众号：

转载于:https://my.oschina.net/u/2277632/blog/1592191