Electron Basics: Wie man eine Angular Electron App konfiguriert und ausführt

Mit Electron können Sie Desktop-Anwendungen für Windows, Mac und Linux erstellen. Wenn Sie eine App mit Electron erstellen, können Sie die App über ein Desktop-Anwendungsfenster in der Vorschau anzeigen und ausführen.

Sie können Electron verwenden, um eine Angular-App so zu konfigurieren, dass sie in einem Desktop-Fenster anstelle des üblichen Webbrowsers gestartet wird. Sie können dies über eine JavaScript-Datei in der App selbst tun.

Sobald Sie Electron konfiguriert haben, können Sie die Entwicklung wie bei einer normalen Angular-App fortsetzen. Die Hauptteile der Anwendung werden weiterhin der gleichen Standard-Angular-Struktur folgen.

So installieren Sie Electron als Teil Ihrer Anwendung

Um Electron zu verwenden, müssen Sie node.js herunterladen und installieren und npm install verwenden, um Electron zu Ihrer App hinzuzufügen.

Herunterladen und installieren node.js . Sie können bestätigen, dass Sie es richtig installiert haben, indem Sie die Version überprüfen:
```
node -v
```
Knoten enthält auch npm, der JavaScript-Paketmanager . Sie können bestätigen, dass npm installiert ist, indem Sie die npm-Version überprüfen:
```
npm -v
```
Erstellen Sie eine neue Angular-Anwendung mit der von neuen Befehl. Dadurch wird ein Ordner erstellt, der alles Notwendige enthält Dateien, die für ein Angular-Projekt benötigt werden zu arbeiten.
```
ng new electron-app
```
Verwenden Sie im Stammordner Ihrer Anwendung npm um Electron.
```
npm install --save-dev electron zu installieren
```
Dadurch wird ein neuer Ordner für Electron im Ordner node_modules der App erstellt.
Sie können Electron auch global auf Ihrem Computer installieren.
```
npm install -g electron 
```

Die Dateistruktur der Angular Electron-Anwendung

Electron benötigt eine Haupt-JavaScript-Datei, um das Desktop-Fenster zu erstellen und zu verwalten. Dieses Fenster zeigt den Inhalt Ihrer App darin an. Die JavaScript-Datei enthält auch andere Ereignisse, die auftreten können, z. B. wenn der Benutzer das Fenster schließt.

was ist der unterschied zwischen chromecast und roku

Speicherort der HTML-Datei im Projekt indexieren

Zur Laufzeit kommt der angezeigte Inhalt aus der Datei index.html. Standardmäßig finden Sie die Datei index.html in der Quelle Ordner, und zur Laufzeit wird automatisch eine erstellte Kopie davon im Ordner erstellt Abstand Mappe.

Speicherort der Haupt-App-Komponente im Ordner

Die Datei index.html sieht normalerweise so aus:

<!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>

Innerhalb des body-Tags befindet sich ein -Tag. Dadurch wird die Haupt-App-Komponente für die Angular-Anwendung angezeigt. Sie finden die Hauptkomponente der App in der quelle/app Mappe.

So verwenden Sie Electron zum Öffnen einer Angular-Anwendung in einem Desktop-Fenster

Erstellen Sie die Datei main.js und konfigurieren Sie sie so, dass der Inhalt der Anwendung in einem Desktop-Fenster geöffnet wird.

So fügen Sie eine Zeile in Word hinzu

