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

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

Render different layouts via ng-route or angular-ui-router | Angularjs

angularjs

angular-ui-router

angularjs-ng-route