Question

我正在使用angular1和ui-router（1.0.0.beta3）构建一个电子商务网站。

但我不知道如何设置它。这就是我的想法。

const home = {
    name: 'home',
    url: '/',
    views: {
        header: 'header',
        navbar: 'navbar',
        sidenav: 'sideNav',
        content: 'home'
    }
};

const category = {
    name: 'home.category',
    url: '/{url}',
    views: {
        content: 'categoryPage'
    }
};

const product = {
    name: 'home.category.product',
    url: '/{url}',
    views: {
        content: 'productPage'
    }
};

我们无法控制来自cms的链接，“/ about-us”和“/ category-x”可以是类别或cms页面，所以我们添加了一个路由状态，我们可以解决entity_type（产品，类别或cms页面）

    .state('home.router', {
        url: '/{url}?:{page:int}&:{limit:int}&:id',
        params: {
            limit: null,
            category: null,
            page: {
                dynamic: true
            },
            id: {
                dynamic: true
            }
        },
        templateProvider: ['urlRewrite', function(urlRewrite) {
            switch (urlRewrite.entity_type) {
                case 'category':
                    return '<category-page limit="$stateParams.limit" page="$stateParams.page" category="{name: $resolve.urlRewrite.request_path, id: $resolve.urlRewrite.entity_id}"/>';
                case 'product':
                    return '<product-page id="$resolve.urlRewrite.entity_id"/>';
                case 'cms-page':
                default:
                    return '<page url="$resolve.urlRewrite.target_path" />';
            }
        }],
        resolve: {
            urlRewrite: ['UrlRewrite', '$stateParams', function(UrlRewrite, $stateParams) {
                return UrlRewrite.getUrlRewrite($stateParams.url);
            }]
        }
    });

问题是类别和路由网址模式发生冲突。我们不能真正使用父/子继承等等。

我们应该如何解决“未知”网址？

Plunkr：http://plnkr.co/edit/gXzDO5j3arP8QCrpwL9k?p=preview

Answer 1

让我为您提供示例代码段。它会给你一个想法。

appName.config(['$stateProvider','$urlRouterProvider', '$httpProvider' ,function ($stateProvider, $urlRouterProvider, $httpProvider) {

    // $urlRouterProvider.otherwise('/login');
    $urlRouterProvider.otherwise(function($injector, $location){
        var state = $injector.get('$state');
        var $localStorage = $injector.get('$localStorage');
        if($localStorage.user){
            return '/dashboard'
        }else {
            return '/login'
        }
    });
    $stateProvider
    .state('login', {
        url: '/login',
        views: {
            '': {
                templateProvider: function ($templateFactory, $localStorage) {
                    return $templateFactory.fromUrl(asset_path('angular/templates/base/login.html'));
                },
                controller: 'LoginCtrl'
            }
        }
    })

    $httpProvider.interceptors.push('Interceptor');

}]);

如何在ui-router中构建我的状态和路由

1 个答案: