用angularjs管理用戶界面狀態和動畫的正確方法

Question

我開始將大量的Web應用程序（包含大量複雜的JQuery DOM操作和ASP.NET MVC後端）轉換爲更易於管理的東西。我將服務器端代碼轉換爲REST API，並且我想使用AngularJS來驅動UI。

我開始轉換應用程序的一個區域，其中包括三個屏幕。在一個屏幕上進行選擇會爲您提供一組新的選擇，您可以前後移動。我設法通過使用路線非常乾淨地實現這種行爲;每個選項都是與href='#/something...'的鏈接，這會通過加載不同的控制器/模板來導致UI狀態的更改。

我現在正在嘗試對此轉換進行動畫處理。 ng-animate屬性讓我獲得了大部分的途徑，其中有enter和leave選項，但這些屬性實際上同時激發了！結果在視覺上很混亂。我想最好要對管理事件的下列順序清潔方法：

• 上的按鈕，用戶點擊第一個屏幕
• 第一個屏幕動畫出來
• 與此同時，請求以REST API的下一組的選擇
• 前面兩件事情完成後，第二個屏幕動畫英寸

我可以用resolve PARAM沒有動畫實現這一目標參考$routeProvider，但我不知道如何使動畫正常工作！管理這種狀態的正確性是什麼？

Answer 1

您可以編寫自己的代碼將實現動畫如下所述： http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate

也許這是可以做到這樣的：

1. 在「離開」啓動動畫將請求發送到服務器。
2. 同時在「Enter」上，您不會立即開始動畫。您正在等待來自數據加載器的信號。
3. 服務器響應數據。你表示已經準備就緒。
4. 「Enter」實現開始動畫。

如何監視標誌？你可以簡單地用setTimeout來觀察全局變量，但這有點難看。我認爲使用某種允許訂閱「數據準備好」事件的發佈/訂閱機制會更好。例如，我使用postal.js並對此非常滿意。