Elektronok alapjai: Angular Electron alkalmazás konfigurálása és futtatása

Az Electron segítségével asztali alkalmazásokat készíthet Windows, Mac és Linux rendszerre. Amikor az Electron használatával készít egy alkalmazást, megtekintheti és futtathatja az alkalmazást az asztali alkalmazás ablakában.

Az Electron segítségével beállíthat egy Angular alkalmazást úgy, hogy az asztali ablakban induljon el a szokásos webböngésző helyett. Ezt az alkalmazáson belüli JavaScript-fájl segítségével teheti meg.

Az Electron konfigurálása után folytathatja a fejlesztést, mint egy hagyományos Angular alkalmazásban. Az alkalmazás fő részei továbbra is ugyanazt a szabványos szögszerkezetet fogják követni.

A pdf nem nyitható meg chrome -ban

Az Electron telepítése az alkalmazás részeként

Az Electron használatához le kell töltenie és telepítenie kell a node.js fájlt, majd az npm install segítségével hozzáadhatja az Electront az alkalmazáshoz.

Letöltés és telepítés node.js . A verzió ellenőrzésével megerősítheti, hogy megfelelően telepítette:
```
node -v
```
Node is tartalmazza npm, a JavaScript csomagkezelő . Az npm verziójának ellenőrzésével megerősítheti, hogy az npm telepítve van:
```
npm -v
```
Hozzon létre egy új Angular alkalmazást a az új parancs. Ezzel létrehoz egy mappát, amely tartalmazza az összes szükségeset Angular projekthez szükséges fájlok dolgozni.
```
ng new electron-app
```
Az alkalmazás gyökérmappájában használja a npm az Electron telepítéséhez.
```
npm install --save-dev electron
```
Ezzel új mappát hoz létre az Electron számára az alkalmazás node_modules mappájában.
Az Electront globálisan is telepítheti számítógépére.
```
npm install -g electron 
```

A szögelektron alkalmazás fájlszerkezete

Az Electronnak szüksége lesz egy fő JavaScript-fájlra az asztali ablak létrehozásához és kezeléséhez. Ez az ablak az alkalmazás tartalmát jeleníti meg benne. A JavaScript fájl egyéb eseményeket is tartalmazhat, amelyek előfordulhatnak, például ha a felhasználó bezárja az ablakot.

Futás közben a megjelenített tartalom az index.html fájlból származik. Alapértelmezés szerint az index.html fájl a fájlban található src mappát, és futás közben automatikusan létrejön egy beépített másolat a mappában ker mappát.

hogyan lehet megváltoztatni az ikonokat a Windows 10 rendszeren

Az alkalmazás fő összetevőjének helye a mappában

Az index.html fájl általában így néz ki:

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

A body tag belsejében egy címke található. Ez megjeleníti az Angular alkalmazás fő alkalmazáskomponensét. Az alkalmazás fő összetevőjét a src/app mappát.

Az Electron használata egy szögletes alkalmazás megnyitásához asztali ablakban

Hozza létre a main.js fájlt, és állítsa be úgy, hogy az alkalmazás tartalmát egy asztali ablakban nyissa meg.

hogyan tudok visszaváltani a régi gmail -re?

Hozzon létre egy fájlt a nevű projektjének gyökerében main.js . Ebben a fájlban inicializálja az Electront, hogy ezzel létrehozhassa az alkalmazás ablakát.
```
const { app, BrowserWindow } = require('electron');
```
Hozzon létre egy bizonyos szélességű és magasságú új asztali ablakot. Az ablakban megjelenítendő tartalomként töltse be az indexfájlt. Győződjön meg arról, hogy az indexfájl elérési útja megegyezik az alkalmazás nevével. Például, ha az alkalmazás nevét 'electron-app'-nak adta, az elérési út a következő lesz: 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Amikor az alkalmazás készen áll, hívja meg a createWindow() függvényt. Ezzel létrehozza az alkalmazás ablakát.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
Ban,-ben src/index.html fájlban, a bázis címkét, módosítsa a href attribútumot a következőre: './'.
```
<base href="./">
```
Ban ben package.json , add hozzá a fő- mezőbe, és adja meg a main.js fájlt értékként. Ez lesz az alkalmazás belépési pontja, így az alkalmazás a main.js fájlt futtatja, amikor elindítja az alkalmazást.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```
Ban,-ben .browserslistrc fájlt, módosítsa a listát az iOS Safari 15.2-15.3 verzióinak eltávolításához. Ez megakadályozza, hogy a kompatibilitási hibák megjelenjenek a konzolon fordításkor.
```
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 
```

Törölje az alapértelmezett tartalmat a src/app/app.component.html fájlt. Cserélje ki valamilyen új tartalommal.

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

Adjon hozzá némi stílust a tartalomhoz src/app/app.component.css fájl.

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

Adjon hozzá némi általános stílust a src/styles.css fájlt az alapértelmezett margók és kitöltések eltávolításához.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Elektronalkalmazás futtatása

Az alkalmazás ablakban történő futtatásához konfiguráljon egy parancsot a package.json fájl szkripttömbjében. Ezután futtassa az alkalmazást a terminálban található paranccsal.

Ban ben package.json , a szkriptek tömbjén belül adjon hozzá egy parancsot az Angular alkalmazás létrehozásához és az Electron futtatásához. Ügyeljen arra, hogy a Scripts tömb előző bejegyzése után vesszőt adjon meg.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Az új Angular alkalmazás asztali ablakban való futtatásához futtassa a következő parancsot a parancssorban a projekt gyökérmappájában:
```
npm run electron
```
Várja meg, amíg az alkalmazás összeáll. Ha elkészült, ahelyett, hogy az Angular alkalmazás megnyílna a böngészőben, egy asztali ablak nyílik meg. Az asztali ablakban megjelenik az Angular alkalmazás tartalma.
Ha továbbra is meg szeretné tekinteni az alkalmazást a webböngészőben, továbbra is futtathatja az ng serve parancsot.
```
ng serve
```
Ha használja a szolgálni parancsot, az alkalmazás tartalma továbbra is megjelenik a webböngészőben a címen localhost:4200.

Asztali alkalmazások készítése Electron segítségével

Az Electron segítségével asztali alkalmazásokat készíthet Windows, Mac és Linux rendszeren. Alapértelmezés szerint egy Angular alkalmazást webböngészővel tesztelhet az ng serve paranccsal. Az Angular alkalmazást beállíthatja úgy is, hogy az asztali ablakban is megnyíljon a webböngésző helyett.

Ezt egy JavaScript fájl segítségével teheti meg. Ezenkívül be kell állítania az index.html és a package.json fájlokat. Az általános alkalmazás továbbra is ugyanazt a struktúrát fogja követni, mint a hagyományos Angular alkalmazás.

Ha többet szeretne megtudni az asztali alkalmazások létrehozásáról, fedezze fel a Windows Forms alkalmazásokat is. A Windows Forms-alkalmazások lehetővé teszik a felhasználói felület elemeinek a vászonra való kattintását és húzását, miközben bármilyen kódolási logikát hozzáadhat a C#-fájlokhoz.