如何设置角UI路由器默认的子视图 [英] How to set default child view with Angular UI Router

问题描述

让我们说我有以下3个角度UI路由器规定：

Let's say I have the following 3 Angular UI Router states:

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

如果在 adminCompanies 转换到直接，我怎么能告诉角UI路由器转到 adminCompanies.list 状态呢？

If the adminCompanies is transitioned to directly, how can I tell Angular UI Router to go to the adminCompanies.list state instead?

在理想情况下，想什么，我来是一样的东西：

Ideally, what I'd like to is something like:

$stateProvider.when('adminCompanies', 'adminCompanies.list');

在我的code，我再想$ state.go（'adminCompanies'）等同于$ state.go（'adminCompanies.list'）

In my code, I then want $state.go('adminCompanies') to be equivalent to $state.go('adminCompanies.list')

推荐答案

随着应用程序的当前设置，你不应该需要为这个任何明确的逻辑。当一个子状态有一个空的网​​址属性，同时它的父状态变为主动激活。为子状态的任何模板插入用户界面视图由父状态的模板中提供指令。该角UI 示例应用程序针对这种架构：在联系人状态导航到，其模板提供导航布局，以及作为一个独特的用户界面视图其子状态;因为 contacts.list 状态有一个网​​址的属性，，当其父状态，联系人导航到它自动加载。这是在应用程序的评论记载：

As your application is currently set up, you should not need any explicit logic for this. When a sub-state has an empty url property, it becomes active at the same time its parent state becomes active. Any template for the sub-state is inserted into the ui-view directive provided by the parent state's template. The Angular UI sample application addresses this type of architecture: when the contacts state is navigated to, its template provides the navigation layout as well as a distinct ui-view for its sub-states; because the contacts.list state has a url property of "", it is automatically loaded when its parent state, contacts is navigated to. This is documented in the application's comments:

用空的网址是指当其母公司的网址导航到这个孩子的状态会变得活跃。孩子状态的URL会自动添加到他们的父母的网址。所以这个国家的网址为/接触（因为/触点'+''）

Using an empty url means that this child state will become active when its parent's url is navigated to. Urls of child states are automatically appended to the urls of their parent. So this state's url is '/contacts' (because '/contacts' + '').

现在，假设由于某种原因，你的从不想你的父母 adminCompanies 状态变得活跃。在这种情况下，可以作出这样的状态的<一个href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#wiki-abstract-states\">abstract状态像这样：

Now, assuming for one reason or another that you never wanted your parent adminCompanies state to become active. In this case, you can make that state an abstract state like so:

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "/list",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

的注意添加了摘要：真正除了3号线和 /列表的显式状态网址为 adminCompanies.list 的

Note the addition of the abstract: true addition on the 3rd line and the explicit state url of /list for adminCompanies.list

这告诉角的UI，它应该把这种状态下，如果没有为网址导航的目的存在。当您浏览到子状态，虽然它仍然会变得活跃，所以它仍然会使用您提供的preFIX子状态的URL网址。但是如果你试图从另一个状态导航到它，它就会充当如果国家不存在。出于这个原因，还需要添加使用处理，提供无与伦比的网址 $ urlRouteProvider 。

This tells Angular-UI that it should treat this state as if doesn't exist for URL navigation purposes. It will still become active when you navigate to sub-states though, so it will still use the URL you provide to prefix the URL of sub-states. But if you try navigating to it from another state, it will act as if the state doesn't exist. For this reason, you will also need to add handling for unmatched URLs using $urlRouteProvider.

有一个基本的使用 $ urlRouteProvider 可能是这样的：

A basic use of $urlRouteProvider might look like this:

$urlRouterProvider.otherwise("/")

这只是重定向到不存在的国家的所有呼叫的状态用/的URL。这里假设你有一个。然而，因为有人可能试图导航到列表视图，但他们导航到 /管理/企业直接，你应该有一个这样的处理程序：

That just redirects all calls to non-existent states to the state with the URL of "/". This assumes you have one. However, because someone might be trying to navigate to the list view but they are navigating to /admin/companies directly, you should probably have a handler like this:

$urlRouterProvider.when("/admin/companies", "/admin/companies/list");

您使用哪一个取决于你的应用程序的架构，但似乎为当前的需求，你不应该做任何事情。如果您的规格变化，抽象状态可能会派上用场。

Which one you use depends on the architecture of your application, but it seems that for your current needs you shouldn't have to do anything. If your specifications change, the abstract state might come in handy.

这篇关于如何设置角UI路由器默认的子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！