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.
链接到国家 ( 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路由