Question

我遇到了为角度应用创建正确路由的问题。我决定使用angular-ui router，因为它有嵌套视图。基本上我的应用应该与google graphs网站类似。我有一个显示用户产品的页面。产品按类别进行分类，因此，如果用户选择category1，则会列出此类别中的所有产品（一些预告图片和名称为链接），路线为/category/{categoryId}。

如果用户点击了类别页面中的产品链接，则该网址应更改为/item/{itemId}，但该网页应与Google图表类似：所有产品都在向上和向下滑动，产品详细信息显示在两者之间部分。

另一方面，如果用户在浏览器中输入/item/{itemId}，则应该呈现具有其他布局的页面（只有没有动画的产品详细信息和产品列表，可以从服务器提供）。当我使用angular-ui router和absolute route的嵌套视图时，我遇到了问题，那么必须将参数categoryId添加到产品商品路线中，而不是ui-sref不会工作：

我的路线：

var app = angular.module('productsApp', [
    'ui.router',
    'productsControllers'
]);

app.config(["$locationProvider", function ($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    var urlPrefix = '/' + productsSettings.lang + '/' + productsSettings.productsName;

    $stateProvider
        .state('category', {
            url: urlPrefix + '/category/{categoryId}',
            views: {
                'products-view': {
                    templateUrl: productsSettings.hostUrl + '/Content/partials/products/products-index.html',
                    controller: 'ProductsSearchCtrl'
                }
            }
        })
        .state('category.item', {
            url: '^' + urlPrefix + '/item/{itemId}/{categoryId:(?:/[^/]+)?}',
            views: {
                'item-view' : {
                    templateUrl: productsSettings.hostUrl + '/Content/partials/products/products-item.html',
                    controller: function($scope, $stateParams) {
                        $scope.itemId = $stateParams.itemId;
                    }
                }
            }
    });

}]);

产品-的index.html：

<div class="container">
    <div class="row">
        <div ng-repeat="product in products" class="span2">

            <div class="photo">
                <img ng-src="http://placehold.it/240x240" />
            </div>
            <div>
                <!--                 <a href="/en/products/item/{{ product.KimballNumber }}">{{ product.Name }}</a>-->
                <a ui-sref="category.item({itemId: product.KimballNumber})">{{ product.Name }}</a>
            </div>

            <div class="desc2" style="height:50px;padding:10px 0;">
                <span ng-repeat="slug in product.Breadcrumb">\ {{slug}} </span>
            </div>
        </div>
    </div>
</div>
<div ui-view="item-view"></div>

并负责渲染菜单：

@model CategoriesMenuRenderingModel

@CreateCategories(Model.Categories)

@helper CreateCategories(IList<CategoryItem> categories)
{
    if (categories.Any())
    {
        <div class="sidebar-nav">
            <ul class="nav nav-list">
                @foreach (var category in categories)
                {
                    <li>
                        <a ui-sref="category({categoryId:'@category.Path'})">@category.DisplayName</a>
                        @CreateCategories(category.Children)
                    </li>
                }
            </ul>
        </div>
    }
}

如何从项目网址中删除参数{categoryId}？

Angular UI路由器更改子URL而没有父url参数

0 个答案: