Javascript 具有角度的多视图

因此，我试图以角度显示多个视图，以帮助修复我正在构建的网站的页脚问题。我想确保我所读到的和试图模仿的东西是有意义的。这就是我目前所拥有的

index.html

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

我只使用了一个视图，并且在index.html文件中有我的页眉和页脚，但是我发现你可以有多个视图，并且只需切换到其他页面的“body”视图

---

任何建议都将不胜感激。谢谢

您只需一个

ng视图

您可以通过多种方式更改其内容：

ng include

、

ng switch

或通过routeProvider映射不同的控制器和模板

---

或者，使用

显示多个视图，您只能使用ng include。
有关更多详细信息，请参阅。
下面是一个例子：（注意单引号中的换行符）

使用ngRoute和ng view定义一个区域（例如div#content），在该区域中动态内容（作为部分html）将被更改。
有关详细信息，请参阅

---

祝你好运

您希望使用ui路由器，而不是ng路由。我认为ng route不支持多个ng视图啊，好吧，很酷，我会再次将原始文件推送到github，以确保我有一个备份副本，并将所有路由更改为使用$stateprovider。我真的需要了解ngRoute和ui路由器之间的区别，这样我才能更好地决定从现在开始我要如何构建。当我让它工作时，我一定会更新它，以帮助其他新手。ui router的优点是，你可以在视图中嵌入视图，在视图中嵌入视图等。单引号是指向页面的路由，就像你在主文件夹中有视图一样，或者在我的情况下，我在那里插入模板的路由，就像我的情况一样确切地说是

，ng include按相对路径查找。此外，ng include不“获取资源”，因此可能受到浏览器的CORS策略的限制。

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

<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>