UI-具有嵌套视图的路由器

Question

我在让 UI-router 使用嵌套视图时遇到问题。我有一个带有 Header、Nav、mainContainer 的简单布局页面。我只是想将 Header 和 Nav 作为布局页面注入，而 mainContent 将从资源页面驱动。

但是除了初始布局外什么也没有显示。

我创建了一个 Plunker 来显示标记和代码。

非常感谢任何帮助。

 <!DOCTYPE html>
<html ng-app="Portal">

  <head>
    <title>{{PageTitle}}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
  </head>

  <body style="margin: 0px; padding: 0px; color: #000; font-weight: 900;">
    <div>
      <header>
        <div ui-view="header"></div>
      </header>
    </div>
    <div class="mainNav" style="top: 6vh;position: fixed; display: inline-block;border: 1px solid black;background: #620000;height: 97vh;border-top: 4px solid rgb(36,50,57); box-shadow: 0px 3px 3px 3px rgb(36,50,57);width: 10vw;max-width: 10vw;margin:0px; padding: 0px;">
      <div ui-view="profile"></div>
      <div ui-view="nav"></div>
    </div>
    <div style="width: 89vw;display: inline-block; border: 1px solid black;top: 6vh;left: 10vw;position: fixed;padding: .2%;height: 90vh;">
      <div ui-view="mainContainer"></div>
    </div>
  </body>

</html>

Script.js

var app = angular.module('Portal', [ 'ui.router'  ]);   //, 'ngRoute', 'ngMessages',


app.config(function ($stateProvider) {


    $stateProvider
  .state('root',{
          url: '',
          abstract: true,          
          views: {
            'header': {
              templateUrl: 'Header.html'

            },
            'profile':{
              templateUrl: 'Profile.html'

            },
            'nav':{
                templateUrl: 'Nav.html'
            }
          }
        });

    $stateProvider    
    .state('root.index', {
          url: '/',
          views: {
            'mainContainer': {
              templateUrl: 'Sample.html'
            }
          }
        });

});

Header.html

<div>      
  This is the Text that should be in the heaeder
</div>

我为每个嵌套视图使用相同的示例文本。

Answer 1

多个问题：

1) 检查个人资料视图的 templateUrl 规范。

它指向一个不存在的文件。 templateUrl：'Profile.html' 您已将文件命名为 'Porfile.html'。

2) 您缺少到“/”的默认路由。您更正后的配置应如下所示：

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
     .state('root',{
          url: '',
          views: {
            'header': {
              templateUrl: 'Header.html'

            },
            'profile':{
              templateUrl: 'Porfile.html'

            },
            'nav':{
                templateUrl: 'Nav.html'
            }
          }
        });

    $stateProvider    
    .state('root.index', {
          url: '/',
          views: {
            'mainContainer': {
              templateUrl: 'Sample.html'
            }
          }
        });

});

3) 然后在您的 index.html 中您缺少 javascript

的脚本 src 标签

    <script src="script.js"></script>

UI-具有嵌套视图的路由器

UI-Router with Nested Views

angularjs

angular-ui-router