Electron vă permite să creați aplicații desktop pentru Windows, Mac și Linux. Când creați o aplicație folosind Electron, puteți previzualiza și rula aplicația printr-o fereastră de aplicație desktop.

Puteți utiliza Electron pentru a configura o aplicație Angular pentru a se lansa pe o fereastră de desktop, în locul browserului web obișnuit. Puteți face acest lucru folosind un fișier JavaScript din cadrul aplicației în sine.

Odată ce configurați Electron, puteți continua dezvoltarea așa cum ați proceda într-o aplicație Angular obișnuită. Părțile principale ale aplicației vor urma în continuare aceeași structură unghiulară standard.

Cum să instalați Electron ca parte a aplicației dvs

Pentru a folosi Electron, trebuie să descărcați și să instalați node.js și să utilizați npm install pentru a adăuga Electron la aplicația dvs.

  1. Descarca si instaleaza node.js. Puteți confirma că l-ați instalat corect verificând versiunea:
    nodul -v
    Nodul include, de asemenea npm, managerul de pachete JavaScript. Puteți confirma că aveți instalat npm verificând versiunea npm:
    npm -v
    2. instagram viewer
  2. Creați o nouă aplicație Angular folosind ng nou comanda. Acest lucru va crea un folder care conține toate cele necesare fișierele necesare pentru un proiect Angular a munci.
    ng nou electron-app
  3. În folderul rădăcină al aplicației dvs., utilizați npm pentru a instala Electron.
    npm instalare--save-dev electron
  4. Aceasta va crea un folder nou pentru Electron în folderul node_modules al aplicației.
  5. De asemenea, puteți instala Electron la nivel global pe computer.
    npm instalare -g electron

Structura fișierului aplicației electron unghiular

Electron va necesita un fișier JavaScript principal pentru a crea și gestiona fereastra desktopului. Această fereastră va afișa conținutul aplicației dvs. în ea. Fișierul JavaScript va conține și alte evenimente care pot apărea, cum ar fi dacă utilizatorul închide fereastra.

În timpul execuției, conținutul afișat va proveni din fișierul index.html. În mod implicit, puteți găsi fișierul index.html în interiorul src folder, iar în timpul executării o copie construită a acestuia este creată automat în interiorul dist pliant.

Fișierul index.html arată de obicei astfel:

<!doctype html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu> ElectronApp </title>
<baza href="./">
<meta nume="fereastra" continut="lățime=lățime-dispozitiv, scară inițială=1">
<link rel="pictograma" tip="imagine/pictogramă x" href="favicon.ico">
</head>
<corp>
<app-root></app-root>
</body>
</html>

În interiorul etichetei corporale este un etichetă. Aceasta va afișa componenta principală a aplicației pentru aplicația Angular. Puteți găsi componenta principală a aplicației în src/app pliant.

Cum să utilizați Electron pentru a deschide o aplicație unghiulară într-o fereastră de desktop

