gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 09:53:16 26 4
gpt4 key购买 nike

我现在正在使用 AngularJS 进行两个项目,我在这两个项目上都遇到了同样的问题。

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

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

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

最佳答案

解决这个问题的方法是使用 UI-Router .

例如:

您可以拥有一个 app.html,它是一个包含所有应用程序 View 的页面。在其中添加:

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

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

您的所有 View 都将放在那里,包括 index.html View 。

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

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

关于javascript - 索引页面与 AngularJS 应用程序的其余部分分开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17737386/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com