O Electron permite que você crie aplicativos de desktop para Windows, Mac e Linux. Ao criar um aplicativo usando o Electron, você pode visualizar e executar o aplicativo por meio de uma janela de aplicativo de desktop.
Você pode usar o Electron para configurar um aplicativo Angular para iniciar em uma janela da área de trabalho, em vez do navegador da Web normal. Você pode fazer isso usando um arquivo JavaScript dentro do próprio aplicativo.
Depois de configurar o Electron, você pode continuar o desenvolvimento como faria em um aplicativo Angular comum. As principais partes do aplicativo ainda seguirão a mesma estrutura padrão do Angular.
Como instalar o Electron como parte do seu aplicativo
Para usar o Electron, você precisa baixar e instalar o node.js e usar o npm install para adicionar o Electron ao seu aplicativo.
- Baixar e instalar node.js. Você pode confirmar que o instalou corretamente verificando a versão:
O nó também inclui npm, o gerenciador de pacotes JavaScript. Você pode confirmar que tem o npm instalado verificando a versão do npm:nó -vnpm -v - Crie um novo aplicativo Angular usando o ng novo comando. Isso criará uma pasta que contém todos os arquivos necessários para um projeto Angular trabalhar.
ng novo aplicativo eletrônico - Na pasta raiz do seu aplicativo, use npm para instalar o Electron.
npm instalar--save-dev elétron - Isso criará uma nova pasta para Electron na pasta node_modules do aplicativo.
- Você também pode instalar o Electron globalmente em seu computador.
npm instalar -g elétron
A Estrutura de Arquivos do Aplicativo Angular Electron
O Electron exigirá um arquivo JavaScript principal para criar e gerenciar a janela da área de trabalho. Esta janela exibirá o conteúdo do seu aplicativo dentro dela. O arquivo JavaScript também conterá outros eventos que podem ocorrer, como se o usuário fechar a janela.
Em tempo de execução, o conteúdo exibido virá do arquivo index.html. Por padrão, você pode encontrar o arquivo index.html dentro do src pasta e, em tempo de execução, uma cópia construída dela é criada automaticamente dentro do distância pasta.
O arquivo index.html geralmente se parece com isso:
<!doctype html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título> ElectronApp </title>
<base href="./">
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1">
<link rel="ícone" tipo="imagem/ícone x" href="favicon.ico">
</head>
<corpo>
<raiz do aplicativo></app-root>
</body>
</html>Dentro da tag do corpo há um
Como usar o Electron para abrir um aplicativo angular em uma janela da área de trabalho
Crie o arquivo main.js e configure-o para abrir o conteúdo do aplicativo dentro de uma janela da área de trabalho.
- Crie um arquivo na raiz do seu projeto chamado main.js. Nesse arquivo, inicialize o Electron para que você possa usá-lo para criar a janela do aplicativo.
const { app, BrowserWindow } = exigir('elétron'); - Crie uma nova janela da área de trabalho com uma certa largura e altura. Carregue o arquivo de índice como o conteúdo a ser exibido na janela. Certifique-se de que o caminho para o arquivo de índice corresponda ao nome do seu aplicativo. Por exemplo, se você nomeou seu aplicativo como "electron-app", o caminho será "dist/electron-app/index.html".
funçãocriarJanela() {
ganhar = novo BrowserWindow({largura: 800, altura: 800});
win.loadArquivo('dist/electron-app/index.html');
} - Quando o aplicativo estiver pronto, chame a função createWindow(). Isso criará a janela do aplicativo para seu aplicativo.
app.whenReady().then(() => {
criarJanela()
}) - No src/index.html arquivo, no base tag, altere o atributo href para "./".
<base href="./"> - Dentro pacote.json, adicione um a Principal campo e inclua o arquivo main.js como o valor. Este será o ponto de entrada para o aplicativo, para que o aplicativo execute o arquivo main.js ao iniciar o aplicativo.
{
"nome": "aplicativo eletrônico",
"versão": "0.0.0",
"a Principal": "main.js",
...
} - No .browserslistrc arquivo, modifique a lista para remover as versões 15.2-15.3 do iOS Safari. Isso evitará que erros de compatibilidade sejam exibidos no console durante a compilação.
última 1 versão do Chrome
última 1 versão do Firefox
últimas 2 versões principais do Edge
últimas 2 versões principais do Safari
últimas 2 versões principais do iOS
Firefox ESR
nãoios_saf 15.2-15.3
nãosafári 15.2-15.3 - Exclua o conteúdo padrão no src/app/app.component.html Arquivo. Substitua-o por algum conteúdo novo.
<classe div="contente">
<classe div="cartão">
<h2> Casa </h2>
<p>
Bem-vindo ao meu aplicativo Angular Electron!
</p>
</div>
</div> - Adicione algum estilo para o conteúdo no src/app/app.component.css Arquivo.
.contente {
altura da linha: 2rem;
tamanho da fonte: 1.2em;
margem: 48px 10%;
família de fontes: Arial, sem serifa
}
.cartão {
Sombra da caixa: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
largura: 85%;
preenchimento: 16px 48px;
margem: 24px 0px;
cor de fundo: fumaça branca;
família de fontes: sem serifa;
} - Adicione algum estilo geral ao src/styles.css arquivo para remover as margens e preenchimentos padrão.
html{
margem: 0;
preenchimento: 0;
}
Como executar um aplicativo eletrônico
Para executar seu aplicativo em uma janela, configure um comando na matriz de scripts de package.json. Em seguida, execute seu aplicativo usando o comando no terminal.
- Dentro pacote.json, dentro da matriz de scripts, adicione um comando para compilar o aplicativo Angular e executar o Electron. Certifique-se de adicionar uma vírgula após a entrada anterior na matriz Scripts.
"roteiros": {
...
"elétron": "ng construir && elétron."
}, - Para executar seu novo aplicativo Angular em uma janela da área de trabalho, execute o seguinte na linha de comando, na pasta raiz do seu projeto:
npm executar elétron - Aguarde a compilação do seu aplicativo. Depois de concluído, em vez de seu aplicativo Angular abrir no navegador da Web, uma janela da área de trabalho será aberta. A janela da área de trabalho mostrará o conteúdo do seu aplicativo Angular.
- Se você ainda quiser visualizar seu aplicativo no navegador da Web, ainda poderá executar o comando ng serve.
ng servir - Se você estiver usando o ng servir comando, o conteúdo do seu aplicativo ainda será exibido em um navegador da Web em localhost: 4200.
Criando aplicativos de desktop com o Electron
Você pode usar o Electron para criar aplicativos de desktop no Windows, Mac e Linux. Por padrão, você pode testar um aplicativo Angular usando um navegador da Web por meio do comando ng serve. Você pode configurar seu aplicativo Angular para também abrir em uma janela da área de trabalho em vez de um navegador da web.
Você pode fazer isso usando um arquivo JavaScript. Você também precisará configurar seus arquivos index.html e package.json. O aplicativo geral ainda seguirá a mesma estrutura de um aplicativo Angular regular.
Se você quiser saber mais sobre como criar aplicativos da área de trabalho, também poderá explorar os aplicativos Windows Forms. Os aplicativos do Windows Forms permitem que você clique e arraste elementos da interface do usuário para uma tela, ao mesmo tempo em que adiciona qualquer lógica de codificação em arquivos C#.