Creați fișierul main.js și configurați-l pentru a deschide conținutul aplicației într-o fereastră de desktop.

  1. Creați un fișier în rădăcina proiectului dvs. numit main.js. În acest fișier, inițializați Electron, astfel încât să îl puteți utiliza pentru a crea fereastra aplicației.
    const { app, BrowserWindow } = cere('electron');
  2. Creați o nouă fereastră de desktop cu o anumită lățime și înălțime. Încărcați fișierul index ca conținut de afișat în fereastră. Asigurați-vă că calea către fișierul index se potrivește cu numele aplicației dvs. De exemplu, dacă ați numit aplicația „electron-app”, calea va fi „dist/electron-app/index.html”.
    funcţiecreateWindow() {
     castiga = nou BrowserWindow({lăţime: 800, înălţime: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Când aplicația este gata, apelați funcția createWindow(). Aceasta va crea fereastra aplicației pentru aplicația dvs.
    app.whenReady().then(() => {
     createWindow()
    })
  4. În src/index.html dosar, în baza etichetă, schimbați atributul href în „./”.
    <baza href="./">
  5. În pachet.json, adauga o principal câmp și includeți fișierul main.js ca valoare. Acesta va fi punctul de intrare pentru aplicație, astfel încât aplicația să ruleze fișierul main.js pe măsură ce lansează aplicația.
    {
    "Nume": "electron-app",
    "versiune": "0.0.0",
    "principal": "main.js",
     ...
    }
  6. În .browserslistrc fișier, modificați lista pentru a elimina versiunile iOS safari 15.2-15.3. Acest lucru va împiedica afișarea erorilor de compatibilitate în consolă la compilare.
    ultima versiune Chrome
    ultima versiune de Firefox
    ultimele 2 versiuni majore Edge
    ultimele 2 versiuni majore Safari
    ultimele 2 versiuni majore de iOS
    Firefox ESR
    nuios_saf 15.2-15.3
    nusafari 15.2-15.3
  7. Ștergeți conținutul implicit din src/app/app.component.html fişier. Înlocuiește-l cu conținut nou.
    <div class="conţinut">
    <div class="card">
    <h2> Acasă </h2>
    <p>
     Bun venit la aplicația mea Angular Electron!
    </p>
    </div>
    </div>
  8. Adăugați ceva stil pentru conținutul din src/app/app.component.css fişier.
    .conţinut {
     linie-inaltime: 2rem;
    marimea fontului: 1.2em;
     marjă: 48px 10%;
     familie de fonturi: Arial, sans-serif
    }
    .card {
    cutie-umbră: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     latime: 85%;
     umplutură: 16px 48px;
     marjă: 24px 0px;
     culoare de fundal: fum alb;
     familie de fonturi: sans-serif;
    }
  9. Adăugați un stil general la src/styles.css fișier pentru a elimina marginile și umpluturile implicite.
    html {
     marja: 0;
     umplutură: 0;
    }

Cum să rulați o aplicație Electron

Pentru a rula aplicația într-o fereastră, configurați o comandă în matricea de scripturi din package.json. Apoi, rulați aplicația folosind comanda din terminal.

  1. În pachet.json, în interiorul matricei de scripturi, adăugați o comandă pentru a construi aplicația Angular și a rula Electron. Asigurați-vă că adăugați o virgulă după intrarea anterioară din matricea Scripts.
    "scenarii": {
     ...
    "electron": "ng construi && electron ."
    },
  2. Pentru a rula noua aplicație Angular într-o fereastră de desktop, rulați următoarele în linia de comandă, în folderul rădăcină al proiectului:
    npm run electron
  3. Așteptați compilarea aplicației dvs. Odată finalizat, în loc ca aplicația Angular să se deschidă în browserul web, se va deschide o fereastră de pe desktop. Fereastra de pe desktop va afișa conținutul aplicației dvs. Angular.
  4. Dacă doriți să vedeți în continuare aplicația dvs. în browserul web, puteți executa în continuare comanda ng serve.
    ng servi
  5. Dacă utilizați ng servi comandă, conținutul aplicației dvs. se va afișa în continuare într-un browser web la gazdă locală: 4200.

Construirea de aplicații desktop cu Electron

Puteți folosi Electron pentru a crea aplicații desktop pe Windows, Mac și Linux. În mod implicit, puteți testa o aplicație Angular folosind un browser web prin comanda ng serve. Puteți configura aplicația dvs. Angular să se deschidă și într-o fereastră de desktop în loc de un browser web.

Puteți face acest lucru folosind un fișier JavaScript. De asemenea, va trebui să configurați fișierele index.html și package.json. Aplicația generală va urma în continuare aceeași structură ca o aplicație Angular obișnuită.

Dacă doriți să aflați mai multe despre cum să creați aplicații desktop, puteți explora și aplicațiile Windows Forms. Aplicațiile Windows Forms vă permit să faceți clic și să trageți elementele UI pe o pânză, adăugând, de asemenea, orice logică de codare în fișierele C#.