Angulaire sur le bureau

Les développeurs ont la possibilité d'apporter la bonté angulaire aux applications de bureau.

Parlons Angular—l'une des plates-formes de développement d'applications Web modernes les plus populaires. Avec une longue histoire, des outils matures et un écosystème de développeurs riche, il n'est pas difficile de comprendre pourquoi Angular est le framework SPA de choix pour la création d'applications Web/mobiles modernes.

Cependant, comment Angular fonctionne-t-il pour les applications de bureau ? La réponse logicielle classique s'applique, cela dépend. Il existe des stratégies de partage de code avec le Web, mais cela dépend également beaucoup du type d'application en cours de création et des intégrations de bureau souhaitées.

Les PWA et Electron.JS sont des moyens établis d'apporter du code Web aux applications de bureau, et ce sont tous les deux bonnes options pour Angular. Pour les développeurs .NET, .NET MAUI est la plate-forme de nouvelle génération pour la création d'applications multiplateformes natives pour mobile et ordinateur de bureau. Et avec les applications hybrides Blazor, le code Blazor pour les applications Web est le bienvenu dans .NET MAUI pour mobile/bureau. applications avec JS sur le front-end – l'un de ces investissements peut-il être transféré à .NET MAUI ? Parlons d'Angular, mais les moyens d'activer les applications de bureau avec les technologies Web devraient être à peu près les mêmes quel que soit le framework JS, donc React, Vue et d'autres devraient également se sentir les bienvenus.

Bonté angulaire sur le bureau, faisons-le. Cet article a été écrit et publié dans le cadre de l'2021 C# Advent.

Commencer correctement

Si vous êtes nouveau dans le monde Angular, l'un des meilleurs moyens de commencer est le CLI angulaire. Les conditions préalables à la construction avec Angular sont une version LTS Node.js pour le runtime et npm pour les dépendances. Il est facile d'installer globalement l'outil Angular CLI, comme ceci :

npm install -g @angular/cli

Nous pouvons ensuite lancer une nouvelle application Angular. Le modèle vous guide à travers quelques paramètres avant de créer le projet.

L'outil Angular CLI installe les packages npm angulaires nécessaires et d'autres dépendances. Une fois cela fait, nous pouvons naviguer à l'intérieur du projet et voir tout le code/les configurations.

Prêt à exécuter votre application Angular localement ? La commande Serve compile l'application en mémoire, se lance le serveur et surveille les fichiers locaux pour déployer les composants modifiés de l'application.

Voilà. C'est comme ça qu'il est facile de commencer à créer des applications Web modernes avec Angular. Et pendant que vous commencez, cela peut valoir la peine d'obtenir des munitions d'interface utilisateur pour offrir une bonne expérience utilisateur et de bonnes performances : Kendo UI for Angular peut vous aider.

Kendo UI for Angular fournit des composants pour répondre aux exigences des applications en matière de gestion des données, de performances, d'UX, de conception, d'accessibilité et bien plus encore : plus de 100 composants entièrement natifs pour créer une interface utilisateur angulaire moderne de haute qualité en un rien de temps.

Maintenant que nous avons une application Web Angular de base en cours d'exécution, parlons des options pour obtenir cette qualité angulaire sur les applications de bureau.

Angular as PWA[19659008]L'un des moyens les plus simples pour qu'une application Web fonctionne sur un ordinateur de bureau est PWA : les applications Web peuvent devenir progressivement de meilleurs citoyens sur les plates-formes mobiles/de bureau. fonctionnalités : être installable sur le bureau et demander aux techniciens d'assistance d'apporter une assistance hors ligne, des notifications push, un accès au matériel, etc. quelques éléments dans une application Angular existante : un nouveau fichier manifeste est déposé et indique au navigateur comment l'application doit se comporter lorsqu'elle est installée par l'utilisateur. L'ensemble de démarrage contient une variété d'icônes d'application à épingler sur l'écran d'accueil, la barre tactile et plus encore – les icônes par défaut sont ajoutées à un répertoire Assets.[19659022]{
"nom": "angularpwa",
"short_name": "angularpwa",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"afficher": "autonome",
"portée": "./",
"start_url": "./",
"icônes": [
{
« src »: « assets/icons/icon-72×72.png »,
« sizes »: « 72×72 »,
« type »: « image/png »,
« purpose »: « maskable any »
},
{
« src »: « assets/icons/icon-96×96.png »,
« sizes »: « 96×96 »,
« type »: « image/png »,
« purpose »: « maskable any »
},
…
…
]
}

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups" : [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "nom": "actifs",
      "installMode": "paresseux",
      "updateMode": "prélecture",
      "Ressources": {
        "fichiers": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version 1,
  "newProjectRoot": "projets",
  "projets": {
    "angularpwa": {
      "projectType": "application",
      "schémas": {
        "@schematics/angular:application": {
          "strict": vrai
        }
      },
      "racine": "",
      "sourceRoot": "src",
      "préfixe": "application",
      "architecte": {
        "construire": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularpwa",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "actifs": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scénarios": [],
            "serviceWorker": vrai,
            "ngswConfigPath": "ngsw-config.json"
          },
          "configurations": {
            "production": {
              « budgets » : [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "serviceWorker": vrai,
              "ngswConfigPath": "ngsw-config.json"
            },
            ...
            ...
          }
        }
      }
    }
  }
}

import { NgModule } de '@angular/core' ;
importer { BrowserModule } depuis '@angular/platform-browser' ;

importer { AppRoutingModule } de './app-routing.module';
importer { AppComponent } de './app.component' ;
importer { ServiceWorkerModule } de '@angular/service-worker' ;
importer { environnement } de '../environments/environment' ;

@NgModule({
  déclarations : [
    AppComponent
  ],
  importations : [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  fournisseurs : [],
  bootstrap : [AppComponent]
})
export class AppModule { }

 npm i -g http-server
http-server -p 8080 -c-1

npm install electron@latest --save-dev

const {
    application,
    Fenêtre du navigateur
    } = require('électron')
  const url = require("url");
  const chemin = require("chemin");

  laisser appWindow

  function initWindow() {
    appWindow = new BrowserWindow({
      largeur: 1000,
      hauteur : 800,
      Préférences Web : {
        nodeIntegration : vrai
      }
    })

    appWindow.loadURL(
      url.format({
        chemin d'accès : chemin.join(__dirname, `/dist/index.html`),
        protocole : "fichier : ",
        barres obliques : vrai
      })
    );

    appWindow.on('fermé', fonction () {
      appWindow = null
    })
  }

  app.on('prêt', initWindow)

  app.on('fenêtre-tout-fermé', fonction () {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activer', fonction () {
    if (gagner === null) {
      initWindow()
    }
  })

{
  "nom": "électron angulaire",
  "version": "0.0.0",
  "main": "app.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  ...
  ...
}

appWindow.webContents.openDevTools()

    
        <!-- 
            
         -->
    

dotnet build -t:Run -f net6.0-ios

dotnet build -t:Run -f net6.0-maccatalyst