自定義Angular插件 - 網站使用者引導

最近由于項目進行了較大的改版，為了讓使用者能夠适應這次新的改版，是以在系統中引入了“使用者引導”功能，對于初次進入系統的使用者一些簡單的使用教育訓練training。對于大多數網站來說，這是一個很常見的功能。是以在開發這個任務之前，部落客嘗試将其抽象化，獨立于現有系統的業務邏輯，将其封裝為一個通用的插件，使得代碼更容易擴充和維護。

無圖無真相，先上圖：

關于這款trainning插件的使用很簡單，它采用了類似Angular路由一樣的配置，隻需要簡單的配置其每一步training資訊。

title：step的标題資訊；

template/templateUrl: step的内容模闆資訊。這類可以配置html元素，或者是模闆的url位址，同時templateUrl也支援Angular route一樣的function文法；

controller: step的控制器配置；在controller中可注入如下參數：目前step – currentStep、所有step的配置 – trainnings、目前step的配置 – currentTrainning、以及下一步的操作回調 – trainningInstance（其中nextStep：為下一步的回調，cancel為取消使用者引導回調）；

controllerAs: controller的别名；

resolve：在controller初始化前的資料配置，同Angular路由中的resolve；

locals：本地變量，和resolve相似，可以傳遞到controller中。差別之處在于它不支援function調用，對于常量書寫會比resolve更友善；

placement: step容器上三角箭頭的顯示方位，

position: step容器的具體顯示位置，這是一個絕對坐标；可以傳遞<code>{left: 100, top: 100}</code>的絕對坐标，也可以是<code>#stepPanelHost</code>配置相對于此元素的placement位置。同時它也支援自定義function和注入Angular的其他元件文法。并且預設可注入：所有step配置 – trainnings,目前步驟 – step，目前step的配置 – currentTrainning，以及step容器節點 – stepPanel；

backdrop：是否需要顯示遮罩層，預設顯示，除非顯示聲明為false配置，則不會顯示遮罩層；

stepClass：每一個step容器的樣式資訊；

backdropClass： 每一個遮罩層的樣式資訊。

了解了這些配置後，并根據特定需求定制化整個使用者引導的配置資訊後，我們就可以使用trainningService的trainning方法來在特定實際啟動使用者引導，傳入參數為每一步step的配置資訊。并可以注冊其done或者cancel事件：

下面是一個示範的配置資訊：

本文插件源碼和示範效果唯一codepen上，效果如下：

在trainning插件的源碼設計中，包含如下幾個要點：

提供service api。因為關于trainning這個插件，它是一個全局的插件，正好在Angular中所有的service也是單例的，是以将使用者引導邏輯封裝到Angular的service中是一個不錯的設計。但對于trainning的每一步展示内容資訊則是DOM操作，在Angular的進行中它不該存在于service中，最佳的方式是應該把他封裝到Directive中。是以這裡采用Directive的定義，并在service中compile，然後append到body中。

對于每一個這類獨立的插件應該封裝一個獨立的scope，這樣便于在後續的銷毀，以及不會與現有的scope變量的沖突。

$q對延時觸發的結果包裝。對于像該trainning插件或者modal這類操作結果采用promise的封裝，是一個不錯的選擇。它取代了回調參數的複雜性，并以流暢API的方式展現，更利于代碼的可讀性。同時也能與其他Angular service統一傳回API。

對于controller、controllerAs、resolve、template、templateUrl這類類似路由的處理代碼，完全可以移到到你的同類插件中去。它們可以增加插件的更多定制化擴充。關于這部分代碼的解釋，部落客将會在後續文章中為大家推送。

利用$injector.invoke動态注入和調用Angular service，這樣既能擷取Angular其他service注入的擴充性，也能擷取到函數的動态性。如上例中的螢幕居中的自定義擴充方式。

本文轉自破狼部落格園部落格，原文連結：http://www.cnblogs.com/whitewolf/p/angular-trainning.html，如需轉載請自行聯系原作者