我是使用angular-ui-router的新手,我有一个索引.html和像这样的javascript:
var mainApp = angular.module('mainApp',['ui.router']);
mainApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider',
function($stateProvider, $urlRouterProvider,$httpProvider){
$urlRouterProvider.when('','/index');
$stateProvider.state('index',{
url:"/index",
views:{
'menu':{
templateUrl:'views/menu.html'
},
'content':{
templateUrl:'views/content1.html'
}
}
}).state('index.content1',{
url:"index/content1",
views: {
'content@index': {
templateUrl: 'views/content1.html'
}}
}) .state('index.content2',{
url: 'index/content2',
views: {
'content': {
templateUrl: 'views/content2.html'
}
}
})
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-app="mainApp">
<div class="container">
<div class="row">
<div class="col-md-12 column text-center bg-primary">
Title
</div>
</div>
<div class="row">
<div class="col-md-3 column bg-danger">
<div ui-view="menu"></div>
</div>
<div class="col-md-9 column bg-info">
<div ui-view="content">
</div>
</div>
</div>
</div>
</body>
</html>
菜单.html
<ul>
<li><a ui-sref="index.content1" ui-sref-active="active">menu1</a></li>
<li><a ui-sref="index.content2" ui-sref-active="active">menu2</a></li>
</ul>
但是当我在菜单.html中点击"menu1"或"menu2"链接时,"content1"或"content2"没有加载,我哪里出错了?
更改要在子路由部分提及的子状态 URL。 Ui 路由器引擎将负责基于状态层次结构的 URL 形成。
然后通过在命名视图后添加@
来使content
命名视图成为relative
,因为您想更改命名视图,这是index
(父(状态的一部分。
.state('index.content1', {
url: "/content1",
views: {
'content@': {
templateUrl: 'views/content1.html'
}
}
}).state('index.content2', {
url: '/content2',
views: {
'content@': {
templateUrl: 'views/content2.html'
}
}
})
普伦克演示