Electron の基本: Angular Electron アプリを構成して実行する方法

Electron を使用すると、Windows、Mac、および Linux 用のデスクトップアプリケーションを構築できます。 Electron を使用してアプリをビルドすると、デスクトップアプリケーションウィンドウからアプリをプレビューして実行できます。

viziotvにアプリを追加する方法

Electron を使用して、通常の Web ブラウザーではなく、デスクトップウィンドウで起動するように Angular アプリを構成できます。これは、アプリ内の JavaScript ファイルを使用して行うことができます。

Electron を設定したら、通常の Angular アプリと同じように開発を続けることができます。アプリケーションの主要部分は、同じ標準的な Angular 構造に従います。

アプリケーションの一部として Electron をインストールする方法

Electron を使用するには、node.js をダウンロードしてインストールし、npm install を使用して Electron をアプリに追加する必要があります。

ダウンロードとインストール node.js .バージョン:

node -v を確認することで、正しくインストールされていることを確認できます。

ノードも含まれています npm、JavaScript パッケージマネージャー . npm バージョン:

npm -v を確認することで、npm がインストールされていることを確認できます。

を使用して新しい Angular アプリケーションを作成します。 新しいの 指図。これにより、必要なすべてを含むフォルダーが作成されます Angular プロジェクトに必要なファイル働く.
```
ng new electron-app
```
アプリケーションのルートフォルダーで、次を使用します。 npm Electron.
```
npm install --save-dev electronをインストールします
```
これにより、アプリの node_modules フォルダーに Electron の新しいフォルダーが作成されます。
また、Electron をコンピューターにグローバルにインストールすることもできます。

Angular Electron アプリケーションのファイル構造

Electron は、デスクトップウィンドウを作成および管理するために、メインの JavaScript ファイルを必要とします。このウィンドウには、アプリのコンテンツが表示されます。 JavaScript ファイルには、ユーザーがウィンドウを閉じた場合など、発生する可能性のある他のイベントも含まれます。

あなたの家の隠しカメラを検出する方法

実行時に、表示されるコンテンツは index.html ファイルから取得されます。デフォルトでは、index.html ファイルは ソース フォルダーに格納され、実行時にビルドされたコピーがフォルダー内に自動的に作成されます。距離フォルダ。

通常、index.html ファイルは次のようになります。

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

body タグ内にはタグがあります。これにより、Angular アプリケーションのメインアプリコンポーネントが表示されます。アプリのメインコンポーネントは、 ソース/アプリ フォルダ。

Electron を使用してデスクトップウィンドウで Angular アプリケーションを開く方法

main.js ファイルを作成し、デスクトップウィンドウ内でアプリケーションのコンテンツを開くように構成します。

という名前のプロジェクトのルートにファイルを作成します main.js .このファイルで、Electron を初期化して、それを使用してアプリケーションウィンドウを作成できるようにします。
特定の幅と高さの新しいデスクトップウィンドウを作成します。インデックスファイルをコンテンツとして読み込み、ウィンドウに表示します。インデックスファイルへのパスがアプリの名前と一致していることを確認してください。たとえば、アプリに「electron-app」という名前を付けた場合、パスは「dist/electron-app/index.html」になります。
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```

アプリの準備ができたら、createWindow() 関数を呼び出します。これにより、app.

app.whenReady().then(() => { 
  createWindow() 
}) のアプリケーション ウィンドウが作成されます。

の中に src/index.html ファイルの ベース タグで、href 属性を「./」に変更します。
```
<base href="./">
```
の パッケージ.json 、追加主要フィールドに入力し、main.js ファイルを値として含めます。これがアプリのエントリポイントになるため、アプリケーションはアプリを起動するときに main.js ファイルを実行します。
の中に .browserslistrc ファイルで、リストを変更して iOS Safari バージョン 15.2 ～ 15.3 を削除します。これにより、コンパイル時に互換性エラーがコンソールに表示されなくなります。
のデフォルトコンテンツを削除します。 src/app/app.component.html ファイル。新しいコンテンツに置き換えてください。

のコンテンツにスタイルを追加します。 src/app/app.component.css file.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

全体的なスタイリングを src/styles.css デフォルトのマージンとパディングを削除するファイル.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Electron アプリケーションの実行方法

アプリケーションをウィンドウで実行するには、package.json のスクリプト配列でコマンドを構成します。次に、ターミナルでコマンドを使用してアプリを実行します。

の パッケージ.json スクリプト配列内に、Angular アプリをビルドして Electron を実行するコマンドを追加します。 Scripts 配列の前のエントリの後に必ずカンマを追加してください。
デスクトップウィンドウで新しい Angular アプリケーションを実行するには、プロジェクトのルートフォルダーで、コマンドラインで次のコマンドを実行します。
アプリケーションがコンパイルされるまで待ちます。完了すると、Angular アプリが Web ブラウザーで開く代わりに、デスクトップウィンドウが開きます。デスクトップウィンドウに Angular アプリのコンテンツが表示されます。
Web ブラウザーでアプリケーションを表示したい場合でも、ng serve コマンドを実行できます。
を使用している場合 サーブの コマンドを実行しても、アプリのコンテンツは引き続き Web ブラウザーに表示されます。 ローカルホスト:4200。

Electron を使用したデスクトップアプリケーションの構築

Electron を使用して、Windows、Mac、および Linux でデスクトップアプリケーションを構築できます。デフォルトでは、ng serve コマンドを介して Web ブラウザーを使用して Angular アプリケーションをテストできます。 Web ブラウザーの代わりにデスクトップウィンドウで開くように Angular アプリケーションを構成することもできます。

すべてのps4ゲームはps5と互換性があります

これは、JavaScript ファイルを使用して行うことができます。また、index.html および package.json ファイルを構成する必要があります。アプリケーション全体は、通常の Angular アプリケーションと同じ構造に従います。

デスクトップアプリケーションの構築方法について詳しく知りたい場合は、Windows フォームアプリを調べることもできます。 Windows フォームアプリを使用すると、UI 要素をクリックしてキャンバスにドラッグしながら、コーディングロジックを C# ファイルに追加することもできます。

アプリケーションの一部として Electron をインストールする方法

Angular Electron アプリケーションのファイル構造

Electron を使用してデスクトップ ウィンドウで Angular アプリケーションを開く方法

Electron アプリケーションの実行方法

Electron を使用したデスクトップ アプリケーションの構築

Electron を使用してデスクトップウィンドウで Angular アプリケーションを開く方法

Electron を使用したデスクトップアプリケーションの構築