ui路由_使用UI路由器的3个简单技巧

ui路由

In the past we've gone over how to use the great UI-Router for creating AngularJS applications. It provides great flexibility and power when defining states and nested states in your application. Today we'll be going over three features that UI-Router provides that you might find useful when building your own applications.

过去，我们已经探讨了如何使用出色的UI-Router创建AngularJS应用程序。 在应用程序中定义状态和嵌套状态时，它提供了极大的灵活性和功能。 今天，我们将介绍UI-Router提供的三个功能，这些功能在构建自己的应用程序时可能会有用。

Before we take dive in, if you need a quick overview of UI-Router, take a look at our

在我们深入探讨之前，如果您需要快速了解UI-Router，请看一看我们的

starter guide and an example of UI-Router in action in a multi-step form.

入门指南和UI-Router实例，以多步形式提供 。

链接到国家 ( Linking To States )

Angular provides the ngHref directive which allows us to bind variables to URLs. UI-Router provides us with ui-sref which allows us to link to states.

Angular提供了ngHref指令，该指令允许我们将变量绑定到URL。 UI-Router为我们提供了ui-sref ，它允许我们链接到状态。

This is different than linking to a normal URL. When using UI-Router you want to link to a state, not a URL.

这不同于链接到普通URL。 使用UI-Router时，您要链接到状态，而不是URL 。

例子 ( Examples )

Let's say we have a state like so:

假设我们有一个像这样的状态：

$stateProvider
  .state('party', {
    url: '/party',
    template: '
This Is A State
'
  });

Now to link to it in one of our views:

现在以我们的一种观点链接到它：

<a ui-sref="party">Go To Party</a>

This will turn into

这将变成

Go To Party in our browser. Notice how the href is generated for us.

在我们的浏览器中Go To Party 。 注意href是如何为我们生成的。

在状态中使用URL参数 ( Using URL Parameters with States )

当我们要将应用程序的某些部分传递给URL参数时，可以将其传递到状态中。

使用URL参数定义状态 ( Defining a State with URL Parameters )

这是我们使用参数定义状态的方式：

$stateProvider
  .state('partyDetail', {
    url: '/party/:partyID/:partyLocation'
  });

You can also define these by using {partyID}/{partyLocation}. Now we have a state that uses two parameters.

您也可以使用{partyID}/{partyLocation}定义它们。 现在我们有一个使用两个参数的状态。

链接到带有URL参数的状态 ( Linking to a State with URL Parameters )

Now this is how we will link to it in our views. We treat it like a function and will pass in each parameter through ui-sref.

现在，这就是我们将如何链接到我们的视图中。 我们将其视为函数，并将通过ui-sref传递每个参数。

For this example, let's say that we have some variables that we will want to use: id with a value of 5 and location with a value of las-vegas.

对于此示例，假设我们要使用一些变量： id为5的值和location为拉斯维加斯的值。

<a ui-sref="partyDetail({ partyID: id, partyLocation: location })">See the Party</a>

This will create the href for our link and will look like: See the Party.

这将为我们的链接创建href ，看起来像： See the Party 。

访问URL参数 ( Accessing URL Parameters )

We will probably need to use these in our controllers so let's go ahead and grab those using UI-Router's $stateParams.

我们可能需要在控制器中使用它们，所以让我们继续使用UI-Router的$stateParams来获取它们。

For this example, we'll just add a controller directly into our route.

对于此示例，我们将直接在路径中添加一个控制器。

$stateProvider
  .state('partyDetail', {
    url: '/party/:partyID/:partyLocation',
    controller: function($scope, $stateParams) {
      // get the id
      $scope.id = $stateParams.partyID;

      // get the location
      $scope.location = $stateParams.partyLocation;   
    }
  });

根据当前状态添加类 ( Adding Classes Based on Current State )

When users are browsing our application or site, sometimes we want to highlight things to let them know where they are. A good example of this is highlighting navigation items if they are currently on that page. UI-Router provides an easy way to add classes if the state matches the current state. All we have to do is use ui-sref-active. For this example, we have states called home, about and contact.

当用户浏览我们的应用程序或网站时，有时我们希望突出显示某些内容以使他们知道自己的位置。 一个很好的例子是突出显示导航项（如果当前在该页面上）。 如果状态与当前状态匹配，UI-Router提供了一种添加类的简便方法。 我们要做的就是使用ui-sref-active 。 对于此示例，我们具有称为home ， about和contact 。

If we wanted to add an active class to each if the state is active, we just do the following:

如果要在状态为活动的情况下向每个活动类添加活动的类，则只需执行以下操作：

<ul>
  <li><a ui-sref="home" ui-sref-active="active">Home</a></li>
  <li><a ui-sref="about" ui-sref-active="active">About</a></li>
  <li><a ui-sref="contact" ui-sref-active="active">Contact</a></li>
</ul>

Now if the current state matches the state in ui-sref, the class provided in ui-sref-active will activate. Then we can style that to our heart's content.

现在，如果当前状态与ui-sref状态匹配，则ui-sref-active提供的类将被激活。 然后，我们可以根据自己的内心需求来设置样式。

结论 ( Conclusion )

Hopefully these tips will help you build better Angular applications. Sound off in the comments if you have any great tips or any questions about UI-Router.

希望这些技巧将帮助您构建更好的Angular应用程序。 如果您有任何很棒的提示或有关UI-Router的任何问题，请在评论中忽略。

Edit Changing .when to .state. Mixed up ngRoute and UI-Router syntax.

编辑更改.when到.state 。 混合使用ngRoute和UI-Router语法。

翻译自: https://scotch.io/tutorials/3-simple-tips-for-using-ui-router

ui路由