Electron vám umožňuje vytvárať desktopové aplikácie pre Windows, Mac a Linux. Keď vytvárate aplikáciu pomocou Electronu, môžete si aplikáciu zobraziť a spustiť cez okno aplikácie na pracovnej ploche.
Electron môžete použiť na konfiguráciu aplikácie Angular tak, aby sa spúšťala v okne pracovnej plochy namiesto bežného webového prehliadača. Môžete to urobiť pomocou súboru JavaScript v samotnej aplikácii.
Po nakonfigurovaní Electron môžete pokračovať vo vývoji ako v bežnej aplikácii Angular. Hlavné časti aplikácie budú mať stále rovnakú štandardnú Angular štruktúru.
Ako nainštalovať Electron ako súčasť vašej aplikácie
Ak chcete používať Electron, musíte si stiahnuť a nainštalovať node.js a pomocou npm install pridať Electron do svojej aplikácie.
- Stiahnite si a nainštalujte node.js. Správnu inštaláciu môžete potvrdiť skontrolovaním verzie:
Uzol tiež zahŕňa npm, správca balíkov JavaScript. Môžete potvrdiť, že máte nainštalovaný npm, skontrolovaním verzie npm:uzol -vnpm -v - Vytvorte novú aplikáciu Angular pomocou
ng nové príkaz. Tým sa vytvorí priečinok, ktorý obsahuje všetko potrebné súbory potrebné pre projekt Angular pracovať.
ng Nový elektrónová aplikácia - V koreňovom priečinku vašej aplikácie použite npm nainštalovať Electron.
npm Inštalácia--save-dev elektrón - Tým sa vytvorí nový priečinok pre Electron v priečinku node_modules aplikácie.
- Electron si môžete nainštalovať aj globálne do svojho počítača.
npm Inštalácia -g elektrón
Štruktúra súboru aplikácie uhlových elektrónov
Electron bude vyžadovať hlavný súbor JavaScript na vytvorenie a správu okna pracovnej plochy. V tomto okne sa zobrazí obsah vašej aplikácie. Súbor JavaScript bude obsahovať aj ďalšie udalosti, ktoré sa môžu vyskytnúť, napríklad ak používateľ zatvorí okno.
Za behu bude zobrazený obsah pochádzať zo súboru index.html. V predvolenom nastavení nájdete súbor index.html vo vnútri src a za behu sa automaticky vytvorí jeho vstavaná kópia vo vnútri dist priečinok.
Súbor index.html zvyčajne vyzerá takto:
<!doctype html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul> ElectronApp </title>
<základný href="./">
<meta meno="výrez" obsah ="width=device-width, initial-scale=1">
<odkaz rel="ikonu" typ="obrázok/ikona x" href="favicon.ico">
</head>
<telo>
<koreň aplikácie></app-root>
</body>
</html>Vo vnútri značky tela je
Ako používať elektrón na otvorenie uhlovej aplikácie v okne pracovnej plochy
Vytvorte súbor main.js a nakonfigurujte ho tak, aby otváral obsah aplikácie v okne pracovnej plochy.
- Vytvorte súbor v koreňovom adresári vášho projektu s názvom main.js. V tomto súbore inicializujte Electron, aby ste ho mohli použiť na vytvorenie okna aplikácie.
konšt { app, BrowserWindow } = vyžadovať('elektrón'); - Vytvorte nové okno pracovnej plochy určitej šírky a výšky. Načítajte indexový súbor ako obsah, ktorý sa má zobraziť v okne. Uistite sa, že cesta k indexovému súboru zodpovedá názvu vašej aplikácie. Ak ste napríklad svoju aplikáciu nazvali „electron-app“, cesta bude „dist/electron-app/index.html“.
funkciucreateWindow() {
vyhrať = Nový Okno prehliadača ({šírka: 800, výška: 800});
win.loadFile('dist/electron-app/index.html');
} - Keď je aplikácia pripravená, zavolajte funkciu createWindow(). Tým sa vytvorí okno aplikácie pre vašu aplikáciu.
app.whenReady().potom(() => {
createWindow()
}) - V src/index.html súbor, v základňu zmeňte atribút href na "./".
<základný href="./"> - In package.json, pridaj hlavné a ako hodnotu zahrňte súbor main.js. Toto bude vstupný bod pre aplikáciu, takže aplikácia spustí súbor main.js pri spustení aplikácie.
{
"názov": "elektrónová aplikácia",
"verzia": "0.0.0",
"hlavné": "main.js",
...
} - V .browserslistrc súbor, upravte zoznam tak, aby ste odstránili iOS safari verzie 15.2-15.3. Zabráni sa tým zobrazovaniu chýb kompatibility v konzole pri kompilácii.
posledná 1 verzia prehliadača Chrome
posledná 1 verzia Firefoxu
posledné 2 hlavné verzie Edge
posledné 2 hlavné verzie Safari
posledné 2 hlavné verzie systému iOS
Firefox ESR
nieios_saf 15.2-15.3
niesafari 15.2-15.3 - Odstráňte predvolený obsah v src/app/app.component.html súbor. Nahraďte ho nejakým novým obsahom.
<trieda div="obsahu">
<trieda div="kartu">
<h2> Domov </h2>
<p>
Vitajte v mojej aplikácii Angular Electron!
</str>
</div>
</div> - Pridajte nejaký štýl pre obsah v src/app/app.component.css súbor.
.obsah {
výška čiary: 2rem;
veľkosť písma: 1.2em;
okraj: 48px 10%;
rodina písiem: Arial, bezpätkové
}
.karta {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
šírka: 85 %;
výplň: 16px 48px;
okraj: 24px 0px;
farba pozadia: whitesmoke;
font-family: sans-serif;
} - Pridajte trochu celkového štýlu src/styles.css súbor na odstránenie predvolených okrajov a výplní.
html {
okraj: 0;
výplň: 0;
}
Ako spustiť aplikáciu Electron
Ak chcete spustiť aplikáciu v okne, nakonfigurujte príkaz v poli skriptov súboru package.json. Potom spustite aplikáciu pomocou príkazu v termináli.
- In package.json, do poľa skriptov pridajte príkaz na zostavenie aplikácie Angular a spustenie Electron. Uistite sa, že ste za predchádzajúcu položku v poli Scripts pridali čiarku.
"skripty": {
...
"elektrón": "stavať && elektrón ."
}, - Ak chcete spustiť svoju novú aplikáciu Angular v okne pracovnej plochy, spustite v príkazovom riadku v koreňovom priečinku vášho projektu nasledujúce:
npm spustiť elektrón - Počkajte, kým sa vaša aplikácia skompiluje. Po dokončení sa namiesto otvorenia aplikácie Angular vo webovom prehliadači otvorí okno pracovnej plochy. V okne pracovnej plochy sa zobrazí obsah vašej aplikácie Angular.
- Ak chcete svoju aplikáciu stále zobraziť vo webovom prehliadači, stále môžete spustiť príkaz ng serve.
ng slúžiť - Ak používate ng slúžiť , obsah vašej aplikácie sa bude stále zobrazovať vo webovom prehliadači na adrese localhost: 4200.
Vytváranie desktopových aplikácií s Electron
Electron môžete použiť na vytváranie desktopových aplikácií na Windows, Mac a Linux. V predvolenom nastavení môžete otestovať aplikáciu Angular pomocou webového prehliadača pomocou príkazu ng serve. Aplikáciu Angular môžete nakonfigurovať tak, aby sa namiesto webového prehliadača otvárala aj v okne pracovnej plochy.
Môžete to urobiť pomocou súboru JavaScript. Budete tiež musieť nakonfigurovať súbory index.html a package.json. Celková aplikácia bude mať stále rovnakú štruktúru ako bežná aplikácia Angular.
Ak sa chcete dozvedieť viac o tom, ako vytvárať desktopové aplikácie, môžete tiež preskúmať aplikácie Windows Forms. Aplikácie Windows Forms vám umožňujú klikať a ťahať prvky používateľského rozhrania na plátno a zároveň pridávať akúkoľvek logiku kódovania do súborov C#.
