在页面上加载模板加载状态 - AngularJS

时间:2017-05-31 11:42:15

标签: javascript html angularjs angular-ui-router

在我的应用程序中,我希望在加载索引页面时加载嵌套视图list-patents.htm

我的主要导航位于我的index.htm,包含两个导航项transactionspatents

如果您点击patents,则会加载另外两个子菜单项:list patentsadd 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>

1 个答案:

答案 0 :(得分:1)

这样做

$urlRouterProvider
                  .when('', '/parents/list-patents')
                  .when('/', '/parents/list-patents')
                  .otherwise('/parents/list-patents');