Electron vam omogoča izdelavo namiznih aplikacij za Windows, Mac in Linux. Ko ustvarite aplikacijo z uporabo Electrona, si lahko predogledate in jo zaženete v oknu namizne aplikacije.

Electron lahko uporabite za konfiguracijo aplikacije Angular za zagon v namiznem oknu namesto v običajnem spletnem brskalniku. To lahko storite z datoteko JavaScript v sami aplikaciji.

Ko konfigurirate Electron, lahko nadaljujete z razvojem, kot bi v običajni aplikaciji Angular. Glavni deli aplikacije bodo še vedno sledili isti standardni strukturi Angular.

Kako namestiti Electron kot del vaše aplikacije

Če želite uporabljati Electron, morate prenesti in namestiti node.js ter uporabiti npm install, da dodate Electron svoji aplikaciji.

  1. Prenesite in namestite vozlišče.js. Lahko potrdite, da ste ga pravilno namestili, tako da preverite različico:
    vozlišče -v
    Vozlišče vključuje tudi npm, upravitelj paketov JavaScript. Če preverite različico npm, lahko potrdite, da imate nameščen npm:
    npm -v
  2. Ustvarite novo aplikacijo Angular z uporabo
    instagram viewer
    ng novo ukaz. To bo ustvarilo mapo, ki vsebuje vse potrebne datoteke, potrebne za projekt Angular delati.
    ng novo elektronska aplikacija
  3. V korenski mapi vaše aplikacije uporabite npm za namestitev Electron.
    npm namestite--save-dev electron
  4. To bo ustvarilo novo mapo za Electron v mapi node_modules aplikacije.
  5. Electron lahko namestite tudi globalno na vaš računalnik.
    npm namestite -g elektron

Datotečna struktura aplikacije Angular Electron

Electron bo za ustvarjanje in upravljanje namiznega okna potreboval glavno datoteko JavaScript. V tem oknu bo prikazana vsebina vaše aplikacije v njem. Datoteka JavaScript bo vsebovala tudi druge dogodke, ki se lahko zgodijo, na primer, če uporabnik zapre okno.

Med izvajanjem bo prikazana vsebina iz datoteke index.html. Privzeto lahko najdete datoteko index.html znotraj src in med izvajanjem se njena zgrajena kopija samodejno ustvari znotraj mape dist mapo.

Datoteka index.html je običajno videti takole:

<!doctype html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov> ElectronApp </title>
<base href="./">
<meta ime="vidno polje" vsebina="širina=širina naprave, začetna lestvica=1">
<povezava rel="ikona" vrsta="slika/ikona x" href="favicon.ico">
</head>
<telo>
<app-root></app-root>
</body>
</html>

Znotraj oznake body je an oznaka. To bo prikazalo glavno komponento aplikacije za aplikacijo Angular. Glavno komponento aplikacije najdete v src/app mapo.

Kako uporabljati Electron za odpiranje aplikacije Angular v oknu namizja

