Site icon Blog ARC Optimizer

Création d'une application angulaire 7 avec ASP.NET Core


Angular 7 vient d'arriver. Neel Bhat fournit un guide pas à pas pour la création d'une application Angular 7 à l'aide de modèles ASP.NET Core SPA dans Visual Studio 2017.

Enfin, nous avons une nouvelle version majeure d'Angular, la version 7. utiliser le mot «enfin» n’est pas simplement dû au fait que les gens attendaient la dernière version majeure d’Angular, mais aussi au fait qu’il y avait beaucoup de rumeurs sur les fonctionnalités offertes par Angular 7. Surtout depuis que l'article du Poisson d'Avril publié sous le titre " Les 4 principaux changements à venir dans Angular 7.0 ."

L'équipe angulaire a officiellement annoncé Angular 7 il y a quelques jours à peine, et Angular 7 a a introduit quelques fonctionnalités assez impressionnantes, telles que des améliorations du matériau angulaire, des améliorations de performances et des améliorations de la CLI, pour en nommer quelques-unes.

Dans cet article:

  • nous verrons comment créer des applications Angular 7 avec ASP. Modèle NET Core SPA
  • Nous verrons également les fonctionnalités introduites dans cette version majeure
  • . Je vais vous présenter certaines des fonctionnalités de matériau angulaire introduites avec Angular 7

. Angular 7 avec modèle SPA

Voyons d’abord comment procéder. créer une application Angular 7 avec des modèles ASP.NET Core SPA à l'aide de Visual Studio 2017 . Il existe plus d'une manière de créer une application Angular 7 avec .NET Core, mais examinons celle-ci.

Assurez-vous d'avoir installé Visual Studio 2017 et le dernier SDK .NET Core, ainsi que le dernière version de Node.

Dans cette approche, nous allons utiliser le modèle angulaire avec ASP .NET Core.

Avant de commencer, mettons à jour notre CLI angulaire avec la version 7. Pour cela, Ouvrez l'invite de commande et exécutez la commande suivante:

npm i -g @ angular / cli

Une fois que vous avez terminé, votre CLI sera mise à jour vers la version 7:

 Angular CLI "data -displaymode = "Original" title = "CLI angulaire" /> </p>
<h3> Création de l'application angulaire à l'aide du modèle .NET Core 2.1 dans VS 2017 </h3>
<p> Une fois ces éléments installés, ouvrez Visual Studio 2017 -> Créer un nouveau projet. -> Sélectionner une application Web principale: </p>
<p> <img decoding=

npm install --save @ angular / material @ angular / cdk @ angular / animations

Une fois terminé, ajoutez le BrowserAnimationsModule dans app.component.ts: [1965901]. ]

import {BrowserAnimationsModule} depuis '@ angular / platform-browser / animations' ;

@NgModule ( {

...

importations: [BrowserAnimationsModule]

...

})

Voilà, nous sommes prêts à utiliser Angular Material avec Angular 7.

Drag and Drop Feature

Je me souviens de certaines questions de StackOverflow à ce sujet, et personnellement je le souhaitais ferait partie de la matière. À partir de 7 angulaires, nous pourrons glisser-déposer en utilisant Matériau. Nous pouvons maintenant faire glisser des éléments horizontalement, verticalement, d'une liste à une autre, réorganiser la liste, ouvrir des éléments déplaçables, etc.

Pour cela, nous devons d'abord ajouter le DragDropModule dans app.component. ts comme ci-dessous:

import {DragDropModule} de '@ angular / cdk / drag-drop' ;

