gpt4 book ai didi

javascript - 如何加载嵌套了 3 个状态的 UI-router ui-view 模板?

转载 作者:行者123 更新时间:2023-11-29 16:59:25 26 4
gpt4 key购买 nike

我正在尝试在我的应用程序中设计几个层次的路由和嵌套 View ,以便根据路由替换应用程序的某些部分。我能够加载登录页面,布局 View 似乎也加载了,但是,我似乎无法获得嵌套的 <ui-view />标签工作。谁能告诉我我做错了什么,或者 Angular 中是否有更惯用的方法来完成相同的功能。

app.js

(function() {
'use strict';



angular
.module('webApp', [
'ui.router',
])
.config(config)
.run(run);

config.$inject = ['$stateProvider', '$urlRouterProvider'];

function config($stateProvider, $urlRouterProvider, ngClipProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl as login',
url: ''
})
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
.state('app.main.foo', {
url: '',
views: {
'header@app.main': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl as header'
},
'sidebar@app.main': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl as sidebar'
},
'main@app.main': {
templateUrl: 'partials/main.html',
controller: 'MainCtrl as main'
},
'subHeader': {
templateUrl: '<div><div ui-view="bottomHeader"></div></div>',
controller: 'SubHeaderCtrl',
controllerAs: 'subHeader'
},
'subSidebar': {
templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',
controller: 'SubSidebarCtrl',
controllerAs: 'subSidebar'
},
'bottomHeader': {templateUrl: '<div>FOO</div>'},
'bottomSidebar': {templateUrl: '<div>BAR</div>'}
},
resolve: {
isAuthenticated: ['Auth', function(Auth) {
return Auth.isAuthenticated();
}]
}
})
.state('app.main.foo.bar', {
url: '/:id',
views: {
'main@': {
templateUrl: 'partials/main.html'
},
'mainOne@': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl as mainOne'
},
'mainTwo@': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl as mainTwo'
},
'mainThreee@': {
templateUrl: 'partials/main-three.html',
controller: 'MainThreeCtrl as mainThree'
}
}
});
}

run.$inject = ['Auth'];

function run(Auth) {
Auth.stateChangeError();
Auth.loginSuccess();
Auth.loginFailure();
Auth.checkSession();
}

}());

index.html

<!DOCTYPE html>

<html lang="en" ng-app="webApp">
<head>
<title>FooBar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/main.css" />
<script src="/js/all.js"></script>
</head>

<body ui-view>
</body>

</html>

layout.html

<div ui-view="header"></div>

<div class="app">
<div class="getting-started">
</div>

<div ui-view="sidebar"></div>

<div ui-view="main"></div>
</div>

header.html

<header class="header">
<div ui-view="subHeader"></div>

<div class="trigger-button">
<button class="trigger">
<i class="icon-account"></i>
</button>
</div>
</header>

ma​​in.html

<div>
<div ui-view="mainOne"></div>
<div ui-view="mainTwo"></div>
<div ui-view="mainThree"></div>
</div>

sidebar.html

<div>
<div ui-view="subSidebar"></div>
</div>

最佳答案

a working plunker , 展示你的场景

我对您的状态定义做了一些更改:

$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})

我们正在使用 controllercontrollerAs 语法

  .state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})

没有绝对的命名,我们以我们的 parent 为目标,亲戚就足够了,更具可读性

  .state('app.main.foo', {
url: '',
views: {
'header': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl',
controllerAs: 'header',
},
'sidebar': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl',
controllerAs: 'sidebar',
},
'main': {
templateUrl: 'partials/main.html',
controller: 'MainCtrl',
controllerAs: 'main',
}
},
resolve: {
isAuthenticated: ['Auth', function(Auth) {
return Auth.isAuthenticated();
}]
}
})

main状态在我们的parent中,不要重新定义它

  .state('app.main.foo.bar', {
url: '/:id',
views: {
'mainOne': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl',
controllerAs: 'mainOne',
},
'mainTwo': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl',
controllerAs: 'mainTwo',
},
'mainThreee': {
templateUrl: 'partials/main-three.html',
controller: 'MainThreeCtrl',
controllerAs: 'mainThree',
}
}
});

查一下here

关于javascript - 如何加载嵌套了 3 个状态的 UI-router ui-view 模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29441976/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com