Search code examples
navigationwebkitnode-webkitnw.js

Partial view in nwjs application

I have the following html structure in my NW.js app 

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

I'm trying to find a way to "dynamically change" or "load from another html file" content div, when user click on a link in #nav-header. I know that in web apps this is done with ajax, but i have no idea how to do this in NW.js desktop app, and can't find any clues on how to do it.

Can someone help me with this?

Solution

  • You can do it just like you would do it on the web.. you can use ajax and call a local file, AngularJS would be an easy solution to implement.

    For example:

    project structure:

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

    Of course if you're gonna go with angular I suggest you use a router like the Angular UI Router But as you can see you can do this with just about any other technology you know that works on the web, NW.js is still chrome under the hood.