Question

所以我试图以角度显示多个视图，以帮助修复我正在建立的这个网站的页脚问题。我想确保我一直在阅读和试图模仿的东西是有道理的。这是我到目前为止所做的。

的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'
            }
        }
    })

我让它在我只有一个视图的地方工作，并在index.html文件中包含我的页眉和页脚，但我看到你可以有多个视图，并且真的只是用其他页面切换出“body”视图。

非常感谢任何建议。谢谢

Answer 1

要显示多个视图，您只能使用ng-include 有关更多ngInclude详细信息，请参阅https://docs.angularjs.org/api/ng/directive/ngInclude 这是一个例子:(注意单引号的换行）

<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）。
有关更多ngRoute详细信息，请参阅https://docs.angularjs.org/api/ngRoute/directive/ngView。

祝你好运！

Answer 2

您只能拥有一个ng-view。

您可以通过多种方式更改其内容：ng-include，ng-switch或通过routeProvider映射不同的控制器和模板。

或者，使用ui-router

多角度的视图

2 个答案: