1

バックエンドをダッシュ​​ボード レイアウトとログイン レイアウトにセグメント化する必要があります。2 つの異なるレイアウトである必要があります。

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

1 に答える 1

3

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'});
        ...
}]);
于 2015-05-15T09:32:28.107 に答える