Electron ви позволява да създавате настолни приложения за Windows, Mac и Linux. Когато създавате приложение с помощта на Electron, можете да прегледате и стартирате приложението през прозорец на настолно приложение.

Можете да използвате Electron, за да конфигурирате приложение Angular да се стартира в прозорец на работния плот, вместо в обичайния уеб браузър. Можете да направите това с помощта на JavaScript файл в самото приложение.

След като конфигурирате Electron, можете да продължите разработката, както бихте направили в обикновено приложение Angular. Основните части на приложението ще продължат да следват същата стандартна Angular структура.

Как да инсталирате Electron като част от вашето приложение

За да използвате Electron, трябва да изтеглите и инсталирате node.js и да използвате npm install, за да добавите Electron към вашето приложение.

  1. Изтеглете и инсталирайте node.js. Можете да потвърдите, че сте го инсталирали правилно, като проверите версията:
    възел -v
    Възелът включва също npm, мениджърът на пакети на JavaScript
    instagram viewer
    . Можете да потвърдите, че имате инсталиран npm, като проверите версията на npm:
    npm -v
  2. Създайте ново Angular приложение, като използвате ng нов команда. Това ще създаде папка, която съдържа всички необходими файлове, необходими за Angular проект да работиш.
    нг нов електрон-прил
  3. В основната папка на вашето приложение използвайте npm за инсталиране на Electron.
    npm Инсталирай--save-dev електрон
  4. Това ще създаде нова папка за Electron в папката node_modules на приложението.
  5. Можете също да инсталирате Electron глобално на вашия компютър.
    npm Инсталирай -g електрон

Файловата структура на приложението Angular Electron

Electron ще изисква основен JavaScript файл за създаване и управление на прозореца на работния плот. Този прозорец ще покаже съдържанието на вашето приложение в него. JavaScript файлът ще съдържа и други събития, които могат да възникнат, като например ако потребителят затвори прозореца.

По време на изпълнение показваното съдържание ще идва от файла index.html. По подразбиране можете да намерите файла index.html вътре в src папка и по време на изпълнение нейно изградено копие се създава автоматично вътре в разст папка.

Файлът index.html обикновено изглежда така:

<!doctype html>
<html lang="en">
<глава>
<мета charset="utf-8">
<заглавие> ElectronApp </title>
<база href="./">
<мета име="прозорец за изглед" съдържание="ширина=ширина на устройството, начален мащаб=1">
<връзка rel="икона" тип="изображение/х-икона" href="favicon.ico">
</head>
<тяло>
<app-root></app-root>
</body>
</html>

Вътре в етикета на тялото има an етикет. Това ще покаже основния компонент на приложението за приложението Angular. Можете да намерите основния компонент на приложението в src/приложение папка.

Как да използвате Electron за отваряне на Angular приложение в прозорец на работния плот

Създайте файла main.js и го конфигурирайте да отваря съдържанието на приложението в прозорец на работния плот.

  1. Създайте файл в корена на вашия проект с име main.js. В този файл инициализирайте Electron, за да можете да го използвате за създаване на прозореца на приложението.
    конст {приложение, прозорец на браузъра} = изискват(„електрон“);
  2. Създайте нов прозорец на работния плот с определена ширина и височина. Заредете индексния файл като съдържание за показване в прозореца. Уверете се, че пътят до индексния файл съвпада с името на вашето приложение. Например, ако сте кръстили приложението си „electron-app“, пътят ще бъде „dist/electron-app/index.html“.
    функцияcreateWindow() {
     победа = нов BrowserWindow({ширина: 800, височина: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Когато приложението е готово, извикайте функцията createWindow(). Това ще създаде прозореца на приложението за вашето приложение.
    app.whenReady().then(() => {
     createWindow()
    })
  4. В src/index.html файл, в база етикет, променете атрибута href на "./".
    <база href="./">
  5. в package.json, добави основен и включете файла main.js като стойност. Това ще бъде входната точка за приложението, така че приложението да изпълнява файла main.js, докато стартира приложението.
    {
    "име": "електрон-прил",
    "версия": "0.0.0",
    "основен": "main.js",
     ...
    }
  6. В .browserslistrc файл, променете списъка, за да премахнете iOS safari версии 15.2-15.3. Това ще предотврати показването на грешки за съвместимост в конзолата при компилиране.
    последната 1 версия на Chrome
    последната 1 версия на Firefox
    последните 2 основни версии на Edge
    последните 2 основни версии на Safari
    последните 2 основни версии на iOS
    Firefox ESR
    неios_saf 15.2-15.3
    несафари 15.2-15.3
  7. Изтрийте съдържанието по подразбиране в src/app/app.component.html файл. Заменете го с малко ново съдържание.
    <div клас="съдържание">
    <div клас="карта">
    <h2> У дома </h2>
    <стр>
     Добре дошли в моето приложение Angular Electron!
    </стр>
    </div>
    </div>
  8. Добавете малко стил за съдържанието в src/app/app.component.css файл.
    .съдържание {
     височина на реда: 2 rem;
    размер на шрифта: 1.2em;
     поле: 48px 10%;
     семейство шрифтове: Arial, sans-serif
    }
    .карта {
    кутия-сянка: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     ширина: 85%;
     подложка: 16px 48px;
     поле: 24px 0px;
     цвят на фона: whitesmoke;
     семейство шрифтове: sans-serif;
    }
  9. Добавете малко цялостен стил към src/styles.css файл, за да премахнете полетата и подложките по подразбиране.
    html {
     марж: 0;
     подплата: 0;
    }

Как да стартирате приложение Electron

За да стартирате приложението си в прозорец, конфигурирайте команда в масива със скриптове на package.json. След това стартирайте приложението си, като използвате командата в терминала.

  1. в package.json, вътре в масива със скриптове, добавете команда за изграждане на приложението Angular и стартирайте Electron. Уверете се, че сте добавили запетая след предходния запис в масива Scripts.
    "скриптове": {
     ...
    "електрон": "ng изграждане && електрон ."
    },
  2. За да стартирате вашето ново Angular приложение в прозорец на работния плот, изпълнете следното в командния ред, в основната папка на вашия проект:
    npm изпълнява електрон
  3. Изчакайте вашето приложение да се компилира. След като приключите, вместо вашето приложение Angular да се отваря в уеб браузъра, ще се отвори прозорец на работния плот. Прозорецът на работния плот ще покаже съдържанието на вашето Angular приложение.
  4. Ако все още искате да преглеждате приложението си в уеб браузъра, можете да изпълните командата ng serve.
    ng служи
  5. Ако използвате ng служи команда, съдържанието на вашето приложение ще продължи да се показва в уеб браузър на локален хост: 4200.

Изграждане на настолни приложения с Electron

Можете да използвате Electron за създаване на десктоп приложения на Windows, Mac и Linux. По подразбиране можете да тествате приложение Angular с помощта на уеб браузър чрез командата ng serve. Можете да конфигурирате вашето Angular приложение да се отваря и в прозорец на работния плот вместо в уеб браузър.

Можете да направите това с помощта на JavaScript файл. Ще трябва също да конфигурирате вашите файлове index.html и package.json. Цялостното приложение все още ще следва същата структура като обикновено приложение Angular.

Ако искате да научите повече за това как да създавате настолни приложения, можете също да разгледате приложенията на Windows Forms. Приложенията на Windows Forms ви позволяват да щраквате и плъзгате UI елементи върху платно, като същевременно добавяте каквато и да е логика за кодиране в C# файлове.