Elemente de bază ale electronului: Cum să configurați și să rulați o aplicație Angular Electron

Elemente de bază ale electronului: Cum să configurați și să rulați o aplicație Angular Electron

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.





cum se micșorează un fișier imagine

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:
    node -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. Creați o nouă aplicație Angular folosind de nou comanda. Acest lucru va crea un folder care conține toate cele necesare fișierele necesare pentru un proiect Angular la muncă.
    ng new electron-app
  3. În folderul rădăcină al aplicației dvs., utilizați npm pentru a instala Electron.
    npm install --save-dev electron
  4. Aceasta va crea un folder nou pentru Electron în folderul node_modules al aplicației.   locația principală a fișierului JS în cadrul proiectului
  5. De asemenea, puteți instala Electron la nivel global pe computer.
    npm install -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.



  indexați locația fișierului HTML în proiect

Î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.

  Locația principală a componentei aplicației în dosar

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





<!doctype html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html>

În interiorul etichetei body este o 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ă te uiți la mesajele șterse de pe facebook
  Electron în timpul rulării în browser

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 } = require('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 denumit aplicația „electron-app”, calea va fi „dist/electron-app/index.html”.
    function createWindow() { 
    win = new BrowserWindow({width: 800, height: 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ă, modificați atributul href în „./”.
    <base 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.
    { 
    "name": "electron-app",
    "version": "0.0.0",
    "main" : "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.
    last 1 Chrome version 
    last 1 Firefox version
    last 2 Edge major versions
    last 2 Safari major versions
    last 2 iOS major versions
    Firefox ESR
    not ios_saf 15.2-15.3
    not safari 15.2-15.3
  7. Ștergeți conținutul implicit din src/app/app.component.html fişier. Înlocuiți-l cu conținut nou.
    <div class="content"> 
    <div class="card">
    <h2> Home </h2>
    <p>
    Welcome to my Angular Electron application!
    </p>
    </div>
    </div>
  8. Adăugați ceva stil pentru conținutul din src/app/app.component.css fișier.
    .content { 
    line-height: 2rem;
    font-size: 1.2em;
    margin: 48px 10%;
    font-family: Arial, sans-serif
    }
    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 85%;
    padding: 16px 48px;
    margin: 24px 0px;
    background-color: whitesmoke;
    font-family: sans-serif;
    }
  9. Adăugați un pic de stil general src/styles.css fișier pentru a elimina marginile și umpluturile implicite.
    html { 
    margin: 0;
    padding: 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ă în matricea Scripts.
    "scripts": { 
    ...
    "electron": "ng build && 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ă vă vizualizați în continuare aplicația în browserul web, puteți executa în continuare comanda ng serve.
    ng serve
  5. Dacă utilizați de servire comandă, conținutul aplicației dvs. se va afișa în continuare într-un browser web la localhost: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ă.

cum se previne supraîncălzirea laptopurilor

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#.