用Angular UI路由器在AngularJ中創建狀態模式-js教程-PHP中文網

Creating Stateful Modals in AngularJS with Angular UI Router

用Angular UI路由器在AngularJ中創建狀態模式

有多種方法可以在AngularJS應用程序中實現模態，包括流行的Angular-Dialog服務和官方的Angular-UI Bootstrap模式。在本文中，我將分享我想使用另一項Angular-UI服務的Angular-ui-Router。

鑰匙要點

>過渡到另一個狀態可以關閉狀態模式。 Angular UI路由器提供輸入和離開狀態時發射的Ententer和Onexit回調，可用於設置事件偵聽器以關閉模態。

將模式視為提供諸如嵌套狀態，回調，狀態參數和依賴項注入以及URL路線之類的好處。它還允許在應用程序中的不同模態之間平穩導航。

在狀態中進行思考

>這種方法背後的核心思想是模式實際上是您應用程序的獨特狀態。考慮一個電子商務網站。當您單擊“添加到購物車”按鈕時，一個模態會彈出，要求您登錄。您輸入詳細信息並單擊“繼續”，這顯示了您的另一種帶有購物車詳細信息的模式。

>您剛剛穿越了許多剛剛以模態的狀態。如果我們將模態視為狀態，那麼使用狀態管理工具往返於不同的模態狀態。

開始使用UI路由器

>

>讓我們保持簡單。首先，我們將安裝UI-Router並將其添加到Angular App。

1。創建一個簡單的html頁

我們將首先創建一個index.html文件，其中包含以下內容：>

> jQuery已包括以後的某些DOM工作。

> 除了包括最新版本的Angular本身之外，我還提供了Angular UI路由器，CSS文件（當前為空），當然還有我們的App的主JavaScript文件。接下來，讓我們看一下。

2。創建您的Angular App

此時，>

<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登入後複製

3。啟用接口

>在我們打開模式之前，我們需要一個UI供用戶與用戶進行交互。在這種情況下

angular<span>.module("modalApp", ["ui.router"])</span>

登入後複製

4。配置初始狀態

>我們將為每種模式定義多個狀態，但是首先需要進行一些設置。由於我們可能希望在不同的模態之間共享行為，因此讓我們創建一個父模態可以繼承的父態狀態。以下代碼屬於js/app.js：

<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span>
</span>    <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span>
</span>    <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登入後複製

>我們定義了一個稱為“模態”的狀態。這是一個抽象狀態，意味著它不能直接過渡到。它僅是其子女國家的父母提供共同的功能。我們還為命名視圖（也稱為模態）定義了一個模板。命名您的觀點是一個好主意，避免將錯誤的狀態加載到應用程序中的錯誤位置，尤其是如果您在應用程序中使用UI-Router。

5。定義UI視圖指令，以使我們的模態加載到

> UI-Router使用稱為UI-View的指令來確定應加載狀態模板的位置。我們將在我們的index.html頁面上包含一個UI-View指令：

>由於我們將視圖命名為“模態”，因此我們也需要將其傳遞給指令。 AutoScroll =“ false”設置可防止UI-Router嘗試將模態滾動到視圖中。

angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span>  $stateProvider<span>.state("Modal", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modal.html"
</span>      <span>}
</span>    <span>},
</span>    <span>abstract: true
</span>  <span>});
</span><span>});</span>

登入後複製

6。創建我們的第一個實際模態

>讓我們繼續定義我們的第一個實際模態。我們將創建一個彈出窗口，詢問用戶是否確定他們要將產品添加到購物車中。 >

那樣簡單。我們使用路由器的DOT表示法將新的CornexadDtocart狀態定義為模態的孩子。我們還為我們的新模式指定了一個模板。

>由於ConfirmAdDtocart模態是模態狀態的孩子，因此UI-Router將在模態狀態模板（Modal.html）中尋找UI-View指令，以渲染確認模板。接下來，讓我們創建這兩個模板。

<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span>
</span>    <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span>
</span>    <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span>
</span>
    <span><span><span><div</span> ui-view<span>="modal"</span> autoscroll<span>="false"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登入後複製

7。創建基本模態的模板

模態狀態的模板負責創建透明的背景來覆蓋該應用程序，以及各種各樣的持有人，我們將加載不同的兒童狀態模板。

這是屬於CSS/app.css的幾種基本樣式：>

8。創建確認模態模板

此模板適用於帶有確認消息的實際模態框。以下代碼以模態/confirn.html：

angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span>  $stateProvider<span>.state("Modal", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modal.html"
</span>      <span>}
</span>    <span>},
</span>    <span>abstract: true
</span>  <span>});
</span>
  $stateProvider<span>.state("Modal.confirmAddToCart", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modals/confirm.html"
</span>      <span>}
</span>    <span>}
</span>  <span>});
</span><span>});</span>

登入後複製

模式框的

樣式：

<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登入後複製

9。將其連接起來

>現在我們擁有一個帶有子狀態的父態狀態，並且它們的兩個模板實際上要做的就是觸發模態。 UI-Router為我們提供了一個名為UI-SREF的指令，其行為與錨標籤的HREF屬性相似。它從本質上將我們鏈接到我們提供的狀態名稱。

angular<span>.module("modalApp", ["ui.router"])</span>

登入後複製

