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 correctement installé 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 de npm :nœud -vnpm-v - Créez une nouvelle application angulaire en utilisant le nouveau commande. Cela créera un dossier contenant tous les éléments nécessaires fichiers requis pour un projet Angular travailler.
ng Nouveau application électronique - Dans le dossier racine de votre application, utilisez npm pour installer Electron.
npm installer--save-dev électron - 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 installer -g électron
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="fr">
<tête>
<meta charset="utf-8">
<Titre> ElectronApp </title>
<base href="./">
<méta nom ="fenêtre" contenu="width=device-width, initial-scale=1">
<lien rel="icône" taper="image/icône x" href="favicon.ico">
</head>
<corps>
<racine de l'application></app-root>
</body>
</html>À l'intérieur de la balise body se trouve un
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 de l'application.
constante { application, BrowserWindow } = exiger('électron'); - 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".
fonctioncréerFenêtre() {
gagner = Nouveau NavigateurFenêtre({largeur: 800, la taille: 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() => {
créerFenêtre()
}) - 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.
{
"Nom": "application électronique",
"version": "0.0.0",
"principale": "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.
1 dernière version de Chrome
1 dernière version de Firefox
2 dernières versions majeures d'Edge
2 dernières versions majeures de Safari
2 dernières versions majeures d'iOS
Firefox ESR
ne pasios_saf 15.2-15.3
ne passafari 15.2-15.3 - Supprimer le contenu par défaut dans le src/app/app.component.html dossier. Remplacez-le par du nouveau contenu.
<classe div="contenu">
<classe div="carte">
<h2> Maison </h2>
<p>
Bienvenue dans mon application Angular Electron !
</p>
</div>
</div> - Ajoutez du style au contenu dans le src/app/app.component.css dossier.
.contenu {
hauteur de ligne: 2 rem ;
taille de police: 1.2em;
marge: 48px 10% ;
famille de polices: Arial, sans empattement
}
.carte {
boîte ombre: 0 4pixels 8pixels 0 RVB(0, 0, 0, 0.2);
largeur: 85 % ;
rembourrage: 16px 48px ;
marge: 24px 0px ;
couleur d'arrière-plan: fumée blanche ;
famille de polices: sans empattement ;
} - Ajoutez un style général au src/styles.css fichier pour supprimer les marges et les remplissages par défaut.
html {
marge: 0 ;
rembourrage: 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.
- 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.
"scénarios": {
...
"électron": "ng construire && électron."
}, - 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 :
électron de course npm - 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 servir - Si vous utilisez le ng 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#.
