Electron lar deg bygge skrivebordsapplikasjoner for Windows, Mac og Linux. Når du bygger en app ved hjelp av Electron, kan du forhåndsvise og kjøre appen gjennom et skrivebordsprogramvindu.

Du kan bruke Electron til å konfigurere en Angular-app til å starte på et skrivebordsvindu, i stedet for den vanlige nettleseren. Du kan gjøre dette ved å bruke en JavaScript-fil i selve appen.

Når du har konfigurert Electron, kan du fortsette utviklingen som du ville gjort på en vanlig Angular-app. Hoveddelene av applikasjonen vil fortsatt følge den samme standard vinkelstrukturen.

Slik installerer du elektron som en del av applikasjonen din

For å bruke Electron må du laste ned og installere node.js, og bruke npm install for å legge til Electron i appen din.

  1. Last ned og installer node.js. Du kan bekrefte at du har installert den riktig ved å sjekke versjonen:
    node -v
    Node inkluderer også npm, JavaScript-pakkebehandleren. Du kan bekrefte at du har npm installert ved å sjekke npm-versjonen:
    npm -v
  2. Opprett en ny Angular-applikasjon ved å bruke
    instagram viewer
    ng nytt kommando. Dette vil opprette en mappe som inneholder alt nødvendig filer som kreves for et Angular-prosjekt å jobbe.
    ng ny elektron-app
  3. I rotmappen til programmet bruker du npm for å installere Electron.
    npm installere--save-dev elektron
  4. Dette vil opprette en ny mappe for Electron i node_modules-mappen i appen.
  5. Du kan også installere Electron globalt på datamaskinen din.
    npm installere -g elektron

Filstrukturen til Angular Electron Application

Electron vil kreve en JavaScript-hovedfil for å opprette og administrere skrivebordsvinduet. Dette vinduet viser innholdet i appen din i det. JavaScript-filen vil også inneholde andre hendelser som kan oppstå, for eksempel hvis brukeren lukker vinduet.

Ved kjøring vil innholdet som vises komme fra index.html-filen. Som standard kan du finne filen index.html inne i src mappen, og ved kjøretid opprettes en bygget kopi av den automatisk inne i dist mappe.

index.html-filen ser vanligvis slik ut:

<!doctype html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel> ElectronApp </title>
<base href="./">
<metanavn="viewport" innhold="width=enhetsbredde, initial-skala=1">
<link rel="ikon" type="bilde/x-ikon" href="favicon.ico">
</head>
<kropp>
<app-root></app-root>
</body>
</html>

Inne i body tag er en stikkord. Dette vil vise hovedappkomponenten for Angular-applikasjonen. Du finner hovedappkomponenten i src/app mappe.

Hvordan bruke elektron til å åpne en vinkelapplikasjon i et skrivebordsvindu

Opprett main.js-filen, og konfigurer den til å åpne programmets innhold i et skrivebordsvindu.

  1. Opprett en fil i roten til prosjektet med navnet main.js. I denne filen initialiserer du Electron slik at du kan bruke den til å lage programvinduet.
    konst { app, BrowserWindow } = krever('elektron');
  2. Opprett et nytt skrivebordsvindu med en viss bredde og høyde. Last inn indeksfilen som innholdet som skal vises i vinduet. Sørg for at banen til indeksfilen samsvarer med navnet på appen din. Hvis du for eksempel kalte appen din "electron-app", vil banen være "dist/electron-app/index.html".
    funksjonopprette vindu() {
     vinne = ny BrowserWindow({bredde: 800, høyde: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Når appen er klar, kall opp createWindow()-funksjonen. Dette vil opprette programvinduet for appen din.
    app.whenReady().then(() => {
     createWindow()
    })
  4. I src/index.html fil, i utgangspunkt endre href-attributtet til "./".
    <base href="./">
  5. I package.json, Legg til en hoved- og inkludere main.js-filen som verdien. Dette vil være inngangspunktet for appen, slik at applikasjonen kjører main.js-filen når den starter appen.
    {
    "Navn": "elektron-app",
    "versjon": "0.0.0",
    "hoved-": "main.js",
     ...
    }
  6. I .browserslistrc fil, endre listen for å fjerne iOS safari versjoner 15.2-15.3. Dette vil forhindre at kompatibilitetsfeil vises i konsollen under kompilering.
    siste 1 Chrome-versjon
    siste 1 Firefox-versjon
    siste 2 Edge hovedversjoner
    siste 2 Safari hovedversjoner
    siste 2 iOS hovedversjoner
    Firefox ESR
    ikkeios_saf 15.2-15.3
    ikkesafari 15.2-15.3
  7. Slett standardinnholdet i src/app/app.component.html fil. Erstatt den med noe nytt innhold.
    <div klasse="innhold">
    <div klasse="kort">
    <h2> Hjem </h2>
    <s>
     Velkommen til min Angular Electron-applikasjon!
    </s>
    </div>
    </div>
  8. Legg til litt styling for innholdet i src/app/app.component.css fil.
    .innhold {
     linje-høyde: 2rem;
    skriftstørrelse: 1.2em;
     margin: 48px 10%;
     font-familie: Arial, sans-serif
    }
    .kort {
    boks-skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     bredde: 85 %;
     polstring: 16px 48px;
     margin: 24px 0px;
     bakgrunnsfarge: whitesmoke;
     font-familie: sans-serif;
    }
  9. Legg til litt generell styling til src/styles.css fil for å fjerne standardmarginer og fyllinger.
    html {
     margin: 0;
     polstring: 0;
    }

Hvordan kjøre en elektronapplikasjon

For å kjøre programmet i et vindu, konfigurer en kommando i skriptarrayen til package.json. Kjør deretter appen din ved å bruke kommandoen i terminalen.

  1. I package.json, inne i skriptarrayen, legg til en kommando for å bygge Angular-appen og kjøre Electron. Pass på at du legger til et komma etter den foregående oppføringen i Scripts-matrisen.
    "skript": {
     ...
    "elektron": "ng bygge && elektron."
    },
  2. For å kjøre den nye Angular-applikasjonen i et skrivebordsvindu, kjør følgende på kommandolinjen, i rotmappen til prosjektet:
    npm kjøre elektron
  3. Vent til søknaden din skal kompileres. Når den er fullført, vil et skrivebordsvindu åpnes i stedet for at Angular-appen din åpnes i nettleseren. Skrivebordsvinduet vil vise innholdet i Angular-appen din.
  4. Hvis du fortsatt vil se applikasjonen din i nettleseren, kan du fortsatt kjøre kommandoen ng serve.
    ng tjene
  5. Hvis du bruker ng tjene kommandoen, vil innholdet i appen din fortsatt vises i en nettleser på lokal vert: 4200.

Bygge skrivebordsapplikasjoner med elektron

Du kan bruke Electron til å bygge skrivebordsapplikasjoner på Windows, Mac og Linux. Som standard kan du teste en Angular-applikasjon ved å bruke en nettleser via kommandoen ng serve. Du kan konfigurere Angular-applikasjonen til også å åpne i et skrivebordsvindu i stedet for en nettleser.

Du kan gjøre dette ved å bruke en JavaScript-fil. Du må også konfigurere filene index.html og package.json. Den generelle applikasjonen vil fortsatt følge samme struktur som en vanlig Angular-applikasjon.

Hvis du vil lære mer om hvordan du bygger skrivebordsapplikasjoner, kan du også utforske Windows Forms-apper. Windows Forms-apper lar deg klikke og dra UI-elementer til et lerret samtidig som du legger til kodingslogikk i C#-filer.