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

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/

个人微信公众号：