Electron vam omogućuje izradu desktop aplikacija za Windows, Mac i Linux. Kada izradite aplikaciju koristeći Electron, možete pregledati i pokrenuti aplikaciju kroz prozor aplikacije za radnu površinu.

Možete koristiti Electron za konfiguriranje Angular aplikacije za pokretanje na prozoru radne površine, umjesto uobičajenog web preglednika. To možete učiniti pomoću JavaScript datoteke unutar same aplikacije.

Nakon što konfigurirate Electron, možete nastaviti s razvojem kao što biste radili na običnoj Angular aplikaciji. Glavni dijelovi aplikacije i dalje će slijediti istu standardnu ​​Angular strukturu.

Kako instalirati Electron kao dio svoje aplikacije

Da biste koristili Electron, trebate preuzeti i instalirati node.js i upotrijebiti npm install da biste dodali Electron svojoj aplikaciji.

  1. Preuzmite i instalirajte čvor.js. Možete potvrditi da ste ga pravilno instalirali provjerom verzije:
    čvor -v
    Čvor također uključuje npm, JavaScript upravitelj paketa. Možete potvrditi da imate instaliran npm provjerom verzije npm-a:
    npm -v
  2. instagram viewer
  3. Stvorite novu Angular aplikaciju pomoću ng novo naredba. Ovo će stvoriti mapu koja sadrži sve potrebne datoteke potrebne za Angular projekt raditi.
    ng novi elektronska aplikacija
  4. U korijenskoj mapi vaše aplikacije koristite npm za instaliranje Electrona.
    npm instalirati--save-dev elektron
  5. Ovo će stvoriti novu mapu za Electron u mapi node_modules aplikacije.
  6. Također možete instalirati Electron globalno na svoje računalo.
    npm instalirati -g elektron

Struktura datoteke aplikacije Angular Electron

Electron će zahtijevati glavnu JavaScript datoteku za stvaranje i upravljanje prozorom radne površine. Ovaj prozor će prikazati sadržaj vaše aplikacije unutar njega. JavaScript datoteka također će sadržavati druge događaje koji se mogu dogoditi, kao što je ako korisnik zatvori prozor.

Tijekom izvođenja, prikazani sadržaj dolazi iz datoteke index.html. Prema zadanim postavkama možete pronaći datoteku index.html unutar src mapu, a tijekom izvođenja automatski se stvara njezina izgrađena kopija unutar mape dist mapa.

Datoteka index.html obično izgleda ovako:

<!doctype html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula> ElectronApp </title>
<baza href="./">
<meta naziv="prozor za prikaz" sadržaj="širina=širina-uređaja, početna skala=1">
<veza rel="ikona" vrsta="slika/ikona x" href="favicon.ico">
</head>
<tijelo>
<app-root></app-root>
</body>
</html>

Unutar oznake tijela nalazi se označiti. Ovo će prikazati glavnu komponentu aplikacije za Angular aplikaciju. Glavnu komponentu aplikacije možete pronaći u src/aplikacija mapa.

Kako koristiti Electron za otvaranje Angular aplikacije u prozoru radne površine

