activiti自定義流程之整合（二）：使用angular js整合ueditor建立表單

基礎環境搭建完畢，接下來就該正式着手代碼編寫了，在說代碼之前，我覺得有必要先說明一下activit自定義流程的操作。

抛開自定義的表單不談，通過之前的了解，我們知道一個新的流程開始，是在啟動流程執行個體（processintence）的時候，而流程執行個體依賴于流程定義（processdefinition），流程定義又依賴于流程模型（model）。

我們用到的自定義表單需要在建立模型，畫模型圖的時候就指定表單的名稱formkey，需要保證這個formkey和我們建立的表單名稱一緻。

表單并不在建立模型的時候使用，而是在部署的時候用到，是以隻要是在部署流程定義之前建立自定義表單，那麼無論是先建立模型還是先建立表單，隻要名稱一緻就行。

那麼我這裡就先建立表單，因為我覺得這樣的話，在建立模型時可以預覽，更能保證建立模型的正确性（雖然模型也可以修改）；

與之前的自定義表單稍有不同的是，在這個整合的例子中，我用的是angularjs，同時預覽時也用到了jquery中的dialog對話框的功能，也就需要比之前導入更多前端的js，他們如下圖所示。

需要注意的是，dialog的樣式在jquery-ui.js中控制，這個也是網上下載下傳的。

前端首頁index.html代碼如下，因為angular js為單頁面應用，是以實際上隻有一個html聲明，所有的js以及css檔案也都需要在index.html中一開始就導入進來：

angular js 控制路由跳轉app.js代碼：

新增form表單的頁面updateform.html代碼如下，要注意的是，這個頁面也是有ueditor插件中的index.html改變過來的：

對應的js代碼updateformctr.js，這裡尤其需要注意的是leipiformdesign.exec這個方法原本是ueditor插件中的，如果不做修改直接拿過來的話，在上便的頁面中是無法調用的，angularjs需要注意作用域的問題，是以在對應的js中需要改成$scope. leipiformdesign；除此之外，在儲存和預覽時基本沒有什麼變化，dialog對話框也是在後續流程中使用到：

相對于前台而言，背景在這裡就沒有什麼變化了，可以參考之前的自定義表單，代碼便不再羅列。