Ustvarite datoteko main.js in jo konfigurirajte za odpiranje vsebine aplikacije znotraj okna namizja.

  1. Ustvarite datoteko v korenu svojega projekta z imenom main.js. V tej datoteki inicializirajte Electron, da ga lahko uporabite za ustvarjanje okna aplikacije.
    konst { app, BrowserWindow } = zahtevati('elektron');
  2. Ustvarite novo okno namizja določene širine in višine. Naložite indeksno datoteko kot vsebino za prikaz v oknu. Prepričajte se, da se pot do indeksne datoteke ujema z imenom vaše aplikacije. Na primer, če ste svojo aplikacijo poimenovali "electron-app", bo pot "dist/electron-app/index.html".
    funkcijocreateWindow() {
     zmaga = novo BrowserWindow({premer: 800, višina: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Ko je aplikacija pripravljena, pokličite funkcijo createWindow(). To bo ustvarilo okno aplikacije za vašo aplikacijo.
    app.whenReady().then(() => {
     createWindow()
    })
  4. V src/index.html datoteka, v osnova spremenite atribut href v "./".
    <base href="./">
  5. notri package.json, dodajte a glavni in kot vrednost vključite datoteko main.js. To bo vstopna točka za aplikacijo, tako da aplikacija zažene datoteko main.js, ko zažene aplikacijo.
    {
    "ime": "elektronska aplikacija",
    "različica": "0.0.0",
    "glavni": "main.js",
     ...
    }
  6. V .browserslistrc datoteko, spremenite seznam, da odstranite iOS safari različice 15.2–15.3. To bo preprečilo prikaz napak združljivosti v konzoli med prevajanjem.
    zadnja 1 različica Chroma
    zadnja 1 različica Firefoxa
    zadnji 2 glavni različici Edge
    zadnji 2 glavni različici Safarija
    zadnji 2 glavni različici iOS-a
    Firefox ESR
    neios_saf 15.2-15.3
    nesafari 15.2-15.3
  7. Izbrišite privzeto vsebino v src/app/app.component.html mapa. Zamenjajte ga z novo vsebino.
    <razred div="vsebino">
    <razred div="kartica">
    <h2> domov </h2>
    <str>
     Dobrodošli v moji aplikaciji Angular Electron!
    </str>
    </div>
    </div>
  8. Dodajte nekaj sloga za vsebino v src/app/app.component.css mapa.
    .vsebina {
     višina vrstice: 2rem;
    velikost pisave: 1.2em;
     rob: 48 slikovnih pik 10 %;
     družina pisav: Arial, sans-serif
    }
    .kartica {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     širina: 85 %;
     oblazinjenje: 16px 48px;
     rob: 24px 0px;
     barva ozadja: whitesmoke;
     družina pisav: sans-serif;
    }
  9. Dodajte nekaj splošnega stila src/styles.css datoteko, da odstranite privzete robove in obrobe.
    html {
     rob: 0;
     oblazinjenje: 0;
    }

Kako zagnati aplikacijo Electron

Če želite aplikacijo zagnati v oknu, konfigurirajte ukaz v nizu skriptov paketa.json. Nato zaženite aplikacijo z ukazom v terminalu.

  1. notri package.json, znotraj niza skriptov dodajte ukaz za izdelavo aplikacije Angular in zaženite Electron. Prepričajte se, da ste dodali vejico za prejšnjim vnosom v polje Scripts.
    "skripte": {
     ...
    "elektron": "ng graditi && elektron ."
    },
  2. Če želite zagnati svojo novo aplikacijo Angular v namiznem oknu, zaženite naslednje v ukazni vrstici v korenski mapi vašega projekta:
    npm teči elektron
  3. Počakajte, da se vaša aplikacija prevede. Ko končate, se namesto odprtja aplikacije Angular v spletnem brskalniku odpre okno namizja. Okno namizja bo prikazalo vsebino vaše aplikacije Angular.
  4. Če si še vedno želite ogledati svojo aplikacijo v spletnem brskalniku, lahko še vedno zaženete ukaz ng serve.
    ng služijo
  5. Če uporabljate ng služijo bo vsebina vaše aplikacije še vedno prikazana v spletnem brskalniku na lokalni gostitelj: 4200.

Izdelava namiznih aplikacij z Electronom

Electron lahko uporabite za izdelavo namiznih aplikacij v sistemih Windows, Mac in Linux. Privzeto lahko preizkusite aplikacijo Angular s spletnim brskalnikom prek ukaza ng serve. Svojo aplikacijo Angular lahko konfigurirate tako, da se namesto v spletnem brskalniku odpre tudi v namiznem oknu.

To lahko storite z uporabo datoteke JavaScript. Prav tako boste morali konfigurirati datoteke index.html in package.json. Celotna aplikacija bo še vedno sledila isti strukturi kot običajna aplikacija Angular.

Če želite izvedeti več o izdelavi namiznih aplikacij, lahko raziščete tudi aplikacije Windows Forms. Aplikacije Windows Forms vam omogočajo, da kliknete in povlečete elemente uporabniškega vmesnika na platno, hkrati pa dodate poljubno logiko kodiranja v datoteke C#.