3

我现在正在使用 AngularJS 处理两个项目，并且我都遇到了同样的问题。

问题是我有一个看起来与任何内页完全不同的索引页，这意味着我ng-view必须包含整个页面。这使得任何时候路由发生变化，整个页面都必须重新加载，而不仅仅是主要内容区域。这会导致标题或侧边栏等内容短暂闪烁。

我能想到的让我的索引页面与我的应用程序分开的唯一好方法是从字面上有一个单独的静态index.html页面，然后我的所有 angularJS 页面都放在一个单独的文件夹中，这样我就可以使用更集中的ng-view.

这是唯一/最好的方法吗？有没有人做到这一点，或者对如何做到这一点有任何想法？谢谢。

4

1 回答 1

5

解决此问题的一种方法是使用UI-Router。

例如：

您可以拥有一个app.html包含所有应用程序视图的页面。在其中添加：

<body>
    <div ui-view></div>
</body>

以及整个应用程序所需的样式/脚本。

您的所有视图都将转到那里，包括index.html视图。

假设除索引之外的页面具有某种页眉/正文/页脚布局，其中正文根据实际页面发生变化，您可以使用如下配置：

var app = angular.module('app', [])
.config(['$stateProvider', function ($stateProvider)
{
    $stateProvider
        .state('index', {
            url: '/index',
            templateUrl: 'index.html',
            controller: 'IndexController'
        })
        .state('root', {
            templateUrl: 'root.html',
            controller: 'RootController'
        })
        .state('root.somePage', {
            url: '/some-page',
            templateUrl: 'some-page.html',
            controller: 'SomePageController'
        })
        .state('root.anotherPage', {
            url: '/another-page',
            templateUrl: 'another-page.html',
            controller: 'AnotherPageController'
        });
}

这root.html将类似于 ASP.NET Webforms 中的母版页，因此它将采用以下形式：

<!-- header markup here -->

<div ui-view></div>

<!-- footer markup here -->
于 2013-07-19T08:35:24.327 回答