Question

如何加载不同的布局？

目前我的后端有三个布局，一个用于admin，一个用于user，最后一个用于teacher，即adminLayout.html，userlayout.html和{{ 1}}用于仪表板。

我正在写这样的路线 -

teacherLayout.html

对于app.config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'views/pages/home.html', controller: 'homeCtrl' }) .when('/users/login', { templateUrl: 'views/users/login.html', controller: 'usersLoginCtrl' }) .when('/users/dashboard', { templateUrl: 'views/users/dashboard.html', controller: 'usersDashCtrl' }) .when('/teachers/login', { templateUrl: 'views/teachers/login.html', controller: 'teachersLoginCtrl' }) .when('/teachers/dashboard', { templateUrl: 'views/teachers/dashboard.html', controller: 'teachersDashCtrl' }) });，我想要/users/dashboard和usersLayout.html我想要老师来自。

我怎么能实现这个目标？

我尝试了/teachers/dashboard，但它在网址中占据了整个路径，但是我希望我的网址像 -

$window.location.href = "LINK_TO_LAYOUT";

Answer 1

你应该使用Ui-Router。

它支持嵌套视图。

因此，在您的示例中，您的路线将是这样的。

app.config(function($stateProvider){
  $stateProvider
    .state('main', {
        url: '/',
        templateUrl: 'views/pages/home.html',
        controller: 'homeCtrl'
    })
    .state('users', {
        url: '/users',
        templateUrl: 'views/users/layout.html'
    })
    .state('users.login', {
        url: '/users/login',
        templateUrl: 'views/users/login.html',
        controller: 'usersLoginCtrl'
    })
    .state('users.dashboard', {
        url: '/users/dashboard',
        templateUrl: 'views/users/dashboard.html',
        controller: 'usersDashCtrl'
    })
    .state('teachers', {
        url: '/teachers',
        templateUrl: 'views/teachers/layout.html'
    })
    .state('teachers.login', {
        url: '/teachers/login',
        templateUrl: 'views/teachers/login.html',
        controller: 'teachersLoginCtrl'
    })
    .state('teachers.dashboard', {
        url: '/teachers/dashboard',
        templateUrl: 'views/teachers/dashboard.html',
        controller: 'teachersDashCtrl'
    })
});

然后你需要创建这个新的布局页面。开：views / users / layout.html

<div id="usersLayout">
    <ui-view/>
</div>

开启：views / teachers / layout.html

<div id="teachersLayout">
    <ui-view/>
</div>

希望这能帮到你。

Answer 2

使用ui-router

中的“抽象”状态的方法之一

$stateProvider
.state('contacts', {
    abstract: true,   // <<< this is your layout
    url: '/contacts',

    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    // >>> Or use templateUrl: 'contactLayout.html'
    template: '<ui-view/>'
})
.state('contacts.list', {
    // url will become '/contacts/list'
    url: '/list'
    //...more
})
.state('contacts.detail', {
    // url will become '/contacts/detail'
    url: '/detail',
    //...more
})

请花一些时间学习ui-router，你将拥有强大而简单的工具来在angularjs中进行路由。 Check docs了解有关抽象状态的更多信息。

不同布局的角度路由

2 个答案: