Angular ui-router 是否支持嵌套视图中的不同主布局页面（新 Html 页面）答案

【问题标题】：Whether Angular ui-router support different master layout pages(new Html Page) from nested viewAngular ui-router 是否支持嵌套视图中的不同主布局页面（新 Html 页面）
【发布时间】：2017-10-24 20:45:39
【问题描述】：

今天我创建了一个 ThemeForest，就像一个带有 angular 和 mvc 的网站，所以我有一个登录页面，它将加载仪表板页面，在仪表板页面中有很多图标，所以我点击图标，它会加载为每个模板完成不同的布局页面。

这是我的问题。

我需要从当前嵌套视图中加载每个新布局。别想要在嵌套视图下加载？

2) 视图不是局部视图类型，它是一个新的 HTML 页面，其中包含来自当前文件的新 css 和 Js 文件引用。

3) 我不想在新的 Html 文件中加载当前的 Js 文件。

Angular js ui-Routing 技术是否使用页面中提到的 ui-view 工作。所以在页面中我点击了图标，需要加载不同的母版页，所以现在发生的是母版页加载下仪表板页面。角度路由是否支持它。

所以我创建了一个示例演示：

$stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })

        // nested list with custom controller
        .state('home.list', {
            url: '/list',
            templateUrl: 'Ecommmerce-Website.html',

        })

        // nested list with just some random string data
        .state('home.paragraph', {
            url: '/paragraph',
            template: 'I could sure use a drink right now.'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            url: '/about',
            views: {
                '': { templateUrl: 'partial-about.html' },
                'columnOne@about': { template: 'Look I am a column!' },
                'columnTwo@about': { 
                    templateUrl: 'table-data.html',
                    controller: 'scotchController'
                }
            }

        });

});

是启动页面：

这里我正在加载仪表板页面：

 <!DOCTYPE html>
    <html>
    <head>

        <!-- CSS (load bootstrap) -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <style>
            .navbar { border-radius:0; }
        </style>

        <!-- JS (load angular, ui-router, and our custom js file) -->
        <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
        <script src="app.js"></script>
    </head>

    <!-- apply our angular app to our site -->
    <body ng-app="routerApp">



    <!-- MAIN CONTENT -->
    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div class="container">
        <div ui-view></div>
    </div>
    </body>

这是在上面的 html 中加载的根路由器模板视图。

<div class="jumbotron text-center">


    <a ui-sref=".list" class="btn btn-primary">Ecommerce Websites</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Hotels Websites</a>

</div>

<div ui-view></div>

另一个母版页：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 1500px}

    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }
  </style>
    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">


    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="routerApp">

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav">
      <h4>John's Blog</h4>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Home</a></li>
        <li><a href="#section2">Friends</a></li>
        <li><a href="#section3">Family</a></li>
        <li><a href="#section3">Photos</a></li>
      </ul><br>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search Blog..">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>

    <div class="col-sm-9">
      <h4><small>RECENT POSTS</small></h4>
      <hr>
      <h2>I Love Food</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
      <h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br>
      <p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <br><br>

      <h4><small>RECENT POSTS</small></h4>
      <hr>
      <h2>Officially Blogging</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
      <h5><span class="label label-success">Lorem</span></h5><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>

      <h4>Leave a Comment:</h4>
      <form role="form">
        <div class="form-group">
          <textarea class="form-control" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
      </form>
      <br><br>

      <p><span class="badge">2</span> Comments:</p><br>

      <div class="row">
        <div class="col-sm-2 text-center">
          <img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
        </div>
        <div class="col-sm-10">
          <h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
          <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <br>
        </div>
        <div class="col-sm-2 text-center">
          <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
        </div>
        <div class="col-sm-10">
          <h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
          <p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <br>
          <p><span class="badge">1</span> Comment:</p><br>
          <div class="row">
            <div class="col-sm-2 text-center">
              <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
            </div>
            <div class="col-xs-10">
              <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
              <p>Me too! WOW!</p>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid">
  <p>Footer Text</p>
</footer>

</body>
</html>

这里是 plunker 演示： http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview:

【问题讨论】：

标签： angularjs angular-ui-router angular-routing angular-ui-router-extras angular-router-loader

【解决方案1】：

您必须对代码进行一些更改才能满足您的要求。

我使用 ui-router 多视图来实现这一点 here is a documentation for it

1) 在 app.js 中，将您的状态更改为，

 $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
          url: '/home',
           views: {
                '': { templateUrl: 'partial-home.html' },
                'header': { templateUrl: 'tplheader.html', },
                'footer': { 
                    templateUrl: 'tplfooter.html',

                }
            }
        })

        // nested list with custom controller
        .state('list', {
            url: '/list',
            templateUrl: 'partial-home-list.html',
            controller: function($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })

        // nested list with just some random string data
        .state('paragraph', {
            url: '/paragraph',
            template: 'I could sure use a drink right now.'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            url: '/about',
            views: {
                '': { templateUrl: 'partial-about.html' },
                'columnOne@about': { template: 'Look I am a column!' },
                'columnTwo@about': { 
                    templateUrl: 'table-data.html',
                    controller: 'scotchController'
                }
            }

        });

});

检查，将home.list 更改为.state('list') 和home.paragraph .state('paragraph' )

2) 二、partial-home.html

将ui-sref=".list" 更改为ui-sref="list" 和ui-sref=".paragraph" 更改为ui-sref="paragraph"

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>

    <a ui-sref="list" class="btn btn-primary">List</a>
    <a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>

</div>

<div ui-view></div>

3) 在 index.html

中

<body ng-app="routerApp">

<!-- NAVIGATION -->
<script type="text/ng-template" id="tplheader.html">
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>
</script>

<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
  <div ui-view="header"></div>
    <div ui-view></div>
    <div ui-view="footer"></div>
</div>

<script type="text/ng-template" id="tplfooter.html">
  <div class="text-center">
    <p>A tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p>
    <p>View the tutorial: <a href="http://scotch.io/tutorials/javascript/angular-routing-using-ui-router" target="_blank">AngularJS Routing using UI-Router</a></p>
</div>
</script>



</body>

HERE IS THE CHANGED PLUNKER DEMO

【讨论】：

路由工作正常，但我必须加载完全新的布局它不起作用，单击列表或段落时我需要全新的布局，我也不想在菜单图标下加载。如果不可能，意味着我将采用另一种方法而不是角度路由。
现在检查 plunker
很高兴为您提供帮助。如果你觉得有用，可以接受我的回答。
此解决方案仅适用于布局，但在我的情况下需要加载新的 Html 布局，这意味着它包含相同的 js 引用或不同的 js 引用和新的 css 文件，我不想加载旧的新布局中的 CSS 样式。路由在单页应用程序中工作，在我的情况下，当单击按钮时，它将加载新的布局文件 html 、body 和新的 head 标签。
可以根据当前路由包含js和css文件