nwjs 应用程序中的部分视图

Question

我的 NW.js 应用中有以下 html 结构

<div id="nav-header">
    <!-- bunch of links -->
</div>
<div id="content"></div>
<div id="footer"></div>

当用户单击 #nav-header 中的 link 时，我正在尝试找到一种方法来 "dynamically change" 或 "load from another html file" 内容 div。我知道在网络应用程序中，这是通过 ajax 完成的，但我不知道如何在 NW.js 桌面应用程序中执行此操作，也找不到有关如何执行此操作的任何线索。

有人可以帮我解决这个问题吗？

Answer 1

您可以像在网络上那样操作.. 您可以使用 ajax 并调用本地文件，AngularJS 将是一个易于实施的解决方案。

例如：

项目结构：

package.json

index.html

page1.html

index.html

<html ng-app>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
</head>
<body ng-init="page = 'page1.html'"> <!-- Default page -->
    <div id="nav-header">
    <nav>
        <a ng-click="page = 'page1.html'">Link 1</a>
        <a ng-click="page = 'page2.html'">Link 2</a>
        <a ng-click="page = 'page3.html'">Link 3</a>
    </nav>
    </div>
    <div id="content" ng-include="page"></div>
    <div id="footer"></div>
</body>
</html>

page1.html

<div>Hello World</div>

当然，如果您要使用 angular，我建议您使用像 Angular UI Router 这样的路由器但正如您所见，您可以使用任何您知道的可在网络上运行的其他技术来做到这一点，NW.js 仍然是 chrome。

nwjs 应用程序中的部分视图

Partial view in nwjs application

navigation

webkit

node-webkit

nw.js