Question

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

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

我能想到的唯一一个让我的索引页面与我的应用程序分开的方法就是在一个单独的文件夹中单独设置一个单独的静态index.html然后我所有的angularJS页面，以便我可以使用更多专注于ng-view。

这是唯一/最好的方法吗？有没有人实现过这个，或者有任何想法如何？感谢。

Answer 1

解决此问题的方法是使用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 -->

索引页面与AngularJS应用程序的其余部分分开？

1 个答案: