Základy elektrónov: Ako nakonfigurovať a spustiť aplikáciu Angular Electron

Základy elektrónov: Ako nakonfigurovať a spustiť aplikáciu Angular Electron

Electron vám umožňuje vytvárať desktopové aplikácie pre Windows, Mac a Linux. Keď vytvárate aplikáciu pomocou Electron, môžete si aplikáciu zobraziť a spustiť cez okno aplikácie na pracovnej ploche.





Electron môžete použiť na konfiguráciu aplikácie Angular tak, aby sa spúšťala v okne pracovnej plochy namiesto bežného webového prehliadača. Môžete to urobiť pomocou súboru JavaScript v samotnej aplikácii.





ako sa vyhnúť porušovaniu autorských práv na comcast

Po nakonfigurovaní Electron môžete pokračovať vo vývoji ako v bežnej aplikácii Angular. Hlavné časti aplikácie budú mať stále rovnakú štandardnú Angular štruktúru.





Ako nainštalovať Electron ako súčasť vašej aplikácie

Ak chcete používať Electron, musíte si stiahnuť a nainštalovať node.js a pomocou npm install pridať Electron do svojej aplikácie.

  1. Stiahnite si a nainštalujte node.js . Správnu inštaláciu môžete potvrdiť skontrolovaním verzie:
    node -v
    Uzol tiež zahŕňa npm, správca balíkov JavaScript . Môžete potvrdiť, že máte nainštalovaný npm, skontrolovaním verzie npm:
    npm -v
  2. Vytvorte novú aplikáciu Angular pomocou nových príkaz. Tým sa vytvorí priečinok, ktorý obsahuje všetko potrebné súbory potrebné pre projekt Angular do práce.
    ng new electron-app
  3. V koreňovom priečinku vašej aplikácie použite npm na inštaláciu Electron.
    npm install --save-dev electron
  4. Tým sa vytvorí nový priečinok pre Electron v priečinku node_modules aplikácie.   hlavné umiestnenie súboru JS v projekte
  5. Electron si môžete do svojho počítača nainštalovať aj globálne.
    npm install -g electron 

Štruktúra súboru aplikácie uhlových elektrónov

Electron bude vyžadovať hlavný súbor JavaScript na vytvorenie a správu okna pracovnej plochy. V tomto okne sa zobrazí obsah vašej aplikácie. Súbor JavaScript bude obsahovať aj ďalšie udalosti, ktoré sa môžu vyskytnúť, napríklad ak používateľ zavrie okno.



  indexové umiestnenie súboru HTML v projekte

Za behu bude zobrazený obsah pochádzať zo súboru index.html. V predvolenom nastavení nájdete súbor index.html vo vnútri src a za behu sa automaticky vytvorí jeho vstavaná kópia vo vnútri dist priečinok.

  Umiestnenie hlavnej súčasti aplikácie v priečinku

Súbor index.html zvyčajne vyzerá takto:





prepnúť späť na starý facebook 2020
<!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>

Vo vnútri značky body je značka . Zobrazí sa hlavný komponent aplikácie pre aplikáciu Angular. Hlavný komponent aplikácie nájdete v src/aplikácia priečinok.

  Electron za behu v prehliadači

Ako používať elektrón na otvorenie uhlovej aplikácie v okne pracovnej plochy

