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.

Kendo UI for Angular peut vous aider.

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 { }