Question

我在我的webapp中使用AngularJs和Ui-Router。我已经到了一点，我想让它变得更有活力。这就是我面临的情况：

我有一份城市名单;
每个城市都有一个包含大量业务的列表;

我想要的是：

例如，当我选择城市＆＃34;纽约＆＃34;时，我想将URL设置为：mysite.com/#/new-york
当我在纽约市访问一家公司时，我希望它像：mysite.com/#/new-york/name-business

目前我只是通过了城市Id所以我将其作为网址参数获取，然后根据此ID参数获取商家列表。

这是我目前正在使用的代码：

//City
.state('city', {
    url: "/City",
    views: {
        "main": {
            controller: 'CityCtrl',
            templateUrl: "content/section/city/city.html"
        }
    }
})

//Business
.state('business', {
    url: "/Business/:idparam",
    views: {
        "main": {
            controller: 'BusinessCtrl',
            templateUrl: "content/section/business/business.html"
        }
    }
})

很简单。但是，根据用户选择的城市名称，我不想使用URL url: "/Cities"，而是将其视为动态网址。

是否可以使用ui-router执行此操作？因为我在文档中没有发现任何相关内容。

如果是这样，我该怎么做才能达到这个效果？

编辑：

我在@Anid Monsur的答案中尝试了解决方案，但网址中的参数值为0，即使它是一个名字。例如：site.com/#/0而不是site.com/#/city-name

这就是我所做的：

.state('city', {
    abstract: true,
    url: "/:name",
    views: {
        "main": {
            controller: 'CityCtrl',
            templateUrl: "content/section/city/city.html"
        }
    }
})

我的链接是：

ui-sref="city({name: {{city.nm_url}} })"

为什么值为0的任何想法？

EDIT2

因为我传递的是字符串值而不是int，所以我必须从链接中删除{{ }}并解决了我的问题= ui-sref="city({name: city.nm_url })"

Answer 1

这是实现目标的最简单方法。使用子状态，以便每个连续的子项将段附加到URL。

城市州将有一个空白网址。
选择城市后，city.business州处于有效状态，其网址为/city，其中city为$stateParam，设置为new-york，示例
选择商家后，city.business.view州处于有效状态，其网址为/city/business，其中city与上述内容相同，而business将成为商家标识符。

状态配置：

//City list
.state('city', {
    url: "/",
    views: {
        "main": {
            controller: 'CityCtrl',
            templateUrl: "content/section/city/city.html"
        }
    }
})

//Business list for one city
.state('city.business', {
    url: "/:city",
    views: {
        "main": {
            controller: 'BusinessCtrl',
            templateUrl: "content/section/business/business.html"
        }
    }
})

// Specific Business
.state('city.business.view', {
    url: "/:business",
    views: {
        "main": {
            controller: 'BusinessCtrl',
            templateUrl: "content/section/business/business.html"
        }
    }
});

Angularjs和Ui-Router的动态URL名称

我想要的是：

编辑：

EDIT2

1 个答案: