1

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

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

索引.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'
        }).
        ...
}]);
4

1 回答 1

3

我在这里找到了 Angular 中多个布局路由的非常好的解决方案。

它基于内置的 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'});
        ...
}]);
于 2015-05-15T09:32:28.107 回答