L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
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:
Création de l'application angulaire à l'aide du modèle .NET Core 2.1 dans VS 2017
Une fois ces éléments installés, ouvrez Visual Studio 2017 -> Créer un nouveau projet. -> Sélectionner une application Web principale:
Cliquez sur" OK "et sur , dans la fenêtre suivante, sélectionnez Angular comme indiqué ci-dessous:
Visual Studio créera une application bien structurée. pour vous, qui se trouve actuellement dans Angular 5.
Angular 7
Si vous ouvrez le fichier package.json dans le dossier ClientApp, vous remarquerez que la version angulaire est 5.2, mais nous souhaitons créer une application Angular 7.
Allez donc dans l'explorateur de fichiers et supprimez le dossier ClientApp.
Une fois le dossier supprimé, ouvrez la ligne de commande, naviguez jusqu'au projet et exécutez la commande suivante:
nouveau ClientApp [19659004] Cette commande créera une toute nouvelle application Angular avec la dernière version (7):
C'est tout. Nous venons de créer une application Angular 7.
Exécutez l'application à l'aide de la commande ng serve :
Principales caractéristiques de Angular 7
Examinons quelques-unes des principales caractéristiques publiées avec Angular 7.
La CLI est plus parlante
À partir de Angular 7, la CLI vous proposera les utilisateurs lorsque nous exécutons les commandes telles que ng new ou ng add pour aider l'utilisateur à choisir des fonctionnalités telles que le routage, le support SCSS, etc. data-displaymode = "Original" title = "CLI angulaire parlative" />
Comme vous pouvez le voir ci-dessus, vous pouvez répondre en oui / non ou en sélectionnant l'option à l'aide des touches de direction haut / bas.
Matériel angulaire Améliorations
Le Kit de développement de composants (CDK) a été amélioré et nous pouvons maintenant utiliser des fonctionnalités telles que le défilement virtuel et le glisser-déposer. Voyons comment procéder avec Angular 7.
Installation du matériau angulaire
Commençons par installer Matériau angulaire à l'aide de la commande ci-dessous:
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 :
Vous trouverez plus de détails [Défilementvirtuel
Nous pouvons faire du défilement virtuel en utilisant Angular Material avec la version 7. Il est ainsi possible de charger et décharger les éléments DOM en fonction de la taille d'affichage. expérience pour l'utilisateur même si la liste déroulante est énorme.
Pour cela, nous devons d'abord ajouter le ScrollDispatchModule dans app.component.ts comme ci-dessous:
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 :
Plus de détails peuvent être trouvés 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 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"
]
"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 :
- Angular Console - A console téléchargeable pour le démarrage et l'exécution de projets angulaires sur votre machine locale
- @ angular / fire - AngularFire a un nouveau répertoire sur npm et son premier lancement stable pour Angular
- [1 9459008] NativeScript - Il est maintenant possible d'avoir un seul projet qui construit à la fois pour le Web et les appareils mobiles avec NativeScript
- StackBlitz - StackBlitz 2.0 a été publié et inclut maintenant le service de langue angulaire ainsi que d'autres fonctionnalités telles que l'édition par onglets
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:
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