Electron låter dig bygga skrivbordsprogram för Windows, Mac och Linux. När du bygger en app med Electron kan du förhandsgranska och köra appen genom ett skrivbordsprogramfönster.

Du kan använda Electron för att konfigurera en Angular-app för att starta på ett skrivbordsfönster, istället för den vanliga webbläsaren. Du kan göra detta med en JavaScript-fil i själva appen.

När du har konfigurerat Electron kan du fortsätta utvecklingen som du skulle göra med en vanlig Angular-app. Huvuddelarna av applikationen kommer fortfarande att följa samma standard Angular struktur.

Hur man installerar Electron som en del av din applikation

För att använda Electron måste du ladda ner och installera node.js och använda npm install för att lägga till Electron i din app.

  1. Ladda ner och installera node.js. Du kan bekräfta att du har installerat det korrekt genom att kontrollera versionen:
    nod -v
    Node inkluderar också npm, JavaScript-pakethanteraren. Du kan bekräfta att du har npm installerat genom att kontrollera npm-versionen:
    npm -v
    2. instagram viewer
  2. Skapa en ny Angular-applikation med hjälp av ng ny kommando. Detta kommer att skapa en mapp som innehåller allt som behövs filer som krävs för ett Angular-projekt att jobba.
    ng ny elektron-app
  3. I rotmappen för ditt program, använd npm för att installera Electron.
    npm Installera--save-dev elektron
  4. Detta skapar en ny mapp för Electron i mappen node_modules i appen.
  5. Du kan också installera Electron globalt på din dator.
    npm Installera -g elektron

Filstrukturen för applikationen Angular Electron

Electron kommer att kräva en JavaScript-huvudfil för att skapa och hantera skrivbordsfönstret. Det här fönstret visar innehållet i din app i den. JavaScript-filen kommer också att innehålla andra händelser som kan inträffa, till exempel om användaren stänger fönstret.

Vid körning kommer innehållet som visas från filen index.html. Som standard kan du hitta filen index.html inuti src mapp, och vid körning skapas en byggd kopia av den automatiskt inuti dist mapp.

Filen index.html ser vanligtvis ut så här:

<!doctype html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="utf-8">
<titel> ElectronApp </title>
<bas href="./">
<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1">
<länk rel="ikon" typ="bild/x-ikon" href="favicon.ico">
</head>
<kropp>
<app-root></app-root>
</body>
</html>

Inuti body-taggen finns en märka. Detta kommer att visa huvudappkomponenten för Angular-applikationen. Du kan hitta den huvudsakliga appkomponenten i src/app mapp.

Hur man använder elektron för att öppna en vinkelapplikation i ett skrivbordsfönster

Skapa filen main.js och konfigurera den för att öppna programmets innehåll i ett skrivbordsfönster.

  1. Skapa en fil i roten av ditt projekt med namnet main.js. Initiera Electron i den här filen så att du kan använda den för att skapa programfönstret.
    konst { app, BrowserWindow } = behöva('elektron');
  2. Skapa ett nytt skrivbordsfönster med en viss bredd och höjd. Ladda indexfilen som innehåll som ska visas i fönstret. Se till att sökvägen till indexfilen matchar namnet på din app. Om du till exempel döpte din app till "electron-app", kommer sökvägen att vara "dist/electron-app/index.html".
    fungeraskapa fönster() {
     vinna = ny BrowserWindow({bredd: 800, höjd: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. När appen är klar, anropa createWindow()-funktionen. Detta skapar applikationsfönstret för din app.
    app.whenReady().then(() => {
     createWindow()
    })
  4. I den src/index.html fil, i bas ändrar du href-attributet till "./".
    <bas href="./">
  5. I package.json, Lägg till en huvud och inkludera filen main.js som värdet. Detta kommer att vara startpunkten för appen, så att applikationen kör filen main.js när den startar appen.
    {
    "namn": "elektron-app",
    "version": "0.0.0",
    "huvud": "main.js",
     ...
    }
  6. I den .browserslistrc fil, ändra listan för att ta bort iOS safari versionerna 15.2-15.3. Detta kommer att förhindra att kompatibilitetsfel visas i konsolen vid kompilering.
    senaste versionen av Chrome
    senaste versionen av Firefox
    senaste 2 Edge större versioner
    senaste 2 Safari större versioner
    senaste 2 iOS större versioner
    Firefox ESR
    inteios_saf 15.2-15.3
    intesafari 15.2-15.3
  7. Ta bort standardinnehållet i src/app/app.component.html fil. Ersätt det med lite nytt innehåll.
    <div klass="innehåll">
    <div klass="kort">
    <h2> Hem </h2>
    <sid>
     Välkommen till min Angular Electron-applikation!
    </s>
    </div>
    </div>
  8. Lägg till lite styling för innehållet i src/app/app.component.css fil.
    .innehåll {
     linje-höjd: 2rem;
    textstorlek: 1.2em;
     marginal: 48px 10%;
     font-family: Arial, sans-serif
    }
    .kort {
    box-skugga: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     bredd: 85%;
     stoppning: 16px 48px;
     marginal: 24px 0px;
     bakgrundsfärg: vitrök;
     teckensnittsfamilj: sans-serif;
    }
  9. Lägg till lite övergripande styling till src/styles.css fil för att ta bort standardmarginalerna och fyllningarna.
    html {
     marginal: 0;
     stoppning: 0;
    }

Hur man kör en elektronapplikation

För att köra din applikation i ett fönster, konfigurera ett kommando i skriptarrayen för package.json. Kör sedan din app med kommandot i terminalen.

  1. I package.json, inuti skriptarrayen, lägg till ett kommando för att bygga Angular-appen och köra Electron. Se till att du lägger till ett kommatecken efter den föregående posten i skriptmatrisen.
    "manus": {
     ...
    "elektron": "ng bygga && elektron."
    },
  2. För att köra din nya Angular-applikation i ett skrivbordsfönster, kör följande på kommandoraden, i rotmappen för ditt projekt:
    npm kör elektron
  3. Vänta tills din ansökan kompileras. När det är klart, istället för att din Angular-app öppnas i webbläsaren, öppnas ett skrivbordsfönster istället. Skrivbordsfönstret visar innehållet i din Angular-app.
  4. Om du fortfarande vill se din applikation i webbläsaren kan du fortfarande köra kommandot ng serve.
    ng tjäna
  5. Om du använder ng tjäna kommandot kommer innehållet i din app fortfarande att visas i en webbläsare på lokal värd: 4200.

Bygger skrivbordsapplikationer med elektron

Du kan använda Electron för att bygga skrivbordsprogram på Windows, Mac och Linux. Som standard kan du testa en Angular-applikation med en webbläsare via kommandot ng serve. Du kan konfigurera din Angular-applikation så att den också öppnas i ett skrivbordsfönster istället för en webbläsare.

Du kan göra detta med hjälp av en JavaScript-fil. Du måste också konfigurera filerna index.html och package.json. Den övergripande applikationen kommer fortfarande att följa samma struktur som en vanlig Angular-applikation.

Om du vill lära dig mer om hur du bygger skrivbordsprogram kan du också utforska Windows Forms-appar. Windows Forms-appar låter dig klicka och dra UI-element till en duk samtidigt som du lägger till eventuell kodningslogik i C#-filer.