Question

我有单页angularjs应用程序使用嵌套的命名视图和ui-router工作，但是在定义状态时有很多重复的代码，但我不确定最好的方法问题。在下面各州的声明中，我必须重复所有观点，其中唯一的变化是“页面 - 视图”中的模板和控制器的名称。＆＃39;登录状态 - 视图＆＃39;网站状态视图＆＃39;＆＃39; debug-view＆＃39;一切都保持不变。我想删除这个重复，只定义规则的例外。

我已尝试过正则表达式，但我无法使用它，我已阅读[问题]：AngularJS - Router UI - Defining a wildcard parented state这可能是一个选项，可以浏览常用页面列表和定义每个州。在我继续之前，我想确保我正在接近这个正确的＆＃39;办法。使用正则表达式，如果是这样，或者通过循环来定义状态，或者我缺少的其他东西。

页面html：

<!--Simplified html: named ui-views defined-->
<div data-ng-controller="mainCtrl as vm">
    <div class="container body-content">
        <div ui-view="login-status-view"></div>
        <div ui-view="site-status-view"></div>
        <div ui-view="page-view"></div>
        <div ui-view="debug-view"></div>
    </div>
</div>

状态提供者状态在此处定义：

   $stateProvider

.state('home', {
    url: '/home',
    views: {
        "page-view": { templateUrl: 'pages/partial/home.html' }
        , "login-status-view": { templateUrl: 'pages/partial/login.display.html' }
        , "site-status-view": { templateUrl: 'pages/partial/status.display.html' }
        ,"debug-view": { templateUrl: 'pages/debug/debug.details.html', controller: 'debug.details' }
    }
})
.state('about', {
    url: '/about',
    views: {
        "page-view": { templateUrl: 'pages/partial/about.html' }
        , "login-status-view": { templateUrl: 'pages/partial/login.display.html' }
        , "site-status-view": { templateUrl: 'pages/partial/status.display.html' }
        , "debug-view": { templateUrl: 'pages/debug/debug.details.html', controller: 'debug.details' }
    }
})
.state('contact', {
    url: '/contact',
    views: {
        "page-view": { templateUrl: 'pages/partial/contact.html' }
        , "login-status-view": { templateUrl: 'pages/partial/login.display.html' }
        , "site-status-view": { templateUrl: 'pages/partial/status.display.html' }
        , "debug-view": { templateUrl: 'pages/debug/debug.details.html', controller: 'debug.details' }
    }
})
// more pages inserted here, all with their own templates and some with their own controllers
// ...
//
// register, login and logout pages, each with their own template and controller
.state('register', {
    url: '/register',
    views: {
        "page-view": { templateUrl: 'pages/partial/account.register.html', controller: 'account.register' }
        , "login-status-view": { templateUrl: 'pages/partial/login.display.html' }
        , "site-status-view": { templateUrl: 'pages/partial/status.display.html' }
        , "debug-view": { templateUrl: 'pages/debug/debug.details.html', controller: 'debug.details' }
    }
})
.state('login', {
    url: '/login',
    views: {
        "page-view": { templateUrl: 'pages/partial/account.login.html', controller: 'account.login' }
        , "login-status-view": { templateUrl: 'pages/partial/login.display.html' }
        , "site-status-view": { templateUrl: 'pages/partial/status.display.html' }
        , "debug-view": { templateUrl: 'pages/debug/debug.details.html', controller: 'debug.details' }
    }
})
.state('logout', {
    url: '/logout',
    views: {
        "page-view": { templateUrl: 'pages/partial/account.logout.html', controller: 'account.logout' }
        , "login-status-view": { templateUrl: 'pages/partial/login.display.html' }
        , "site-status-view": { templateUrl: 'pages/partial/status.display.html' }
        , "debug-view": { templateUrl: 'pages/debug/debug.details.html', controller: 'debug.details' }
    }
});
// there are some other pages not included here, but that follow a similar format

Answer 1

将所有常见视图置于抽象父状态。

看起来像这样，您的页面视图模板是子状态模板的占位符。

        .state('shell', {
        abstract: true,
        views: {
            "page-view": { template: '<div ui-view></div>' } // THIS IS WHERE THE CHILD (PAGE) VIEWS WILL BE RENDERED
            , "login-status-view": { template: '<div>This is the login status view</div>' }
            , "site-status-view": { template: '<div>This is the site status view</div>' }
            , "debug-view": { template: '<div>This is the debug view</div>' }
            }
    })
    .state('shell.home', {
        url: '/home',
        template: '<div class="purple">This is the home view</div>'
    })
    .state('shell.about', {
        url: '/about',
        template: '<div class="green">This is the about view</div>'
    })
    .state('shell.contact', {
        url: '/contact',
        template: '<div class="blue">This is the contact view</div>'
    })
    .state('shell.register', {
        url: '/register',
        template: '<div class="pink">This is the register view</div>'

    })
    .state('shell.login', {
        url: '/login',
        template: '<div class="orange">This is the login view</div>'
    })
    .state('shell.logout', {
        url: '/logout',
        template: '<div class="red">This is the logout view</div>'
    });

AngularJS Ui路由器正则表达式匹配通配符到模板和控制器

1 个答案: