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/

個人微信公衆號：