Home-theater-designers
Electron le permite crear aplicaciones de escritorio para Windows, Mac y Linux. Cuando crea una aplicación con Electron, puede obtener una vista previa y ejecutar la aplicación a través de una ventana de aplicación de escritorio.
Puede usar Electron para configurar una aplicación Angular para que se inicie en una ventana de escritorio, en lugar del navegador web habitual. Puede hacerlo usando un archivo JavaScript dentro de la propia aplicación.
Una vez que configure Electron, puede continuar con el desarrollo como lo haría en una aplicación Angular normal. Las partes principales de la aplicación seguirán la misma estructura Angular estándar.
Cómo instalar Electron como parte de su aplicación
Para usar Electron, debe descargar e instalar node.js y usar npm install para agregar Electron a su aplicación.
- Descargar e instalar nodo.js . Puede confirmar que lo ha instalado correctamente comprobando la versión:
El nodo también incluye npm, el administrador de paquetes de JavaScript . Puede confirmar que tiene npm instalado al verificar la versión de npm:node -vnpm -v - Cree una nueva aplicación Angular usando el de nuevo dominio. Esto creará una carpeta que contiene todo lo necesario archivos requeridos para un proyecto Angular para trabajar.
ng new electron-app - En la carpeta raíz de su aplicación, utilice npm para instalar Electron.
npm install --save-dev electron - Esto creará una nueva carpeta para Electron en la carpeta node_modules de la aplicación.
- También puede instalar Electron globalmente en su computadora.
npm install -g electron
La estructura de archivos de la aplicación de electrones angulares
Electron requerirá un archivo JavaScript principal para crear y administrar la ventana del escritorio. Esta ventana mostrará el contenido de su aplicación dentro de ella. El archivo JavaScript también contendrá otros eventos que pueden ocurrir, como si el usuario cierra la ventana.
En tiempo de ejecución, el contenido que se muestra provendrá del archivo index.html. De forma predeterminada, puede encontrar el archivo index.html dentro del origen carpeta, y en tiempo de ejecución se crea automáticamente una copia integrada dentro del dist carpeta.
El archivo index.html generalmente se ve así:
<!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> Dentro de la etiqueta del cuerpo hay una etiqueta
Cómo usar Electron para abrir una aplicación angular en una ventana de escritorio
Cree el archivo main.js y configúrelo para abrir el contenido de la aplicación dentro de una ventana del escritorio.
- Cree un archivo en la raíz de su proyecto llamado principal.js . En este archivo, inicialice Electron para que pueda usarlo para crear la ventana de la aplicación.
const { app, BrowserWindow } = require('electron'); - Cree una nueva ventana de escritorio de cierto ancho y alto. Cargue el archivo de índice como contenido para mostrar en la ventana. Asegúrese de que la ruta al archivo de índice coincida con el nombre de su aplicación. Por ejemplo, si nombró a su aplicación 'electron-app', la ruta será 'dist/electron-app/index.html'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - Cuando la aplicación esté lista, llama a la función createWindow(). Esto creará la ventana de la aplicación para su aplicación.
app.whenReady().then(() => {
createWindow()
}) - En el src/index.html archivo, en el base etiqueta, cambie el atributo href a './'.
<base href="./"> - En paquete.json , Agrega un principal e incluya el archivo main.js como valor. Este será el punto de entrada para la aplicación, de modo que la aplicación ejecute el archivo main.js cuando inicie la aplicación.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - En el .browserslistrc archivo, modifique la lista para eliminar las versiones de safari de iOS 15.2-15.3. Esto evitará que se muestren errores de compatibilidad en la consola al compilar.
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 - Eliminar el contenido predeterminado en el src/app/app.component.html expediente. Reemplácelo con contenido nuevo.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Agregue algo de estilo para el contenido en el src/app/app.component.css archivo.
.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;
} - Agregue un poco de estilo general a la src/estilos.css archivo para eliminar los márgenes y rellenos predeterminados.
html {
margin: 0;
padding: 0;
}
Cómo ejecutar una aplicación electrónica
Para ejecutar su aplicación en una ventana, configure un comando en la matriz de scripts de package.json. Luego, ejecute su aplicación usando el comando en la terminal.
- En paquete.json , dentro de la matriz de scripts, agregue un comando para compilar la aplicación Angular y ejecutar Electron. Asegúrese de agregar una coma después de la entrada anterior en la matriz Scripts.
"scripts": {
...
"electron": "ng build && electron ."
}, - Para ejecutar su nueva aplicación Angular en una ventana de escritorio, ejecute lo siguiente en la línea de comando, en la carpeta raíz de su proyecto:
npm run electron - Espere a que su aplicación se compile. Una vez completada, en lugar de abrir su aplicación Angular en el navegador web, se abrirá una ventana de escritorio. La ventana del escritorio mostrará el contenido de su aplicación Angular.
- Si aún desea ver su aplicación en el navegador web, aún puede ejecutar el comando ng serve.
ng serve - Si está utilizando el de servir comando, el contenido de su aplicación aún se mostrará en un navegador web en anfitrión local: 4200.
Creación de aplicaciones de escritorio con Electron
Puede usar Electron para crear aplicaciones de escritorio en Windows, Mac y Linux. De manera predeterminada, puede probar una aplicación Angular usando un navegador web a través del comando ng serve. Puede configurar su aplicación Angular para que también se abra en una ventana de escritorio en lugar de un navegador web.
cómo conectar un disco duro a una computadora portátil
Puede hacer esto usando un archivo JavaScript. También deberá configurar sus archivos index.html y package.json. La aplicación general seguirá la misma estructura que una aplicación Angular regular.
Si desea obtener más información sobre cómo crear aplicaciones de escritorio, también puede explorar las aplicaciones de Windows Forms. Las aplicaciones de Windows Forms le permiten hacer clic y arrastrar elementos de la interfaz de usuario a un lienzo y, al mismo tiempo, agregar cualquier lógica de codificación a los archivos de C#.