Electron ti consente di creare applicazioni desktop per Windows, Mac e Linux. Quando crei un'app utilizzando Electron, puoi visualizzare in anteprima ed eseguire l'app tramite una finestra dell'applicazione desktop.
Puoi utilizzare Electron per configurare un'app Angular da avviare su una finestra del desktop, invece del solito browser web. Puoi farlo utilizzando un file JavaScript all'interno dell'app stessa.
Dopo aver configurato Electron, puoi continuare lo sviluppo come faresti con una normale app Angular. Le parti principali dell'applicazione seguiranno ancora la stessa struttura angolare standard.
Come installare Electron come parte della tua applicazione
Per utilizzare Electron, devi scaricare e installare node.js e utilizzare npm install per aggiungere Electron alla tua app.
- Scarica e installa nodo.js. Puoi confermare di averlo installato correttamente controllando la versione:
Nodo include anche npm, il gestore di pacchetti JavaScript. Puoi confermare di aver installato npm controllando la versione di npm:nodo -vnpm -v - Crea una nuova applicazione Angular usando il ng nuovo comando. Questo creerà una cartella che contiene tutto il necessario file richiesti per un progetto Angular lavorare.
ng nuovo elettrone-app - Nella cartella principale della tua applicazione, usa npm per installare Electron.
npm installare--save-dev electron - Questo creerà una nuova cartella per Electron nella cartella node_modules dell'app.
- Puoi anche installare Electron a livello globale sul tuo computer.
npm installare -g elettrone
La struttura del file dell'applicazione elettronica angolare
Electron richiederà un file JavaScript principale per creare e gestire la finestra del desktop. Questa finestra mostrerà i contenuti della tua app al suo interno. Il file JavaScript conterrà anche altri eventi che possono verificarsi, ad esempio se l'utente chiude la finestra.
In fase di esecuzione, il contenuto visualizzato proverrà dal file index.html. Per impostazione predefinita, puoi trovare il file index.html all'interno del file src cartella, e in fase di esecuzione una copia compilata di essa viene creata automaticamente all'interno del file dist cartella.
Il file index.html di solito ha questo aspetto:
<!doc digita html>
<lingua html="it">
<testa>
<metacarattere="utf-8">
<titolo> ElectronApp </title>
<base href="./">
<metanome="vista" contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1">
<collegamento rel="icona" tipo="immagine/icona x" href="favicon.ico">
</head>
<corpo>
<root dell'app></app-root>
</body>
</html>All'interno dell'etichetta del corpo c'è un
Come utilizzare Electron per aprire un'applicazione angolare in una finestra del desktop
Crea il file main.js e configuralo per aprire il contenuto dell'applicazione all'interno di una finestra del desktop.
- Crea un file nella radice del tuo progetto chiamato main.js. In questo file, inizializza Electron in modo da poterlo utilizzare per creare la finestra dell'applicazione.
cost {app, finestra del browser} = richiedere("elettrone"); - Crea una nuova finestra del desktop di una certa larghezza e altezza. Carica il file indice come contenuto da visualizzare nella finestra. Assicurati che il percorso del file di indice corrisponda al nome della tua app. Ad esempio, se hai chiamato la tua app "electron-app", il percorso sarà "dist/electron-app/index.html".
funzionecrea Finestra() {
vincere = nuovo Finestra del browser({larghezza: 800, altezza: 800});
win.loadFile('dist/electron-app/index.html');
} - Quando l'app è pronta, chiama la funzione createWindow(). Questo creerà la finestra dell'applicazione per la tua app.
app.whenReady().then(() => {
creaFinestra()
}) - Nel origine/indice.html file, nel base tag, cambia l'attributo href in "./".
<base href="./"> - In pacchetto.json, aggiungere un principale campo e includi il file main.js come valore. Questo sarà il punto di ingresso per l'app, in modo che l'applicazione esegua il file main.js all'avvio dell'app.
{
"nome": "elettrone-app",
"versione": "0.0.0",
"principale": "main.js",
...
} - Nel .browslistrc file, modificare l'elenco per rimuovere le versioni di iOS Safari 15.2-15.3. Ciò impedirà la visualizzazione di errori di compatibilità nella console durante la compilazione.
ultima 1 versione di Chrome
ultima 1 versione di Firefox
ultime 2 versioni principali di Edge
ultime 2 versioni principali di Safari
ultime 2 versioni principali di iOS
Firefox ESR
nonios_saf 15.2-15.3
nonsafari 15.2-15.3 - Elimina il contenuto predefinito in src/app/app.component.html file. Sostituiscilo con qualche nuovo contenuto.
<classe div="contenuto">
<classe div="carta">
<h2> Casa </h2>
<p>
Benvenuto nella mia applicazione Angular Electron!
</p>
</div>
</div> - Aggiungi un po' di stile per il contenuto in src/app/app.component.css file.
.contenuto {
altezza della linea: 2rem;
dimensione del font: 1.2 em;
margine: 48px 10%;
famiglia di caratteri: Arial, sans-serif
}
.carta {
scatola-ombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
larghezza: 85%;
imbottitura: 16px 48px;
margine: 24px 0px;
colore di fondo: bianco fumo;
famiglia di caratteri: sans-serif;
} - Aggiungi un po' di stile generale al src/styles.css file per rimuovere i margini e i padding predefiniti.
html {
margine: 0;
imbottitura: 0;
}
Come eseguire un'applicazione elettronica
Per eseguire l'applicazione in una finestra, configura un comando nell'array di script di package.json. Quindi, esegui la tua app usando il comando nel terminale.
- In pacchetto.json, all'interno dell'array degli script, aggiungi un comando per compilare l'app Angular ed eseguire Electron. Assicurati di aggiungere una virgola dopo la voce precedente nell'array Scripts.
"script": {
...
"elettrone": "ng costruire && elettrone."
}, - Per eseguire la tua nuova applicazione Angular in una finestra del desktop, esegui quanto segue nella riga di comando, nella cartella principale del tuo progetto:
elettrone eseguito npm - Attendi la compilazione della tua applicazione. Una volta completata, invece dell'apertura dell'app Angular nel browser Web, si aprirà invece una finestra del desktop. La finestra del desktop mostrerà i contenuti della tua app Angular.
- Se desideri continuare a visualizzare la tua applicazione nel browser web, puoi comunque eseguire il comando ng serve.
ng servire - Se stai usando il ng servire comando, il contenuto della tua app verrà comunque visualizzato in un browser web all'indirizzo host locale: 4200.
Creazione di applicazioni desktop con Electron
Puoi utilizzare Electron per creare applicazioni desktop su Windows, Mac e Linux. Per impostazione predefinita, puoi testare un'applicazione Angular utilizzando un browser Web tramite il comando ng serve. Puoi configurare la tua applicazione Angular in modo che si apra anche in una finestra del desktop anziché in un browser web.
Puoi farlo usando un file JavaScript. Dovrai anche configurare i file index.html e package.json. L'applicazione complessiva seguirà comunque la stessa struttura di una normale applicazione Angular.
Se vuoi saperne di più su come creare applicazioni desktop, puoi anche esplorare le app Windows Forms. Le app Windows Forms ti consentono di fare clic e trascinare gli elementi dell'interfaccia utente su un'area di disegno aggiungendo anche qualsiasi logica di codifica nei file C#.