evk*_*ine 2 javascript angularjs angular-routing angular-ui-router
我试图在我的应用程序中设置几个级别的路由和嵌套视图,以便根据路由替换部分应用程序.我能够加载登录页面,似乎布局视图也加载了,但是,我似乎无法让嵌套<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>
main.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>
有一个工作的plunker,显示你的场景
我对你的州定义做了一些改动:
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
我们正在使用controller和controllerAs语法
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
没有absulte命名,我们的目标是我们的父,相对足够,更具可读性
.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();
}]
}
})
主要国家在我们的父母,不重新定义它
.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',
}
}
});
检查它在这里