使用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中文網其他相關文章！