在我的应用程序中,我希望在加载索引页面时加载嵌套视图list-patents.htm
。
我的主要导航位于我的index.htm
,包含两个导航项transactions
和patents
。
如果您点击patents
,则会加载另外两个子菜单项:list patents
和add patents
。然后,您可以在此处导航至list-patents.htm
,我想将其作为着陆视图。
我尝试了两种方法:
$urlRouterProvider.otherwise("");
我无法上班。此方法(在我的脚本中)加载了嵌套视图,但无法加载其父嵌套视图,导航菜单。
.state("index",
{
url: "",
templateUrl: "templates/list-patents.htm",
})
我希望将导航保留在自己的视图中,因为我没有看到创建重复代码的重点。
关于页面加载的任何想法,它会加载patent-nav.htm
及其嵌套视图list-patents.htm
?任何帮助将不胜感激
app.js
var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router']);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {
$stateProvider
.state("index",
{
url: "",
templateUrl: "templates/list-patents.htm",
})
.state("patents", {
url: "/patents",
templateUrl: "templates/patent-nav.htm",
controller: "patentCtrl"
})
.state("patents.list", {
url: "/list-patents",
templateUrl: "templates/list-patents.htm",
controller: "patentCtrl"
})
.state("patents.add", {
url: "/add-patents",
templateUrl: "templates/add-patent.htm",
controller: "patentCtrl"
})
视图
索引
<main class="container">
<nav>
<ul>
<a ui-sref="patents">Patents</a>
<a ui-sref="transactions">Transactions</a>
</ul>
</nav>
<section ui-view>
</section>
</main>
专利-NAV
<nav>
<ul>
<li><a ui-sref="patents.list">List patents</a></li>
<li><a ui-sref="patents.add">Add patent</a></li>
</ul>
</nav>
<div ui-view></div>
列表专利
<div>
//just a load of content
</div>
答案 0 :(得分:1)
这样做
$urlRouterProvider
.when('', '/parents/list-patents')
.when('/', '/parents/list-patents')
.otherwise('/parents/list-patents');