Erstellen Sie eine Datei im Stammverzeichnis Ihres Projekts mit dem Namen main.js . Initialisieren Sie in dieser Datei Electron, damit Sie damit das Anwendungsfenster erstellen können.
```
const { app, BrowserWindow } = require('electron');
```
Erstellen Sie ein neues Desktop-Fenster mit einer bestimmten Breite und Höhe. Laden Sie die Indexdatei als Inhalt, der im Fenster angezeigt werden soll. Stellen Sie sicher, dass der Pfad zur Indexdatei mit dem Namen Ihrer App übereinstimmt. Wenn Sie Ihre App beispielsweise „elektron-app“ genannt haben, lautet der Pfad „dist/electron-app/index.html“.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Wenn die App bereit ist, rufen Sie die Funktion createWindow() auf. Dadurch wird das Anwendungsfenster für Ihre App erstellt.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
In dem src/index.html Datei, in der Base Tag ändern Sie das href-Attribut in „./“.
```
<base href="./">
```
Im Paket.json , füge hinzu ein hauptsächlich Feld und schließen Sie die Datei main.js als Wert ein. Dies ist der Einstiegspunkt für die App, sodass die Anwendung die Datei „main.js“ ausführt, wenn sie die App startet.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```
In dem .browserslistrc Datei, ändern Sie die Liste, um die iOS-Safari-Versionen 15.2-15.3 zu entfernen. Dadurch wird verhindert, dass beim Kompilieren Kompatibilitätsfehler in der Konsole angezeigt werden.
```
last 1 Chrome version 
last 1 Firefox version 
last 2 Edge major versions 
last 2 Safari major versions 
last 2 iOS major versions 
Firefox ESR 
not ios_saf 15.2-15.3 
not safari 15.2-15.3 
```

Löschen Sie den Standardinhalt in der src/app/app.component.html Datei. Ersetzen Sie es durch neuen Inhalt.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

Fügen Sie etwas Styling für den Inhalt in der hinzu 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; 
}

Fügen Sie dem ein allgemeines Styling hinzu src/styles.css Datei, um die Standardränder und -auffüllungen zu entfernen.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

So führen Sie eine Elektronenanwendung aus

Um Ihre Anwendung in einem Fenster auszuführen, konfigurieren Sie einen Befehl im Array scripts von package.json. Führen Sie dann Ihre App mit dem Befehl im Terminal aus.

Im Paket.json , fügen Sie im scripts-Array einen Befehl hinzu, um die Angular-App zu erstellen und Electron auszuführen. Stellen Sie sicher, dass Sie nach dem vorangehenden Eintrag im Scripts-Array ein Komma hinzufügen.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Um Ihre neue Angular-Anwendung in einem Desktop-Fenster auszuführen, führen Sie Folgendes in der Befehlszeile im Stammordner Ihres Projekts aus:
```
npm run electron
```
Warten Sie, bis Ihre Anwendung kompiliert ist. Nach Abschluss öffnet sich anstelle Ihrer Angular-App im Webbrowser stattdessen ein Desktop-Fenster. Das Desktop-Fenster zeigt den Inhalt Ihrer Angular-App.
Wenn Sie Ihre Anwendung weiterhin im Webbrowser anzeigen möchten, können Sie weiterhin den Befehl ng serve ausführen.
```
ng serve
```
Wenn Sie die verwenden von dienen Befehl wird der Inhalt Ihrer App weiterhin in einem Webbrowser unter angezeigt lokaler Host: 4200.

Erstellen von Desktop-Anwendungen mit Electron

Sie können Electron verwenden, um Desktop-Anwendungen unter Windows, Mac und Linux zu erstellen. Standardmäßig können Sie eine Angular-Anwendung mit einem Webbrowser über den Befehl ng serve testen. Sie können Ihre Angular-Anwendung so konfigurieren, dass sie auch in einem Desktop-Fenster statt in einem Webbrowser geöffnet wird.

Sie können dies mit einer JavaScript-Datei tun. Sie müssen auch Ihre index.html- und package.json-Dateien konfigurieren. Die Gesamtanwendung folgt weiterhin der gleichen Struktur wie eine reguläre Angular-Anwendung.

Wenn Sie mehr über das Erstellen von Desktopanwendungen erfahren möchten, können Sie auch Windows Forms-Apps erkunden. Mit Windows Forms-Apps können Sie UI-Elemente anklicken und auf eine Zeichenfläche ziehen, während Sie gleichzeitig beliebige Codierungslogik in C#-Dateien einfügen.