Vytvorte súbor main.js a nakonfigurujte ho tak, aby otváral obsah aplikácie v okne pracovnej plochy.





  1. Vytvorte súbor v koreňovom adresári vášho projektu s názvom main.js . V tomto súbore inicializujte Electron, aby ste ho mohli použiť na vytvorenie okna aplikácie.
    const { app, BrowserWindow } = require('electron');
  2. Vytvorte nové okno pracovnej plochy určitej šírky a výšky. Načítajte indexový súbor ako obsah, ktorý sa má zobraziť v okne. Uistite sa, že cesta k indexovému súboru zodpovedá názvu vašej aplikácie. Ak ste napríklad svoju aplikáciu nazvali „electron-app“, cesta bude „dist/electron-app/index.html“.
    function createWindow() { 
    win = new BrowserWindow({width: 800, height: 800});
    win.loadFile('dist/electron-app/index.html');
    }
  3. Keď je aplikácia pripravená, zavolajte funkciu createWindow(). Tým sa vytvorí okno aplikácie pre vašu aplikáciu.
    app.whenReady().then(() => { 
    createWindow()
    })
  4. V src/index.html súbor, v základňu zmeňte atribút href na './'.
    <base href="./">
  5. In package.json , pridaj hlavné a ako hodnotu zahrňte súbor main.js. Toto bude vstupný bod pre aplikáciu, takže aplikácia spustí súbor main.js pri spustení aplikácie.
    { 
    "name": "electron-app",
    "version": "0.0.0",
    "main" : "main.js",
    ....
    }
  6. V .browserslistrc súbor, upravte zoznam tak, aby ste odstránili iOS safari verzie 15.2-15.3. Zabráni sa tým zobrazovaniu chýb kompatibility v konzole pri kompilácii.
    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. Odstráňte predvolený obsah v src/app/app.component.html súbor. Nahraďte ho nejakým novým obsahom.
    <div class="content"> 
    <div class="card">
    <h2> Home </h2>
    <p>
    Welcome to my Angular Electron application!
    </p>
    </div>
    </div>
  8. Pridajte nejaký štýl pre obsah v src/app/app.component.css súbor.
    .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. Pridajte trochu celkového štýlu src/styles.css súbor na odstránenie predvolených okrajov a vypchávok.
    html { 
    margin: 0;
    padding: 0;
    }

Ako spustiť aplikáciu Electron

Ak chcete spustiť aplikáciu v okne, nakonfigurujte príkaz v poli skriptov súboru package.json. Potom spustite aplikáciu pomocou príkazu v termináli.

  1. In package.json , do poľa skriptov pridajte príkaz na zostavenie aplikácie Angular a spustenie Electron. Uistite sa, že ste za predchádzajúcu položku v poli Scripts pridali čiarku.
    "scripts": { 
    ...
    "electron": "ng build && electron ."
    },
  2. Ak chcete spustiť novú aplikáciu Angular v okne pracovnej plochy, spustite v príkazovom riadku v koreňovom priečinku vášho projektu nasledujúce:
    npm run electron
  3. Počkajte, kým sa vaša aplikácia skompiluje. Po dokončení sa namiesto otvorenia aplikácie Angular vo webovom prehliadači otvorí okno pracovnej plochy. Na ploche sa zobrazí obsah vašej aplikácie Angular.
  4. Ak chcete svoju aplikáciu stále zobraziť vo webovom prehliadači, stále môžete spustiť príkaz ng serve.
    ng serve
  5. Ak používate slúžiť , obsah vašej aplikácie sa bude stále zobrazovať vo webovom prehliadači na adrese localhost: 4200.

Vytváranie desktopových aplikácií s Electron

Electron môžete použiť na vytváranie desktopových aplikácií na Windows, Mac a Linux. V predvolenom nastavení môžete otestovať aplikáciu Angular pomocou webového prehliadača pomocou príkazu ng serve. Aplikáciu Angular môžete nakonfigurovať tak, aby sa namiesto webového prehliadača otvárala aj v okne pracovnej plochy.

Môžete to urobiť pomocou súboru JavaScript. Budete tiež musieť nakonfigurovať svoje súbory index.html a package.json. Celková aplikácia bude mať stále rovnakú štruktúru ako bežná aplikácia Angular.

čierna obrazovka počítača pri štarte

Ak sa chcete dozvedieť viac o tom, ako vytvárať desktopové aplikácie, môžete tiež preskúmať aplikácie Windows Forms. Aplikácie Windows Forms vám umožňujú klikať a ťahať prvky používateľského rozhrania na plátno a zároveň pridávať akúkoľvek logiku kódovania do súborov C#.