2016-03-22 3 views
1

У меня есть следующий HTML-структуру в моем NW.js приложениеЧастичный вид на nwjs приложения

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

Я пытаюсь найти способ «динамически изменять» или «груз из другого HTML-файла» содержание сНу , когда пользователь нажимает на ссылку в #nav-header. Я знаю, что в веб-приложениях это делается с помощью ajax, но я не знаю, как это сделать в настольном приложении NW.js, и не может найти никаких подсказок о том, как это сделать.

Может кто-нибудь помочь мне с этим?

ответ

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 UI Router Но как вы можете видеть вы можете сделать это с помощью любой другой технологии, которую вы знаете, которая работает в Интернете, NW.js по-прежнему хром под капотом.

Смежные вопросы