octobre 22, 2018

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

Blog ARC Optimizer

. Angular 7 avec modèle SPA

Drag and Drop Feature

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

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