Основы Electron: как настроить и запустить приложение Angular Electron

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

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

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

сайты, чтобы покупать вещи дешево в Интернете

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

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

Загрузить и установить узел.js . Вы можете подтвердить, что установили его правильно, проверив версию:
```
node -v.
```
Узел также включает npm, менеджер пакетов JavaScript . Вы можете подтвердить, что у вас установлен npm, проверив версию npm:
```
npm -v.
```
Создайте новое приложение Angular, используя из нового команда. Это создаст папку, содержащую все необходимые файлы, необходимые для проекта Angular для работы.
```
ng new electron-app
```
В корневой папке вашего приложения используйте нпм для установки Electron.
```
npm install --save-dev electron
```
Это создаст новую папку для Electron в папке node_modules приложения.
Вы также можете установить Electron глобально на свой компьютер.

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

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

индексировать местоположение HTML-файла в проекте

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

tcl roku tv пульт не работает

Расположение основного компонента приложения в папке

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

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

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

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

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

Создайте файл в корне вашего проекта с именем main.js . В этом файле инициализируйте Electron, чтобы вы могли использовать его для создания окна приложения.
```
const { app, BrowserWindow } = require('electron');
```
Создайте новое окно рабочего стола определенной ширины и высоты. Загрузите индексный файл в качестве содержимого для отображения в окне. Убедитесь, что путь к индексному файлу соответствует имени вашего приложения. Например, если вы назвали свое приложение 'electron-app', путь будет 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}.
```
Когда приложение будет готово, вызовите функцию createWindow(). Это создаст окно приложения для вашего приложения.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
в источник/index.html файл, в база измените атрибут href на './'.
```
<base href="./">
```
В пакет.json , добавить главный поле и включите файл main.js в качестве значения. Это будет точка входа для приложения, так что приложение запускает файл main.js при запуске приложения.
в .browserslistrc файл, измените список, чтобы удалить iOS Safari версий 15.2-15.3. Это предотвратит отображение ошибок совместимости в консоли при компиляции.
```
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 
```
Удалите содержимое по умолчанию в источник/приложение/приложение.компонент.html файл. Замените его новым содержимым.
```
<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>
```

Добавьте некоторые стили для содержимого в источник/приложение/приложение.компонент.css файл.

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

Добавьте общий стиль к источник/styles.css файл для удаления полей и отступов по умолчанию.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

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

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

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

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

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

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

мой компьютер не распознает мой телефон

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