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.

  1. Lataa ja asenna node.js. Voit varmistaa, että olet asentanut sen oikein tarkistamalla version:
    solmu -v
    Node sisältää myös npm, JavaScript-pakettien hallinta. Voit varmistaa, että npm on asennettu tarkistamalla npm-versio:
    npm -v
  2. Luo uusi Angular-sovellus käyttämällä uutta
    instagram viewer
    komento. Tämä luo kansion, joka sisältää kaikki tarvittavat Angular-projektiin tarvittavat tiedostot työskennellä.
    ng Uusi elektroni-sovellus
  3. Käytä sovelluksesi juurikansiossa npm asentaaksesi Electronin.
    npm Asentaa--save-dev elektroni
  4. Tämä luo uuden kansion Electronille sovelluksen node_modules-kansioon.
  5. Voit myös asentaa Electronin maailmanlaajuisesti tietokoneellesi.
    npm Asentaa -g elektroni

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.

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.

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

<!doctype html>
<html lang="fi">
<pää>
<meta charset="utf-8">
<otsikko> ElectronApp </title>
<base href="./">
<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1">
<linkki rel="kuvake" tyyppi="kuva/x-kuvake" href="favicon.ico">
</head>
<kehon>
<app-root></app-root>
</body>
</html>

Runkotunnisteen sisällä on tag. 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.

  1. Luo tiedosto nimetyn projektisi juureen main.js. Alusta Electron tässä tiedostossa, jotta voit käyttää sitä sovellusikkunan luomiseen.
    konst { App, BrowserWindow } = vaatia('elektroni');
  2. 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 nimeksi "electron-app", polku on "dist/electron-app/index.html".
    toimintoluo ikkuna() {
     voitto = Uusi BrowserWindow({leveys: 800, korkeus: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Kun sovellus on valmis, kutsu CreateWindow()-funktio. Tämä luo sovellusikkunan sovelluksellesi.
    app.whenReady().then(() => {
     CreateWindow()
    })
  4. Vuonna src/index.html tiedostossa pohja -tunnisteen, muuta href-attribuutiksi "./".
    <base href="./">
  5. 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.
    {
    "nimi": "elektroni-sovellus",
    "versio": "0.0.0",
    "pää": "main.js",
     ...
    }
  6. Vuonna .browserslistrc tiedosto, muokkaa luetteloa poistaaksesi iOS Safari -versiot 15.2-15.3. Tämä estää yhteensopivuusvirheiden näkymisen konsolissa kääntämisen aikana.
    1 viimeinen Chrome-versio
    1 viimeinen Firefox-versio
    viimeiset 2 Edgen pääversiot
    2 viimeistä Safarin pääversiota
    2 viimeistä iOS: n pääversiota
    Firefox ESR
    eiios_saf 15.2-15.3
    eisafari 15.2-15.3
  7. Poista oletussisältö src/app/app.component.html tiedosto. Korvaa se uudella sisällöllä.
    <div class="sisältö">
    <div class="kortti-">
    <h2> Koti </h2>
    <s>
     Tervetuloa Angular Electron -sovellukseeni!
    </s>
    </div>
    </div>
  8. Lisää tyyliä sisältöön src/app/app.component.css tiedosto.
    .sisältö {
     linjan korkeus: 2rem;
    Fonttikoko: 1.2em;
     marginaali: 48 kuvapistettä 10 %;
     kirjasinperhe: Arial, sans-serif
    }
    .kortti {
    laatikko-varjo: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     leveys: 85 %;
     täyte: 16px 48px;
     marginaali: 24px 0px;
     taustaväri: whitesmoke;
     font-family: sans-serif;
    }
  9. Lisää hieman yleistä tyyliä src/styles.css tiedosto poistaaksesi oletusmarginaalit ja täytteet.
    html {
     marginaali: 0;
     pehmuste: 0;
    }

Kuinka suorittaa elektronisovellus

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

  1. Sisään package.json, lisää komentosarjan sisään komento Angular-sovelluksen rakentamiseksi ja Electronin suorittamiseksi. Muista lisätä pilkku edellisen merkinnän jälkeen Skriptit-taulukkoon.
    "käsikirjoituksia": {
     ...
    "elektroni": "ng rakentaa && elektroni."
    },
  2. Jos haluat suorittaa uuden Angular-sovelluksesi työpöytäikkunassa, suorita seuraava komentorivillä projektisi juurikansiossa:
    npm juoksuelektroni
  3. 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ö.
  4. Jos haluat edelleen tarkastella sovellustasi verkkoselaimessa, voit silti suorittaa ng serve -komennon.
    palvella
  5. Jos käytät palvella -komentoa, sovelluksesi sisältö näkyy edelleen verkkoselaimessa osoitteessa paikallinen isäntä: 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.

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.