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 folgen weiterhin der gleichen Standard-Angular-Struktur.

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.

  1. Herunterladen und installieren node.js. Sie können bestätigen, dass Sie es richtig installiert haben, indem Sie die Version überprüfen:
    Knoten -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
  2. Erstellen Sie eine neue Angular-Anwendung mit der neu Befehl. Dadurch wird ein Ordner erstellt, der alles Notwendige enthält Dateien, die für ein Angular-Projekt benötigt werden arbeiten.
    ng Neu Elektron-App
  3. Verwenden Sie im Stammordner Ihrer Anwendung npm Elektron installieren.
    npm Installieren--save-dev Elektron
  4. Dadurch wird ein neuer Ordner für Electron im Ordner node_modules der App erstellt.
  5. Sie können Electron auch global auf Ihrem Computer installieren.
    npm Installieren -g Elektron

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.

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.

Die Datei index.html sieht normalerweise so aus:

<!doctype html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel> ElectronApp </title>
<basis href="./">
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1">
<link rel="Symbol" Typ="Bild/x-Symbol" href="favicon.ico">
</head>
<Karosserie>
<App-Root></app-root>
</body>
</html>

Innerhalb des Body-Tags befindet sich eine Schild. 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.

  1. 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.
    konst { App, Browserfenster } = benötigen('Elektron');
  2. 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“.
    FunktioncreateWindow() {
     gewinnen = Neu Browser Fenster({Breite: 800, Höhe: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Wenn die App bereit ist, rufen Sie die Funktion createWindow() auf. Dadurch wird das Anwendungsfenster für Ihre App erstellt.
    app.whenReady().then(() => {
     createWindow()
    })
  4. In dem src/index.html Datei, in der Base -Tag ändern Sie das href-Attribut in „./“.
    <basis href="./">
  5. 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": "Elektron-App",
    "Ausführung": "0.0.0",
    "hauptsächlich": "main.js",
     ...
    }
  6. 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.
    letzte 1 Chrome-Version
    letzte 1 Firefox-Version
    letzten 2 Edge-Hauptversionen
    letzten 2 Hauptversionen von Safari
    letzten 2 iOS-Hauptversionen
    Firefox-ESR
    nichtios_saf 15.2-15.3
    nichtSafari 15.2-15.3
  7. Löschen Sie den Standardinhalt in der src/app/app.component.html Datei. Ersetzen Sie es durch neue Inhalte.
    <div-Klasse="Inhalt">
    <div-Klasse="Karte">
    <h2> Heim </h2>
    <p>
     Willkommen zu meiner Angular Electron-Anwendung!
    </p>
    </div>
    </div>
  8. Fügen Sie etwas Styling für den Inhalt in der hinzu src/app/app.component.css Datei.
    .Inhalt {
     Zeilenhöhe: 2rem;
    Schriftgröße: 1.2em;
     Rand: 48px 10%;
     Schriftfamilie: Arial, serifenlos
    }
    .Karte {
    Box Schatten: 0 4px 8px 0 RGB(0, 0, 0, 0.2);
     Breite: 85 %;
     Polsterung: 16px 48px;
     Rand: 24px 0px;
     Hintergrundfarbe: whitesmoke;
     Schriftfamilie: serifenlos;
    }
  9. Fügen Sie dem ein allgemeines Styling hinzu src/styles.css Datei, um die Standardränder und -auffüllungen zu entfernen.
    html {
     Rand: 0;
     Polsterung: 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.

  1. 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 vorhergehenden Eintrag im Scripts-Array ein Komma einfügen.
    "Skripte": {
     ...
    "Elektron": "ng bauen && Elektron ."
    },
  2. Um Ihre neue Angular-Anwendung in einem Desktop-Fenster auszuführen, führen Sie Folgendes in der Befehlszeile im Stammordner Ihres Projekts aus:
    npm laufen Elektron
  3. 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.
  4. Wenn Sie Ihre Anwendung weiterhin im Webbrowser anzeigen möchten, können Sie weiterhin den Befehl ng serve ausführen.
    ng dienen
  5. Wenn Sie die verwenden ng 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.