Elektronien perusteet: Angular Electron -sovelluksen määrittäminen ja suorittaminen

Electronin avulla voit rakentaa työpöytäsovelluksia Windowsille, Macille ja Linuxille. Kun luot sovelluksen Electronilla, voit esikatsella ja suorittaa sovelluksen työpöytäsovellusikkunan kautta.

Electronilla voit määrittää Angular-sovelluksen käynnistymään työpöytäikkunassa tavallisen verkkoselaimen sijaan. Voit tehdä tämän käyttämällä JavaScript-tiedostoa itse sovelluksessa.

Kun olet määrittänyt Electronin, voit jatkaa kehitystä kuten tavallisessa Angular-sovelluksessa. Sovelluksen pääosat noudattavat edelleen samaa vakiokulmarakennetta.

Kuinka asentaa Electron osaksi sovellustasi

Jotta voit käyttää Electronia, sinun on ladattava ja asennettava node.js ja lisättävä Electron sovellukseesi käyttämällä npm install -komentoa.

Lataa ja asenna node.js . Voit varmistaa, että olet asentanut sen oikein tarkistamalla version:
```
node -v
```
Node sisältää myös npm, JavaScript-pakettien hallinta . Voit varmistaa, että npm on asennettu tarkistamalla npm-versio:
```
npm -v
```
Luo uusi Angular-sovellus käyttämällä uusista komento. Tämä luo kansion, joka sisältää kaikki tarvittavat Angular-projektiin tarvittavat tiedostot töihin.
```
ng new electron-app
```
Käytä sovelluksesi juurikansiossa npm asentaa Electron.
```
npm install --save-dev electron
```
Tämä luo uuden kansion Electronille sovelluksen node_modules-kansioon.
Voit myös asentaa Electronin maailmanlaajuisesti tietokoneellesi.
```
npm install -g electron 
```

Kulmaelektronisovelluksen tiedostorakenne

Electron tarvitsee pääasiallisen JavaScript-tiedoston työpöytäikkunan luomiseen ja hallintaan. Tämä ikkuna näyttää sovelluksesi sisällön siinä. JavaScript-tiedosto sisältää myös muita tapahtumia, joita voi tapahtua, kuten jos käyttäjä sulkee ikkunan.

indeksoi HTML-tiedoston sijainti projektissa

Suorituksen aikana näytettävä sisältö tulee index.html-tiedostosta. Oletusarvoisesti löydät index.html-tiedoston tiedoston sisältä src -kansioon, ja suorituksen aikana siitä luodaan automaattisesti sisäänrakennettu kopio dist kansio.

Sovelluksen pääkomponentin sijainti kansiossa

Index.html-tiedosto näyttää yleensä tältä:

<!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>

body-tunnisteen sisällä on -tunniste. Tämä näyttää Angular-sovelluksen pääsovelluskomponentin. Löydät sovelluksen pääkomponentin osoitteesta src/app kansio.

Kuinka käyttää Electronia kulmasovelluksen avaamiseen työpöytäikkunassa

Luo main.js-tiedosto ja määritä se avaamaan sovelluksen sisältö työpöytäikkunassa.

Luo tiedosto nimetyn projektisi juureen main.js . Alusta Electron tässä tiedostossa, jotta voit käyttää sitä sovellusikkunan luomiseen.
```
const { app, BrowserWindow } = require('electron');
```
Luo uusi työpöytäikkuna, jolla on tietty leveys ja korkeus. Lataa hakemistotiedosto ikkunassa näytettäväksi sisällöksi. Varmista, että hakemistotiedoston polku vastaa sovelluksesi nimeä. Jos esimerkiksi annoit sovelluksellesi nimen 'electron-app', polku on 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Kun sovellus on valmis, kutsu createWindow()-funktio. Tämä luo sovellusikkunan sovelluksellesi.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
Vuonna src/index.html tiedostossa pohja -tunniste, muuta href-attribuutiksi './'.
```
<base href="./">
```
Sisään package.json , lisää pää -kenttään ja sisällytä arvoksi main.js-tiedosto. Tämä on sovelluksen aloituspiste, jotta sovellus suorittaa main.js-tiedoston, kun se käynnistää sovelluksen.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```

Vuonna .browserslistrc tiedosto, muokkaa luetteloa poistaaksesi iOS Safari -versiot 15.2-15.3. Tämä estää yhteensopivuusvirheiden näkymisen konsolissa kääntämisen aikana.

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

Poista oletussisältö src/app/app.component.html tiedosto. Korvaa se uudella sisällöllä.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

Lisää tyyliä sisällölle src/app/app.component.css tiedosto.

.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; 
}

Lisää hieman yleistä tyyliä src/styles.css tiedosto poistaaksesi oletusmarginaalit ja pehmusteet.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Kuinka suorittaa elektronisovellus

Jos haluat suorittaa sovelluksen ikkunassa, määritä komento paketti.json-tiedoston komentosarjataulukossa. Suorita sitten sovellus terminaalin komennolla.

Sisään package.json , lisää komentosarjan sisään komento Angular-sovelluksen rakentamiseksi ja Electronin suorittamiseksi. Muista lisätä pilkku edellisen merkinnän jälkeen Scripts-taulukkoon.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Suorita uusi Angular-sovellus työpöytäikkunassa suorittamalla seuraava komentorivillä projektisi juurikansiossa:
```
npm run electron
```
Odota, että hakemuksesi käännetään. Kun olet valmis, sen sijaan, että Angular-sovellus avautuisi verkkoselaimessa, sen sijaan avautuu työpöytäikkuna. Työpöytäikkunassa näkyy Angular-sovelluksesi sisältö.
Jos haluat edelleen tarkastella sovellustasi verkkoselaimessa, voit silti suorittaa ng serve -komennon.
```
ng serve
```
Jos käytät palvella -komentoa, sovelluksesi sisältö näkyy edelleen verkkoselaimessa osoitteessa localhost: 4200.

Työpöytäsovellusten rakentaminen Electronilla

Voit käyttää Electronia työpöytäsovellusten rakentamiseen Windowsissa, Macissa ja Linuxissa. Oletuksena voit testata Angular-sovellusta verkkoselaimella ng serve -komennon kautta. Voit määrittää Angular-sovelluksesi avautumaan myös työpöytäikkunassa verkkoselaimen sijaan.

kuinka käyttää ssd ja hdd yhdessä

Voit tehdä tämän JavaScript-tiedoston avulla. Sinun on myös määritettävä index.html- ja package.json-tiedostot. Kokonaissovellus noudattaa edelleen samaa rakennetta kuin tavallinen Angular-sovellus.

Jos haluat oppia lisää työpöytäsovellusten luomisesta, voit myös tutustua Windows Forms -sovelluksiin. Windows Forms -sovellusten avulla voit napsauttaa ja vetää käyttöliittymäelementtejä kankaalle ja lisätä samalla koodauslogiikkaa C#-tiedostoihin.