Home-theater-designers
Electron vous permet de créer des applications de bureau pour Windows, Mac et Linux. Lorsque vous créez une application à l'aide d'Electron, vous pouvez prévisualiser et exécuter l'application via une fenêtre d'application de bureau.
Vous pouvez utiliser Electron pour configurer une application Angular à lancer sur une fenêtre de bureau, au lieu du navigateur Web habituel. Vous pouvez le faire en utilisant un fichier JavaScript dans l'application elle-même.
Une fois que vous avez configuré Electron, vous pouvez poursuivre le développement comme vous le feriez sur une application Angular classique. Les parties principales de l'application suivront toujours la même structure angulaire standard.
Comment installer Electron dans le cadre de votre application
Pour utiliser Electron, vous devez télécharger et installer node.js, et utiliser npm install pour ajouter Electron à votre application.
- Télécharger et installer node.js . Vous pouvez confirmer que vous l'avez installé correctement en vérifiant la version :
Le nœud comprend également npm, le gestionnaire de packages JavaScript . Vous pouvez confirmer que vous avez installé npm en vérifiant la version npm :node -vnpm -v - Créez une nouvelle application angulaire en utilisant le de nouveau commande. Cela créera un dossier contenant tous les éléments nécessaires fichiers requis pour un projet Angular pour travailler.
ng new electron-app - Dans le dossier racine de votre application, utilisez npm pour installer Electron.
npm install --save-dev electron - Cela créera un nouveau dossier pour Electron dans le dossier node_modules de l'application.
- Vous pouvez également installer Electron globalement sur votre ordinateur.
npm install -g electron
La structure de fichier de l'application Angular Electron
Electron aura besoin d'un fichier JavaScript principal pour créer et gérer la fenêtre du bureau. Cette fenêtre affichera le contenu de votre application en son sein. Le fichier JavaScript contiendra également d'autres événements qui peuvent se produire, comme si l'utilisateur ferme la fenêtre.
A l'exécution, le contenu affiché proviendra du fichier index.html. Par défaut, vous pouvez trouver le fichier index.html dans le src dossier, et au moment de l'exécution, une copie construite de celui-ci est automatiquement créée à l'intérieur du distance dossier.
Le fichier index.html ressemble généralement à ceci :
<!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> À l'intérieur de la balise body se trouve une balise
Comment utiliser Electron pour ouvrir une application angulaire dans une fenêtre de bureau
Créez le fichier main.js et configurez-le pour ouvrir le contenu de l'application dans une fenêtre de bureau.
- Créez un fichier à la racine de votre projet nommé main.js . Dans ce fichier, initialisez Electron afin de pouvoir l'utiliser pour créer la fenêtre d'application.
const { app, BrowserWindow } = require('electron'); - Créez une nouvelle fenêtre de bureau d'une certaine largeur et hauteur. Chargez le fichier d'index comme contenu à afficher dans la fenêtre. Assurez-vous que le chemin d'accès au fichier d'index correspond au nom de votre application. Par exemple, si vous avez nommé votre application 'electron-app', le chemin sera 'dist/electron-app/index.html'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - Lorsque l'application est prête, appelez la fonction createWindow(). Cela créera la fenêtre d'application pour votre application.
app.whenReady().then(() => {
createWindow()
}) - Dans le src/index.html dossier, dans le base balise, remplacez l'attribut href par './'.
<base href="./"> - Dans package.json , ajouter un principale et incluez le fichier main.js comme valeur. Ce sera le point d'entrée de l'application, de sorte que l'application exécute le fichier main.js lors du lancement de l'application.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - Dans le .browserslistrc fichier, modifiez la liste pour supprimer les versions iOS Safari 15.2-15.3. Cela empêchera les erreurs de compatibilité de s'afficher dans la console lors de la compilation.
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 - Supprimer le contenu par défaut dans le src/app/app.component.html dossier. Remplacez-le par un nouveau contenu.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Ajoutez du style au contenu dans le src/app/app.component.css fichier.
.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;
} - Ajoutez un style général au src/styles.css fichier pour supprimer les marges et les rembourrages par défaut.
html {
margin: 0;
padding: 0;
}
Comment exécuter une application Electron
Pour exécuter votre application dans une fenêtre, configurez une commande dans le tableau de scripts de package.json. Ensuite, exécutez votre application à l'aide de la commande dans le terminal.
vidéo dxgkrnl fatal_error windows 10
- Dans package.json , à l'intérieur du tableau de scripts, ajoutez une commande pour créer l'application Angular et exécuter Electron. Assurez-vous d'ajouter une virgule après l'entrée précédente dans le tableau Scripts.
"scripts": {
...
"electron": "ng build && electron ."
}, - Pour exécuter votre nouvelle application Angular dans une fenêtre de bureau, exécutez ce qui suit en ligne de commande, dans le dossier racine de votre projet :
npm run electron - Attendez que votre application se compile. Une fois terminé, au lieu que votre application Angular s'ouvre dans le navigateur Web, une fenêtre de bureau s'ouvrira à la place. La fenêtre du bureau affichera le contenu de votre application Angular.
- Si vous souhaitez toujours afficher votre application dans le navigateur Web, vous pouvez toujours exécuter la commande ng serve.
ng serve - Si vous utilisez le de servir commande, le contenu de votre application s'affichera toujours dans un navigateur Web à hôte local : 4200.
Créer des applications de bureau avec Electron
Vous pouvez utiliser Electron pour créer des applications de bureau sur Windows, Mac et Linux. Par défaut, vous pouvez tester une application Angular à l'aide d'un navigateur Web via la commande ng serve. Vous pouvez configurer votre application Angular pour qu'elle s'ouvre également dans une fenêtre de bureau au lieu d'un navigateur Web.
Vous pouvez le faire en utilisant un fichier JavaScript. Vous devrez également configurer vos fichiers index.html et package.json. L'application globale suivra toujours la même structure qu'une application angulaire régulière.
Si vous souhaitez en savoir plus sur la création d'applications de bureau, vous pouvez également explorer les applications Windows Forms. Les applications Windows Forms vous permettent de cliquer et de faire glisser des éléments d'interface utilisateur sur un canevas tout en ajoutant une logique de codage dans les fichiers C#.