使用Node-webkit和AngularJS创建选项卡式浏览器

' '' }; }））

我们在这里正在做的是创建一个可重复使用的模板，该模板可以使用Angular动态创建。 IFRAME SRC属性上的TrustSrc（）方法将在我们的控制器中创建。

解释指令在角度的工作方式超出了本文的范围。如果您需要刷新，请查看：AngularJS指令的实用指南。

一些支持服务

Angular使用服务用于代码组织，可重复性，与API进行通信以及其控制器之间的逻辑共享。我们需要自己制作三个：一个（提示）使用提示来获取URL输入，而其他两个（GUI和窗口）与NW.JS的GUI和窗口API进行通信，以便我们可以创建自定义最小化，全屏和关闭按钮：

.factory("prompt", function ($window, $q) {
  function prompt(message, defaultValue) {
    var defer = $q.defer();
    var response = $window.prompt(message, defaultValue);
    if (response === null) {
      defer.reject();
    } else {
      defer.resolve(response);
    }
    return (defer.promise);
  }
  return (prompt);
})
.factory('GUI', function () {
  return require('nw.gui');
})
.factory('Window', function (GUI) {
  return GUI.Window.get();
});

终于

的控制器

>如名称所致，控制器将控制应用程序中的数据流。我们将注入以下依赖项：$ scope，$ sce（提供严格的上下文逃避服务的服务），提示，窗口（我们上面创建的两个服务）。

我们将首先创建一种信任资源URL的方法（我们已经在指令中实现了）：

.controller('main', function ($scope, $sce, prompt, Window) {
  //implementation here
})

>将SitePoint制作我们的主页真是太棒了，因此我们将为我们的指令创建一系列标签，以通过SitePoint的URL作为第一个值来循环。

$scope.trustSrc = function (src) {
  return $sce.trustAsResourceUrl(src);
}

>

>现在，我们可以使用提示服务启动新选项卡，以从用户那里获取URL。我们将活动属性设置为true，以便新的选项卡接收到焦点：>

$scope.tabs = [
  {
    url: 'https://www.sitepoint.com/'
  }
];

关闭选项卡涉及使用数组＃剪接函数以从选项卡的数组中删除值：

>

$scope.newTab = function () {
  prompt("Please enter a url", "http://www.sitepoint.com")
  .then(function (url) {
    var tab = {url: url, active:true}
    $scope.tabs.push(tab);
  },
  function () {
    alert("Error opening site!");
  });
};

>控制器的其余部分用于将行为添加到最小化，启用/禁用全屏幕并关闭窗口的控件中：>

$scope.closeTab = function (index) {
  $scope.tabs.splice(index, 1);
};

>即使我们添加了实现，我们尚未将这些控件添加到标记中。因此，让我们现在这样做（在App/views/index.ejs中）：

>

$scope.minimize = function () {
  Window.minimize();
};
$scope.toggleKioskMode = function () {
  Window.toggleKioskMode();
};
$scope.close = function () {
  Window.close();
};

就是这样！现在，您可以使用终端中的grunt命令启动浏览器。

>

<span><span><span><div</span> class<span>="controls"</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-plus"</span> tooltip-placement<span>="bottom"</span>
</span></span><span>   <span>uib-tooltip<span>="New tab"</span> ng-click<span>="newTab()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-minus"</span> ng-click<span>="minimize()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-square-o"</span> ng-click<span>="toggleKioskMode()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-times"</span> ng-click<span>="close()"</span>></span><span><span></i</span>></span>
</span><span><span><span><div</span>></span>
</span>

平台

>如果您将思想重新回到文章的开始，我提到可以在所有主要操作系统上部署NW.JS应用程序。关于如何在NW.JS项目页面上执行此操作的大量说明，或者您可以使用Generator Wean的预配置构建任务（我现在将证明）。

>从项目root运行grunt构建将为其构建的操作系统构建应用程序，而Grunt Build：所有这些都将为所有平台构建。命令grunt构建：{Platform}（例如Grunt Build：Mac）将为特定的操作系统构建。可能的选项是Win，OSX，Linux32，Linux64。有关更多信息，请参阅发电机 - wean readme。

>以示例为例，如果您在64位Linux系统上并运行：>

.factory("prompt", function ($window, $q) {
  function prompt(message, defaultValue) {
    var defer = $q.defer();
    var response = $window.prompt(message, defaultValue);
    if (response === null) {
      defer.reject();
    } else {
      defer.resolve(response);
    }
    return (defer.promise);
  }
  return (prompt);
})
.factory('GUI', function () {
  return require('nw.gui');
})
.factory('Window', function (GUI) {
  return GUI.Window.get();
});

这将生成一个构建/test/linux64目录，该目录包含一个可执行文件，与您的项目名称相对应。

结论

我希望不仅展示了NW.JS的力量，还可以证明Web技术在制作本机应用程序中的力量。我们不仅学习了如何制作本地浏览器，而且还看到了NW.JS，Yeoman和其他工具。别忘了，本教程的源代码在GitHub上 - 我鼓励您下载并进行实验。

您是否正在使用NW.JS？您认为它可以对本地应用带来严重的挑战吗？我很想在下面的评论中听到您的想法。

>

经常询问的问题（常见问题解答）有关节点 - webkit和angularjs

>

node.js和angularjs之间的主要区别是基于JavaScript的技术，但它们的目的不同。 Node.js是一个运行时环境，允许JavaScript在服务器端运行，而AngularJS是用于构建动态Web应用程序的客户端框架。 Node.js是创建可扩展和高效的服务器端应用程序的理想选择，而AngularJS擅长创建具有丰富的，交互式功能的单页应用程序。

>我如何使用angularJs的node.js？ 🎜> node.js和angularjs可以一起使用以创建一个全栈JavaScript应用程序。 Node.js可用于创建应用程序的服务器端部分，处理数据库操作，文件I/O和网络通信等任务。另一方面，AngularJS可用于创建应用程序的客户端部分，提供动态和交互式用户界面。

>

> node-webkit是什么，它与angularJS有何关系？ >

> node-webkit是一种工具，它允许您使用HTML，CSS和JavaScript等Web技术创建桌面应用程序。它将Node.js运行时与Chromium Web浏览器相结合，使您可以直接在浏览器中使用node.js模块。这意味着您可以使用AngularJS为您的Node-Webkit应用程序创建用户界面，就像您对常规Web应用程序一样。

>我可以使用JavaScript和Node-webkit？

构建桌面应用程序，是的，您可以使用JavaScript和Node-webkit构建桌面应用程序。 Node-Webkit允许您使用Web Technologies创建桌面应用程序，这意味着您可以将JavaScript与HTML和CSS一起使用，以创建为应用程序的用户界面。您还可以直接在浏览器中使用node.js模块，使您可以访问功能强大的功能，例如文件i/o和网络通信。

使用node.js而不是angularjs，而vice vice则有什么优点？

>我如何从Node-webkit开始？

要开始使用Node-webkit，您首先需要下载并安装它。完成此操作后，您可以通过创建一个package.json文件和主HTML文件来创建一个新项目。 package.json文件用于指定您的应用程序的主HTML文件和其他设置，而主HTML文件是您编写应用程序的用户界面的位置。

>我可以使用其他JavaScript框架与Node-webkits使用其他JavaScript框架。是的，是的，您可以使用其他JavaScript框架使用Node-Webkit。 Node-webkit允许您使用任何可以在浏览器中运行的JavaScript框架，包括React，Vue.js和Ember.js等框架。在为应用程序选择正确的工具时，这给您带来了很大的灵活性。

> node-webkit的一些常见用例？需要使用Web技术的桌面应用程序。这包括文本编辑，音乐播放器和照片编辑等应用程序。它还用于创建需要与文件系统或网络进行交互的应用程序，这要归功于它与Node.js.

>进行集成，而Node-webkit与其他用于创建桌面应用程序的工具相比如何？

> Node-webkit 。

>当将Node-webkit和AngularJ一起使用时，我可能会面临哪些挑战？

>当使用node-webkit和angularjs一起管理服务器端和客户端之间的通信 - 应用程序的侧面部分。如果您不熟悉全栈JavaScript开发，这可能会特别棘手。但是，通过仔细的计划和良好的node.js和angularjs的功能，您可以克服这一挑战。

>

以上是使用Node-webkit和AngularJS创建选项卡式浏览器的详细内容。更多信息请关注PHP中文网其他相关文章！