用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中文网其他相关文章！