Stvorite datoteku main.js i konfigurirajte je da otvara sadržaj aplikacije unutar prozora radne površine.

  1. Stvorite datoteku u korijenu svog projekta pod nazivom glavni.js. U ovoj datoteci inicijalizirajte Electron tako da ga možete koristiti za stvaranje prozora aplikacije.
    konst { app, BrowserWindow } = zahtijevati('elektron');
  2. Napravite novi prozor radne površine određene širine i visine. Učitajte datoteku indeksa kao sadržaj za prikaz u prozoru. Provjerite odgovara li put do datoteke indeksa nazivu vaše aplikacije. Na primjer, ako ste svoju aplikaciju nazvali "electron-app", put će biti "dist/electron-app/index.html".
    funkcijastvoritiProzor() {
    pobijediti = novi BrowserWindow({širina: 800, visina: 800});
    win.loadFile('dist/electron-app/index.html');
    }
  3. Kada je aplikacija spremna, pozovite funkciju createWindow(). Ovo će stvoriti prozor aplikacije za vašu aplikaciju.
    app.whenReady().then(() => {
    stvoritiProzor()
    })
  4. u src/index.html datoteka, u baza oznaku, promijenite atribut href u "./".
    <baza href="./">
  5. U paket.json, dodati glavni i uključite datoteku main.js kao vrijednost. Ovo će biti ulazna točka za aplikaciju, tako da aplikacija pokreće datoteku main.js dok pokreće aplikaciju.
    {
    "Ime": "elektronska aplikacija",
    "verzija": "0.0.0",
    "glavni": "glavni.js",
    ...
    }
  6. u .browserslistrc datoteku, izmijenite popis kako biste uklonili iOS Safari verzije 15.2-15.3. To će spriječiti prikazivanje pogrešaka kompatibilnosti u konzoli tijekom kompajliranja.
    posljednja 1 verzija Chromea
    posljednja 1 verzija Firefoxa
    zadnje 2 glavne verzije Edgea
    zadnje 2 glavne verzije Safarija
    zadnje 2 glavne verzije iOS-a
    Firefox ESR
    neios_saf 15.2-15.3
    nesafari 15.2-15.3
  7. Izbrišite zadani sadržaj u src/app/app.component.html datoteka. Zamijenite ga nekim novim sadržajem.
    <div klasa="sadržaj">
    <div klasa="kartica">
    <h2> Dom </h2>
    <str>
    Dobrodošli u moju aplikaciju Angular Electron!
    </str>
    </div>
    </div>
  8. Dodajte malo stila za sadržaj u src/app/app.component.css datoteka.
    .sadržaj {
    visina linije: 2rem;
    veličina fonta: 1.2em;
    margina: 48px 10%;
    obitelj fontova: Arial, sans-serif
    }
    .kartica {
    kutija-sjena: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    širina: 85%;
    ispuna: 16px 48px;
    margina: 24px 0px;
    boja pozadine: bijeli dim;
    obitelj-fontova: sans-serif;
    }
  9. Dodajte malo cjelokupnog stila src/styles.css da biste uklonili zadane margine i ispune.
    html {
    margina: 0;
    ispuna: 0;
    }

Kako pokrenuti Electron aplikaciju

Da biste svoju aplikaciju pokrenuli u prozoru, konfigurirajte naredbu u nizu skripti package.json. Zatim pokrenite svoju aplikaciju pomoću naredbe u terminalu.

  1. U paket.json, unutar niza skripti dodajte naredbu za izradu Angular aplikacije i pokretanje Electrona. Provjerite jeste li dodali zarez nakon prethodnog unosa u polje skripti.
    "skripte": {
    ...
    "elektron": "ng graditi && elektron ."
    },
  2. Za pokretanje vaše nove Angular aplikacije u prozoru radne površine, pokrenite sljedeće u naredbenom retku, u korijenskoj mapi vašeg projekta:
    npm pokrenuti elektron
  3. Pričekajte da se vaša aplikacija kompajlira. Nakon dovršetka, umjesto otvaranja vaše Angular aplikacije u web pregledniku, otvorit će se prozor radne površine. Prozor radne površine prikazat će sadržaj vaše Angular aplikacije.
  4. Ako još uvijek želite vidjeti svoju aplikaciju u web pregledniku, još uvijek možete pokrenuti naredbu ng serve.
    ng poslužiti
  5. Ako koristite ng poslužiti naredba, sadržaj vaše aplikacije i dalje će se prikazivati ​​u web pregledniku na lokalni host: 4200.

Izrada desktop aplikacija s Electronom

Electron možete koristiti za izradu desktop aplikacija na Windows, Mac i Linux. Prema zadanim postavkama, možete testirati Angular aplikaciju pomoću web preglednika putem naredbe ng serve. Možete konfigurirati svoju Angular aplikaciju da se također otvara u prozoru radne površine umjesto web preglednika.

To možete učiniti pomoću JavaScript datoteke. Također ćete morati konfigurirati svoje datoteke index.html i package.json. Cjelokupna aplikacija i dalje će slijediti istu strukturu kao i obična Angular aplikacija.

Ako želite saznati više o tome kako izraditi desktop aplikacije, također možete istražiti Windows Forms aplikacije. Windows Forms aplikacije vam omogućuju da kliknete i povučete elemente korisničkog sučelja na platno dok također dodajete bilo koju logiku kodiranja u C# datoteke.