AngularJS对网址路由的更改

时间:2017-07-17 18:40:44

标签: angularjs routing angular-ui-router

我们的网站目前的路由设置为site.com/products/:id,因此示例网址可能为site.com/products/104。 我们不再需要网址中的ID,而是想要实际的产品名称。所以我们希望它为site.com/products/produc-name

我们将如何进行此更改?我们正在使用 ui-router 。我不确定还需要哪些其他信息,所以请你离开。寻求您可以提供的任何指导。谢谢。

路由器是:

.module('app', ['ui.router', 'ngCookies', 'ngSanitize', 'ngTouch'])
            .config(config)
            .run(run);
    config.$inject = ['$stateProvider', '$urlRouterProvider', '$authProvider', '$locationProvider'];
    function config($stateProvider, $urlRouterProvider, $authProvider, $locationProvider) {
        $stateProvider
                .state('home', {
                    url: '/',
                    controller: 'HomeController',
                    templateUrl: 'app/components/home/home.html',
                    resolve: {
                        alreadyLoggedIn: alreadyLoggedIn
                    }
                })
                .state('product', {
                    url: '/product/:id',
                    controller: 'ProductController',
                    title: "Product",
                    templateUrl: 'app/components/product/product.html',
                    controllerAs: 'vm'
                })

然后打电话给产品,我们使用

<a ng-href="/#/product/{{::value.id}}">

1 个答案:

答案 0 :(得分:0)

所以基本上,你需要做3件事。

1)将您的产品状态更改为

<a ng-href="/#/product/{{::value.productName}}">

2)将您的href更改为

if (networkConnectivity())
{
    try
    {
        HttpURLConnection urlc = (HttpURLConnection) (new URL("http://www.anywebsiteyouthinkwillnotbedown.com").openConnection());
        urlc.setRequestProperty("User-Agent", "Test");
        urlc.setRequestProperty("Connection", "close");
        urlc.setConnectTimeout(3000); //choose your own timeframe
        urlc.setReadTimeout(4000); //choose your own timeframe
        urlc.connect();
        networkcode2 = urlc.getResponseCode();
        return (urlc.getResponseCode() == 200); // good connection
    } catch (IOException e)
    {
        return (false);  //connectivity exists, but no internet.
    }
} else
{
    return false;  //no connectivity
}

3)更改ProductController以按名称而不是ID查找您的产品。

显然,如果productName字段实际上不是productName,那么您必须相应地进行调整。