@NgModule ({ [{19459018] [19659002] ...

importations: [DragDropModule]

...

. })

Créons un glisser-déposer horizontal. Pour cela, ajoutez le code ci-dessous dans app.coponent.html:

<div cdkDropList cdkDropListOrientation = "horizontal" class = "liste-exemples" (cdkDropListDropped) [ "drop ($ event)" >

<div class = "exemple-boîte" * ngFor = "let timePeriod of timePeriods" cdkDrag> {{timePeriod}}

Ensuite, nous aurons besoin des timePeriods . Pour cela, ajoutez le code ci-dessous dans app.component.ts:

timePeriods = [

"L'âge du bronze"

] 'Âge du fer'

'Le Moyen Age'

'Le début de la période moderne'

'Long XIXe siècle'

]

drop (événement: CdkDragDrop [19459027)]) {

moveItemInArray ( this . TimePeriods, event.previousIndex, event.currentIndex);

}. 19659060] Nous sommes tous prêts. Maintenant, exécutez l’application avec ng serve :

import {ScrollDispatchModule} à partir de . ] '@ angular / cdk / scrolling' ;

@NgModule ({

...

importations: [ScrollDispatchModule]

...

]

Ajoutons le défilement virtuel à notre Angulaire 7 app. Pour cela, ajoutez le code ci-dessous dans app.coponent.html:

<cdk-virtual-scroll-viewport itemSize = "50" class = "example-viewport" >

<div * cdkVirtualFor = "Objet laissé" classe = "exemple-objet" > {{item}} ]

Ensuite, nous aurons besoin des objets. Pour cela, ajoutez le code ci-dessous dans app.component.ts:

items = Array.from ({length: 100000}). Map ((_, i) => `Item # $ {i}`) ;

C'est ça. Maintenant, lancez l'application avec ng serve :

here .

Possibilité d’utiliser Native Select dans un matériau angulaire

À partir de Angular 7, le matériau angulaire permettra d’utiliser Native dans un . Nous savons que cette sélection est puissante et puissante. est un élément natif, natif présente certains avantages en termes de performances, d'accessibilité et de convivialité par rapport à mat-select. Il serait donc agréable d'utiliser natif .

Amélioration des performances de la production

L'équipe Angular a remarqué erreur courante où les développeurs ajoutaient polyfill reflect-metadata dans la production, bien que cela ne soit nécessaire que dans le développement.

Ainsi, à partir de Angular 7, il sera automatiquement supprimé de polyfills.ts. Vous pouvez l'ajouter comme étape de construction pendant que en cours d'exécution en mode de développement.

Fonctionnalité de budget d'ensemble [1 9659018] Avec cela, si votre paquet est supérieur à 2 Mo -> vous serez averti par l'application, et si le paquet est supérieur à 5 Mo -> vous obtiendrez une erreur par l'application. Mais comme il est configurable, vous pouvez modifier les paramètres à partir du fichier angular.json:

"budgets" : [{

"type" : [19659053] "initial"

"maximumAvertissement" : "2mb"

"maximumError" : "5mb"

]

Ainsi, nous nous habituerons à créer des applications avec une taille de paquet aussi faible que possible.

Voici quelques-unes des fonctionnalités principales d'Angular 7. Citons rapidement quelques fonctionnalités supplémentaires fournies avec Angular 7, mentionnées par Stephen Fluin dans son blog :

Enfin, si vous souhaitez mettre à niveau votre application angulaire existante vers Angular 7 l'équipe d'angular l'a fait étape plus facile. Il suffit d’exécuter la commande ci-dessous:

ng update @ angular / cli @ angular / core

C’est un moyen très rapide de mettre à niveau.

Cliquez ici pour vérifier plus de détails. mise à niveau si vous avez une grosse application:

https://update.angular.io/

Vous pouvez trouver le code source de l'application que j'ai créée avec Angular 7 ici .


Vous cherchez plus d’informations sur tout ce qui est nouveau dans Angular 7? Vous pouvez en savoir plus sur les nouveautés de Angular 7 ici et si vous recherchez de beaux composants d'interface utilisateur conçus pour Angular pour accélérer votre développement, n'oubliez pas de consulter Kendo UI for Angulaire .


Les commentaires sont désactivés en mode aperçu.




Source link
Quitter la version mobile