Electron позволяет создавать настольные приложения для Windows, Mac и Linux. Когда вы создаете приложение с помощью Electron, вы можете просмотреть и запустить приложение через окно настольного приложения.

Вы можете использовать Electron, чтобы настроить приложение Angular для запуска в окне рабочего стола вместо обычного веб-браузера. Вы можете сделать это, используя файл JavaScript в самом приложении.

После того, как вы настроите Electron, вы сможете продолжить разработку, как и в обычном приложении Angular. Основные части приложения по-прежнему будут следовать той же стандартной структуре Angular.

Как установить Electron как часть вашего приложения

Чтобы использовать Electron, вам нужно скачать и установить node.js, а затем использовать npm install, чтобы добавить Electron в ваше приложение.

  1. Загрузить и установить узел.js. Вы можете подтвердить, что установили его правильно, проверив версию:
    узел -v
    Узел также включает npm, менеджер пакетов JavaScript. Вы можете подтвердить, что у вас установлен npm, проверив версию npm:
    нпм -в
    2. instagram viewer
  2. Создайте новое приложение Angular, используя новый команда. Это создаст папку, содержащую все необходимые файлы, необходимые для проекта Angular работать.
    нг новый электронное приложение
  3. В корневой папке вашего приложения используйте нпм установить Электрон.
    нпм установить--save-dev электрон
  4. Это создаст новую папку для Electron в папке node_modules приложения.
  5. Вы также можете установить Electron глобально на свой компьютер.
    нпм установить -g электрон

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

Электрону потребуется основной файл JavaScript для создания окна рабочего стола и управления им. В этом окне будет отображаться содержимое вашего приложения. Файл JavaScript также будет содержать другие события, которые могут произойти, например, если пользователь закроет окно.

Во время выполнения отображаемый контент будет поступать из файла index.html. По умолчанию вы можете найти файл index.html внутри источник папку, и во время выполнения встроенная копия автоматически создается внутри расстояние папка.

Файл index.html обычно выглядит так:

<!doctype html>
<html язык="en">
<глава>
<мета кодировка ="утф-8">
<заглавие> ЭлектронПриложение </title>
<базовая ссылка ="./">
<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1">
<ссылка отн="значок" тип="изображение/x-значок" ссылка="favicon.ico">
</head>
<тело>
<корень приложения></app-root>
</body>
</html>

Внутри тега body находится ярлык. Это отобразит основной компонент приложения для приложения Angular. Вы можете найти основной компонент приложения в источник/приложение папка.

Как использовать Electron для открытия приложения Angular в окне рабочего стола

Создайте файл main.js и настройте его так, чтобы содержимое приложения открывалось в окне рабочего стола.

  1. Создайте файл в корне вашего проекта с именем main.js. В этом файле инициализируйте Electron, чтобы вы могли использовать его для создания окна приложения.
    константа { приложение, окно браузера } = требовать(«электрон»);
  2. Создайте новое окно рабочего стола определенной ширины и высоты. Загрузите индексный файл в качестве содержимого для отображения в окне. Убедитесь, что путь к индексному файлу соответствует имени вашего приложения. Например, если вы назвали свое приложение "electron-app", путь будет "dist/electron-app/index.html".
    функциясоздатьокно() {
     победа = новый БраузерОкно({ширина: 800, высота: 800});
     win.loadFile('dist/электрон-приложение/index.html');
    }
  3. Когда приложение будет готово, вызовите функцию createWindow(). Это создаст окно приложения для вашего приложения.
    app.whenReady().then(() => {
     создатьокно()
    })
  4. в источник/index.html файл, в база тег, измените атрибут href на "./".
    <базовая ссылка ="./">
  5. В пакет.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. Удалите содержимое по умолчанию в источник/приложение/приложение.компонент.html файл. Замените его новым содержанием.
    <раздел класс ="содержание">
    <раздел класс ="открытка">
    <h2> Дом </h2>
    <п>
     Добро пожаловать в мое приложение Angular Electron!
    </п>
    </div>
    </div>
  8. Добавьте некоторые стили для содержимого в источник/приложение/приложение.компонент.css файл.
    .содержание {
     высота строки: 2rem;
    размер шрифта: 1.2эм;
     поля: 48px 10%;
     семейство шрифтов: Arial, без засечек
    }
    .открытка {
    коробка-тень: 0 4пикс. 8пикс. 0 RGBA(0, 0, 0, 0.2);
     ширина: 85%;
     отступ: 16px 48px;
     поля: 24px 0px;
     цвет фона: белый дым;
     семейство шрифтов: без засечек;
    }
  9. Добавьте общий стиль к источник/styles.css файл, чтобы удалить поля и отступы по умолчанию.
    HTML {
     маржа: 0;
     заполнение: 0;
    }

Как запустить приложение Electron

Чтобы запустить приложение в окне, настройте команду в массиве сценариев package.json. Затем запустите приложение с помощью команды в терминале.

  1. В пакет.json, внутри массива скриптов добавьте команду для сборки приложения Angular и запускайте Electron. Убедитесь, что вы добавили запятую после предыдущей записи в массиве Scripts.
    "сценарии": {
     ...
    "электрон": "сборка && электрон."
    },
  2. Чтобы запустить ваше новое приложение Angular в окне рабочего стола, запустите в командной строке в корневой папке вашего проекта следующее:
    npm запустить электрон
  3. Подождите, пока ваше приложение скомпилируется. После завершения вместо открытия вашего приложения Angular в веб-браузере откроется окно рабочего стола. Окно рабочего стола покажет содержимое вашего приложения Angular.
  4. Если вы хотите по-прежнему просматривать свое приложение в веб-браузере, вы все равно можете запустить команду ng serve.
    нг служить
  5. Если вы используете нг служить команда, содержимое вашего приложения по-прежнему будет отображаться в веб-браузере по адресу локальный: 4200.

Создание настольных приложений с помощью Electron

Вы можете использовать Electron для создания настольных приложений для Windows, Mac и Linux. По умолчанию вы можете протестировать приложение Angular с помощью веб-браузера с помощью команды ng serve. Вы можете настроить приложение Angular так, чтобы оно также открывалось в окне рабочего стола вместо веб-браузера.

Вы можете сделать это с помощью файла JavaScript. Вам также потребуется настроить файлы index.html и package.json. Общее приложение по-прежнему будет следовать той же структуре, что и обычное приложение Angular.

Если вы хотите узнать больше о том, как создавать настольные приложения, вы также можете изучить приложения Windows Forms. Приложения Windows Forms позволяют щелкать и перетаскивать элементы пользовательского интерфейса на холст, а также добавлять любую логику кодирования в файлы C#.