Question

我需要将后端细分为仪表板布局和登录布局。它必须是两种不同的布局。

如何使用angular-ui-router实现这一点？

的index.html

<body ng-controller="MainCtrl">
    ...
    <div id="page-wrapper" ui-view>
    ...

JS

app.config(['$stateProvider', function($stateProvider){
    $stateProvider.
        state('login', {
            url: '/login',
            templateUrl: 'assets/templates/login.html',
            controller: 'AuthCtrl'
        }).
        state('/products', {
            url: '/products',
            templateUrl: 'assets/templates/product-list.html',
            controller: 'ProductListCtrl'
        }).
        state('/categories', {
            url: '/categories',
            templateUrl: 'assets/templates/category-list.html',
            controller: 'CategoryListCtrl'
        }).
        state('/product/add', {
            url: '/product/add',
            templateUrl: 'assets/templates/add-product.html',
            controller: 'AddProductCtrl'
        }).
        ...
}]);

Answer 1

我已经为Angular here中的多个草案路由找到了非常好的解决方案。

它基于内置的Angular的$ route引擎，该引擎将其扩展为Angularjs中的高级路由。

还想补充一点，使用和阅读非常简单，非常直观。

为了更好地理解下面是解决我的特定问题的例子。一切都运作良好。

app.config(['$routeSegmentProvider', function($routeSegmentProvider){
    $routeSegmentProvider.

        when('/',             'main').
        when('/products',     'main.products').
        when('/product/add',  'main.productAdd').
        when('/categories',   'main.categories').
        when('/category/add', 'main.categoryAdd').
        when('/login',        'login').

        ...

        segment('main', {
            templateUrl: 'assets/templates/home.html',
            controller: 'MainCtrl'}).

        within().
            segment('products', {
                default: true,
                templateUrl: 'assets/templates/product-list.html',
                controller: 'ProductListCtrl'}).
            segment('productAdd', {
                templateUrl: 'assets/templates/add-product.html',
                controller: 'AddProductCtrl'}).
            segment('categories', {
                templateUrl: 'assets/templates/category-list.html',
                controller: 'CategoryListCtrl'}).
            segment('categoryAdd', {
                templateUrl: 'assets/templates/add-category.html',
                controller: 'AddCategoryCtrl'}).
            up().

        segment('login', {
            templateUrl: 'assets/templates/login.html',
            controller: 'MainCtrl'});
        ...
}]);

通过ng-route或angular-ui-router |渲染不同的布局Angularjs

1 个答案: