'
''
};
}）
ここでやっていることは、Angularを使用して動的に作成できる再利用可能なテンプレートを作成することです。 iframe src属性のtrustsrc（）メソッドは、コントローラーで作成されます。
Angularでのディレクティブがどのように機能するかを説明することは、この記事の範囲を超えています。復習が必要な場合は、AngularJS指令の実用的なガイドをご覧ください。一部のサポートサービス
最後にコントローラー
.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();
});
最初にリソースURLを信頼する方法を作成します（指令に既に実装しています）：
.controller('main', function ($scope, $sce, prompt, Window) {
//implementation here
})
$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();
};
<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の事前に構成されたビルドタスクを使用できます（これを実証します）。プロジェクトルートからの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にあります - 私はあなたがそれをダウンロードして実験することをお勧めします。
に関するよくある質問（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は、アプリケーションのクライアント側部分を作成して、動的でインタラクティブなユーザーインターフェイスを提供するために使用できます。 >はい、javascriptとnode-webkitを使用してデスクトップアプリケーションを構築できます。 Node-Webkitを使用すると、Webテクノロジーを使用してデスクトップアプリケーションを作成できます。つまり、HTMLとCSSとともにJavaScriptを使用してアプリケーションのユーザーインターフェイスを作成できます。ブラウザでnode.jsモジュールを直接使用して、ファイルI/Oやネットワーク通信などの強力な機能にアクセスできるようにすることもできます。
Node-Webkitを始めるには、最初にダウンロードしてインストールする必要があります。それを完了したら、package.jsonファイルとメインのHTMLファイルを作成して、新しいプロジェクトを作成できます。 Package.jsonファイルは、アプリケーションのメインHTMLファイルとその他の設定を指定するために使用されます。一方、メインのHTMLファイルはアプリケーションのユーザーインターフェイスを書き込む場所です。 ？
Node-Webkitは、デスクトップアプリケーションを作成するための他のツールと比較してどのように比較されますか？
node-webkitは、デスクトップアプリケーションを作成するための他のツールと比較して比較します。その主な利点は、Webテクノロジーを使用する機能であるため、Web開発者がデスクトップアプリケーション開発に移行しやすくなります。また、node.jsと統合され、ファイルI/Oやネットワーク通信などの強力な機能にアクセスできます。ノードウェブキットと角度を一緒に使用するときに直面する可能性のある課題は、サーバー側とクライアント間の通信を管理することです。アプリケーションの側面。フルスタックのJavaScript開発に精通していない場合、これは特に難しい場合があります。ただし、node.jsとangularjsの機能を慎重に計画し、適切に使用することで、この課題を克服できます。
以上がNode-WebkitとAngularJSを使用してタブ付きブラウザを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
