Electron vám umožňuje vytvářet desktopové aplikace pro Windows, Mac a Linux. Když vytváříte aplikaci pomocí Electronu, můžete si prohlédnout a spustit aplikaci prostřednictvím okna desktopové aplikace.

Electron můžete použít ke konfiguraci aplikace Angular tak, aby se spouštěla ​​v okně plochy, místo obvyklého webového prohlížeče. Můžete to provést pomocí souboru JavaScript v samotné aplikaci.

Jakmile nakonfigurujete Electron, můžete pokračovat ve vývoji jako u běžné aplikace Angular. Hlavní části aplikace budou mít stále stejnou standardní Angular strukturu.

Jak nainstalovat Electron jako součást vaší aplikace

Chcete-li používat Electron, musíte si stáhnout a nainstalovat node.js a pomocí npm install přidat Electron do své aplikace.

  1. Stáhnout a nainstalovat node.js. Správnou instalaci můžete potvrdit kontrolou verze:
    uzel -v
    Node také zahrnuje npm, správce balíčků JavaScript. Můžete potvrdit, že máte nainstalovaný npm, zkontrolováním verze npm:
    npm -v
  2. Vytvořte novou aplikaci Angular pomocí ng nové
    instagram viewer
    příkaz. Tím se vytvoří složka, která obsahuje vše potřebné soubory požadované pro projekt Angular pracovat.
    ng Nový elektronová aplikace
  3. V kořenové složce vaší aplikace použijte npm k instalaci Electronu.
    npm Nainstalujte--save-dev elektron
  4. Tím se vytvoří nová složka pro Electron ve složce node_modules aplikace.
  5. Electron si také můžete nainstalovat globálně na svůj počítač.
    npm Nainstalujte -g elektron

Souborová struktura aplikace Angular Electron

Electron bude vyžadovat hlavní soubor JavaScript pro vytvoření a správu okna plochy. V tomto okně se zobrazí obsah vaší aplikace. Soubor JavaScript bude obsahovat také další události, které mohou nastat, například když uživatel zavře okno.

Za běhu bude zobrazený obsah pocházet ze souboru index.html. Ve výchozím nastavení najdete soubor index.html uvnitř src složky a za běhu se automaticky vytvoří její vestavěná kopie uvnitř dist složku.

Soubor index.html obvykle vypadá takto:

<!doctype html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul> ElectronApp </title>
<základní href="./">
<meta jméno="výřez" obsah ="width=device-width, initial-scale=1">
<odkaz rel="ikona" typ="obrázek/ikona x" href="favicon.ico">
</head>
<tělo>
<kořen aplikace></app-root>
</body>
</html>

Uvnitř značky těla je štítek. Tím se zobrazí hlavní komponenta aplikace pro aplikaci Angular. Hlavní komponentu aplikace najdete v src/app složku.

Jak používat elektron k otevření úhlové aplikace v okně plochy

