javascript - 具 Angular 多个 View

Question

因此，我尝试以 Angular 显示多个 View ，以帮助解决我正在构建的网站中遇到的页脚问题。我想确保我一直在阅读和尝试模仿的内容是有意义的。这就是我到目前为止所拥有的。

index.html

<!--Do not code below this line-->
<main ng-view="header"></main>
<main ng-view="body"></main>
<main ng-view="footer"></main>

routes.js 文件

angular.module('appRoutes', ['ngRoute'])

.config(function ($routeProvider, $locationProvider) {
$routeProvider
    .when('/', {
        views: {
            'header': {
                temmplateUrl: 'app/views/header.html'
            },
            'body':   {
                templateUrl: 'app/views/body.html'
            },
            'footer': {
                templateUrl: 'app/views/footer.html'
            }
        }
    })

我可以在只有一个 View 的情况下使用它，并将页眉和页脚放在index.html文件中，但我发现您可以有多个 View ，实际上只需将“正文” View 与其他页面切换即可。

如有任何建议，我们将不胜感激。谢谢

Answer 1

要显示多个 View ，您只能使用 ng-include。
请参阅https://docs.angularjs.org/api/ng/directive/ngInclude了解更多 ngInlude 详细信息。
这是一个示例:(注意用单引号括起来)

<div id="header">
    <div ng-include="'header.html'"></div>
</div>
<div id="content" ng-view></div>
<div id="footer">
    <div ng-include="'footer.html'"></div>
</div>

使用 ngRoute 和 ng-view 来定义一个区域(例如 div#content)，动态内容将在其中更改(作为部分 html)。
请参阅https://docs.angularjs.org/api/ngRoute/directive/ngView了解更多 ngRoute 详细信息。

祝你好运!