Node-WebkitとAngularJSを使用してタブ付きブラウザを作成します

' '' }; }）

ここでやっていることは、Angularを使用して動的に作成できる再利用可能なテンプレートを作成することです。 iframe src属性のtrustsrc（）メソッドは、コントローラーで作成されます。

Angularでのディレクティブがどのように機能するかを説明することは、この記事の範囲を超えています。復習が必要な場合は、AngularJS指令の実用的なガイドをご覧ください。

一部のサポートサービス

Angularは、コード組織、再利用性、APIとの通信、およびそのコントローラー間のロジックの共有にサービスを使用します。私たちは自分自身のために3つを作成する必要があります：1つ（プロンプト）を使用してURL入力を取得し、他の2つ（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（AngularJSに厳密なコンテキストエスケープサービスを提供するサービス）、プロンプト、ウィンドウ（上記で作成した2つのサービス）。

最初にリソースURLを信頼する方法を作成します（指令に既に実装しています）：

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

ユーザーからURLを取得するためにプロンプ​​トサービスを使用して新しいタブを起動できるようになりました。アクティブな属性をtrueに設定して、新しいタブがフォーカスを受信するように設定します。

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

閉じるタブには、以下に示すように、アレイ＃スプライス関数を使用してタブの配列から値を削除することが含まれます。

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

コントローラーの残りの部分は、最小化、フルスクリーンの有効化/無効化、ウィンドウを閉じるための動作をコントロールに追加するために使用されます。

実装を追加しても、これらのコントロールをマークアップにまだ追加していません。それでは、今すぐ（App/Views/index.ejsで）：

$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!");
  });
};

そしてそれだけです！これで、ターミナルからのGruntコマンドを使用してブラウザを起動できます。

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

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

プラットフォーム用の建物

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

記事の冒頭に心を投げかけた場合、すべての主要なオペレーティングシステムにnw.jsアプリを展開することが可能であると述べました。 NW.JSプロジェクトページでこれを行う方法については広範な指示があります。または、Generator-Weanの事前に構成されたビルドタスクを使用できます（これを実証します）。プロジェクトルートからのGrunt Buildの実行は、上に構築されたOSのアプリを構築しますが、Grunt Build：すべてがすべてのプラットフォーム用に構築されます。コマンドGrunt Build：{Platform}（例：Grunt Build：Mac）は、特定のOSに対してビルドします。可能なオプションは、Win、OSX、Linux32、Linux64です。詳細については、Generator-Wean Readmeを参照してください
例として、64ビットのLinuxシステムを使用して実行している場合：

これにより、プロジェクトの名前に対応する実行可能ファイルを含むビルド/test/linux64ディレクトリが生成されます。
.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();
});
結論

それに伴い、NW.JSの力だけでなく、ネイティブアプリケーションを作成するWebテクノロジーの力を実証したいと思っています。ネイティブブラウザの作成方法を学ぶだけではありませんでしたが、NW.JS、Yeoman、その他のツールもプレイしていました。忘れないでください、このチュートリアルのソースコードはgithubにあります - 私はあなたがそれをダウンロードして実験することをお勧めします。
 nw.jsを使用していますか？ネイティブアプリケーションに深刻な挑戦をもたらすことができると思いますか？以下のコメントであなたの考えを聞きたいです。



ノードウェブキットと角度
に関するよくある質問（FAQ）



 node.jsとangularjsの主な違いは何ですか？
node.jsとangularjsはどちらもJavaScriptベースのテクノロジーですが、さまざまな目的に役立ちます。 Node.jsは、JavaScriptをサーバー側で実行できるランタイム環境であり、AngularJSは動的Webアプリケーションの構築に使用されるクライアント側のフレームワークです。 node.jsはスケーラブルで効率的なサーバー側アプリケーションを作成するのに最適ですが、Angularjsはリッチでインタラクティブな機能を備えたシングルページアプリケーションの作成に優れています。 🎜> node.jsとangularjsを一緒に使用して、フルスタックJavaScriptアプリケーションを作成できます。 node.jsを使用して、アプリケーションのサーバー側部分、データベース操作、ファイルI/O、ネットワーク通信などのタスクの処理を作成できます。一方、Angularjsは、アプリケーションのクライアント側部分を作成して、動的でインタラクティブなユーザーインターフェイスを提供するために使用できます。 >
Node-Webkitは、HTML、CSS、JavaScriptなどのWebテクノロジーを使用してデスクトップアプリケーションを作成できるツールです。 node.jsランタイムとChromium Webブラウザーを組み合わせて、ブラウザでNode.jsモジュールを直接使用できるようにします。これは、angularjsを使用して、通常のWebアプリケーションと同じように、ノード-Webkitアプリケーション用のユーザーインターフェイスを作成できることを意味します。
javaScriptとnode-webkitを使用してデスクトップアプリケーションを構築できますか？

はい、javascriptとnode-webkitを使用してデスクトップアプリケーションを構築できます。 Node-Webkitを使用すると、Webテクノロジーを使用してデスクトップアプリケーションを作成できます。つまり、HTMLとCSSとともにJavaScriptを使用してアプリケーションのユーザーインターフェイスを作成できます。ブラウザでnode.jsモジュールを直接使用して、ファイルI/Oやネットワーク通信などの強力な機能にアクセスできるようにすることもできます。 
AngularJSよりもnode.jsの主な利点は、データベース操作、ファイルI/O、ネットワーク通信などのサーバー側のタスクを処理する機能です。これにより、スケーラブルで効率的なサーバー側アプリケーションを作成するのに最適です。一方、node.jsを介したangularjsの主な利点は、動的でインタラクティブなユーザーインターフェイスを作成する機能であり、シングルページアプリケーションの作成に最適です。 ？
Node-Webkitを始めるには、最初にダウンロードしてインストールする必要があります。それを完了したら、package.jsonファイルとメインのHTMLファイルを作成して、新しいプロジェクトを作成できます。 Package.jsonファイルは、アプリケーションのメインHTMLファイルとその他の設定を指定するために使用されます。一方、メインのHTMLファイルはアプリケーションのユーザーインターフェイスを書き込む場所です。 ？
はい、Node-Webkitを使用して他のJavaScriptフレームワークを使用できます。 Node-Webkitを使用すると、React、vue.js、ember.jsなどのフレームワークなど、ブラウザで実行できるJavaScriptフレームワークを使用できます。これにより、アプリケーションに適したツールを選択することに関しては、多くの柔軟性が得られます。 Webテクノロジーを使用する必要があるデスクトップアプリケーション。これには、テキストエディター、音楽プレーヤー、写真編集者などのアプリケーションが含まれます。また、node.jsと統合されたおかげで、ファイルシステムまたはネットワークと対話する必要があるアプリケーションを作成するためにも使用されます。
Node-Webkitは、デスクトップアプリケーションを作成するための他のツールと比較してどのように比較されますか？ 
node-webkitは、デスクトップアプリケーションを作成するための他のツールと比較して比較します。その主な利点は、Webテクノロジーを使用する機能であるため、Web開発者がデスクトップアプリケーション開発に移行しやすくなります。また、node.jsと統合され、ファイルI/Oやネットワーク通信などの強力な機能にアクセスできます。
ノードウェブキットと角度を一緒に使用するときに直面する可能性のある課題は何ですか？
ノードウェブキットと角度を一緒に使用するときに直面する可能性のある課題は、サーバー側とクライアント間の通信を管理することです。アプリケーションの側面。フルスタックのJavaScript開発に精通していない場合、これは特に難しい場合があります。ただし、node.jsとangularjsの機能を慎重に計画し、適切に使用することで、この課題を克服できます。

以上がNode-WebkitとAngularJSを使用してタブ付きブラウザを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。