Vytvořte soubor main.js a nakonfigurujte jej tak, aby otevíral obsah aplikace v okně plochy.

  1. Vytvořte soubor v kořenovém adresáři projektu s názvem main.js. V tomto souboru inicializujte Electron, abyste jej mohli použít k vytvoření okna aplikace.
    konst { app, BrowserWindow } = vyžadovat('elektron');
  2. Vytvořte nové okno plochy určité šířky a výšky. Načtěte soubor indexu jako obsah, který se má zobrazit v okně. Ujistěte se, že cesta k indexovému souboru odpovídá názvu vaší aplikace. Pokud jste například aplikaci pojmenovali „electron-app“, cesta bude „dist/electron-app/index.html“.
    funkcecreateWindow() {
     vyhrát = Nový Okno prohlížeče ({šířka: 800, výška: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Když je aplikace připravena, zavolejte funkci createWindow(). Tím se vytvoří okno aplikace pro vaši aplikaci.
    app.whenReady().then(() => {
     createWindow()
    })
  4. V src/index.html souboru, v základna tag, změňte atribut href na "./".
    <základní href="./">
  5. v package.json, přidat hlavní a jako hodnotu zahrňte soubor main.js. Toto bude vstupní bod pro aplikaci, takže aplikace spustí soubor main.js při spouštění aplikace.
    {
    "název": "elektronová aplikace",
    "verze": "0.0.0",
    "hlavní": "main.js",
     ...
    }
  6. V .browserslistrc soubor, upravte seznam a odeberte iOS safari verze 15.2-15.3. Tím zabráníte zobrazení chyb kompatibility v konzole při kompilaci.
    poslední 1 verze Chrome
    poslední 1 verze Firefoxu
    poslední 2 hlavní verze Edge
    poslední 2 hlavní verze Safari
    poslední 2 hlavní verze iOS
    Firefox ESR
    neios_saf 15.2-15.3
    nesafari 15.2-15.3
  7. Odstraňte výchozí obsah v src/app/app.component.html soubor. Nahraďte jej nějakým novým obsahem.
    <třída div="obsah">
    <třída div="Kartu">
    <h2> Domov </h2>
    <p>
     Vítejte v mé aplikaci Angular Electron!
    </str>
    </div>
    </div>
  8. Přidejte nějaký styl pro obsah v src/app/app.component.css soubor.
    .obsah {
     výška čáry: 2rem;
    velikost písma: 10,2 em;
     okraj: 48px 10%;
     rodina písem: Arial, bezpatkové
    }
    .Kartu {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     šířka: 85 %;
     odsazení: 16px 48px;
     okraj: 24px 0px;
     barva pozadí: whitesmoke;
     font-family: sans-serif;
    }
  9. Přidejte trochu celkového stylu src/styles.css soubor k odstranění výchozích okrajů a odsazení.
    html {
     okraj: 0;
     výplň: 0;
    }

Jak spustit aplikaci Electron

Chcete-li spustit aplikaci v okně, nakonfigurujte příkaz v poli skriptů v souboru package.json. Poté spusťte aplikaci pomocí příkazu v terminálu.

  1. v package.json, do pole skriptů přidejte příkaz pro vytvoření aplikace Angular a spusťte Electron. Ujistěte se, že jste za předchozí položku v poli Scripts přidali čárku.
    "skripty": {
     ...
    "elektron": "ng stavět && elektron ."
    },
  2. Chcete-li spustit svou novou aplikaci Angular v okně plochy, spusťte na příkazovém řádku v kořenové složce projektu následující:
    npm běh elektron
  3. Počkejte, až se vaše aplikace zkompiluje. Po dokončení se místo toho, aby se aplikace Angular otevřela ve webovém prohlížeči, místo toho otevře okno na ploše. Na ploše se zobrazí obsah vaší aplikace Angular.
  4. Pokud chcete svou aplikaci stále prohlížet ve webovém prohlížeči, můžete stále spustit příkaz ng serve.
    ng sloužit
  5. Pokud používáte ng sloužit se obsah vaší aplikace stále zobrazí ve webovém prohlížeči na adrese localhost: 4200.

Vytváření desktopových aplikací s elektronem

Electron můžete použít k vytváření desktopových aplikací na Windows, Mac a Linux. Ve výchozím nastavení můžete aplikaci Angular testovat pomocí webového prohlížeče pomocí příkazu ng serve. Aplikaci Angular můžete nakonfigurovat tak, aby se místo webového prohlížeče také otevírala v okně plochy.

Můžete to udělat pomocí souboru JavaScript. Budete také muset nakonfigurovat soubory index.html a package.json. Celková aplikace bude mít stále stejnou strukturu jako běžná aplikace Angular.

Pokud se chcete dozvědět více o tom, jak vytvářet desktopové aplikace, můžete také prozkoumat aplikace Windows Forms. Aplikace Windows Forms vám umožňují klikat a přetahovat prvky uživatelského rozhraní na plátno a zároveň přidávat jakoukoli logiku kódování do souborů C#.