搜尋
首頁web前端js教程用Angular UI路由器在AngularJ中創建狀態模式

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

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌
Feb 20, 2025 am 11:45 AM

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>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span>

3。啟用接口

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

angular<span>.module("modalApp", ["ui.router"])</span>
4。配置初始狀態

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

<span><span>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span></span></span></span></span></span></span></span></span></span>

>

>

Now you too can look like Pusheen!> Add to cart> > >>我們定義了一個稱為“模態”的狀態。這是一個抽象狀態，意味著它不能直接過渡到。它僅是其子女國家的父母提供共同的功能。我們還為命名視圖（也稱為模態）定義了一個模板。命名您的觀點是一個好主意，避免將錯誤的狀態加載到應用程序中的錯誤位置，尤其是如果您在應用程序中使用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>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span>></span>
</span>    <span><span><span><p>></p></span>Now you too can look like Pusheen!<span><span></span>></span>
</span>    <span><span><span><button>></button></span>Add to cart<span><span></span>></span>
</span>
    <span><span><span><div> ui-view<span>="modal"</span> autoscroll<span>="false"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></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>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></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>
</span><span><span><span> ng-app<span>="modalApp"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Modals with Angular and Ui-Router<span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/jquery.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/app.js"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Pusheen Hoodie<span><span></span>></span>
</span>    <span><span><span><p>></p></span>Now you too can look like Pusheen!<span><span></span></span></span></span></span></span></span></span></span></span></span>

> Add to cart> > >

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

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

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

>本文中的所有代碼均可在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中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
Python vs. JavaScript：開發人員的比較分析Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

<🎜>：種植花園 - 完整的突變指南
3 週前ByDDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前By尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前ByDDD
北端：融合系統，解釋
3 週前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1327
25
PHP教程
1273
29
C# 教程
1253
24
顯示更多