>現在，當我們單擊按鈕時，路由器將導航我們到modal.confirmaddtocart狀態。模態狀態的模板將首先加載到index.html中的UI-View指令中。這將顯示我們的背景並準備持有人。然後，“白色確認”對話框將加載到父模式模板中的UI-View指令中，嘿Presto！我們有模態！

10。關閉模態

您可能會注意到的第一件事是您無法關閉模式。讓我們解決這個問題。

我們設置的事件相當微不足道。我們只需要收聽ESC鍵，以及背景上的任何點擊即可。此外，已經添加了一個e.stoppropagation（）調用，以防止在模態內咔嗒聲到背景並無意中關閉模態。 >

繼續進行測試。

<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span>
</span>    <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span>
</span>    <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登入後複製

11。過渡到另一個模態

>現在我們可以打開和關閉模態，我們可以開始看到這種方法的真正強度。使每種模態以一個狀態表示，不僅乾淨有意義，而且使我們能夠在這些模態內穿越狀態。

>我們開始要求用戶確認他們的購買。現在，讓我們在另一種模式中向他們展示一個成功消息。同樣，我們將僅定義一個新狀態及其關聯的模板：

>

現在，剩下要做的就是將“是”按鈕從確認模式鏈接到新的成功狀態。當我們在那裡時，我們可以添加一個鏈接到我們默認狀態的“否”按鈕以關閉模式。

angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span>  $stateProvider<span>.state("Modal", {
</span>    <span>views:{
</span>      <span>"modal": {
</span>        <span>templateUrl: "modal.html"
</span>      <span>}
</span>    <span>},
</span>    <span>abstract: true
</span>  <span>});
</span><span>});</span>

登入後複製

>您有！基於狀態的，可導航的模式。我發現將模式視為狀態是確保用戶在應用程序中使用模式時具有平穩體驗的肯定方法。

<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span>
</span>    <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span>
</span>    <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span>
</span>
    <span><span><span><div</span> ui-view<span>="modal"</span> autoscroll<span>="false"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

登入後複製

由於模式只是狀態，因此您獲得了Angular UI路由器的所有其他添加好處，包括：

嵌套狀態 - 您可以在模態內渲染其他狀態
>回調 - 當您的模態打開或關閉以告知其他部分時，請啟動事件
>狀態參數和依賴項注入 - 將數據傳遞給您的模式，以狀態參數或依賴項注入數據服務到州的控制器
URL - 狀態是URI可路由的，這意味著您可以擁有一個鏈接到模態，漂亮

>本文中的所有代碼均可在GitHub上獲得。我很想听聽您對Angularjs中模態方法的反饋，所以請發表評論：）

經常詢問的問題（常見問題解答）關於使用AngularJ和Angular UI路由器創建狀態模式

>如何使用AngularJ和Angular UI路由器創建一個狀態模態？ >

在AngularJS中使用狀態模式的好處是什麼？它們允許您維護應用程序的狀態，即使模態打開。這意味著您可以遠離模態並返回它而不會丟失任何數據。狀態模式還允許您使用瀏覽器的後式按鈕關閉模式，從而可以改善用戶體驗。

我如何使用$ state Service打開模式？ AngularJS中的國家服務使您可以在應用程序中的狀態之間過渡。要打開模式，您可以使用$ state.go方法，以代表您模態的狀態名稱傳遞。這將導致AngularJS加載與該狀態關聯的模板並將其顯示為模態。 AngularJS涉及在您的應用程序配置中使用$ stateProvider服務。您可以使用$ stateProvider.State方法定義一個新狀態，傳遞指定狀態名稱，URL和模板或模板圖的對象。模板或templateUrl應該指向模態的HTML內容。

>我可以使用Angular UI路由器來創建模式而不維護狀態嗎？

是的，您可以使用Angular UI路由器創建模式沒有維持狀態。但是，這意味著您失去了狀態模式的好處，例如能夠離開模態並返回它而不會丟失任何數據的能力。如果您不需要這些功能，則可以簡單地使用$ uibmodal服務來創建模式。 >

>如何關閉AngularJs中的狀態模式？

以關閉AngularJS中的狀態模式，您可以使用$ State Service過渡到另一個狀態。這將導致AngularJS卸載模式的模板並關閉模式。您還可以使用瀏覽器的返回按鈕來關閉模態，如果您配置了模態以實現狀態。

>我可以使用其他版本的Angular？具有其他版本的Angular的狀態模式。但是，創建狀態模式的過程可能會根據您使用的Angular的版本而有所不同。始終以最準確和最新的信息來參考官方角文檔。

>在Angularjs中創建狀態模式時，我如何處理錯誤？可以使用$ statechangeerror事件來處理錯誤。當狀態過渡期間發生錯誤時，該事件在根範圍內廣播。您可以在控制器中聆聽此事件，並在發生時採取適當的操作。

我可以將數據傳遞到Angularjs中的狀態模式嗎？在Angularjs中。在定義模態狀態時，可以使用參數選項完成此操作。參數選項允許您在打開模態時指定應傳遞給模態控制器的任何參數。

>如何測試AngularJS中的狀態模式？可以使用Angular的內置測試工具來完成AngularJ。您可以使用$狀態服務過渡到模式狀態，然後檢查模態模板是否正確加載。您還可以使用Angular的$ Controller服務來測試模式控制器中的任何功能。

以上是用Angular UI路由器在AngularJ中創建狀態模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！