Novembre 2017
Volume 33, numéro 11
Cet article a fait l'objet d'une traduction automatique.
Le programmeur au travail - Comment être MEAN : Formulaires Angular
Par Ted Neward | Novembre 2017
.jpg "Ted Neward")
Bienvenue à nouveau, MEANers.
Tout tout au long de cette série, l’accent est mis sur angulaire ; en particulier, à l’aide angulaire pour afficher les données et transporter par plusieurs pages. Comme le navigateur Web est conçu pour être en mesure d’afficher des données, toutefois, il est également prévu pour être en mesure de recueillir des données et de passer au serveur, et jusqu'à présent, qui a été manquant dans la discussion.
Angulaire certainement peut capturer les données via des formulaires, mais c’est une touche difficile, non seulement dans la syntaxe de création et la définition du formulaire de navigateur, mais dans un aspect particulier du comportement sous-jacent, ce qui vous passerez en revue ultérieurement. Mais nous allons pas le panier d’achat avant le cheval. Temps de parler d’une définition du formulaire simple et de capture.
Composants formés
Dans les colonnes précédentes, j’ai parlé comment vous pouvez lier les instructions « modèle » (pour utiliser la terminologie angulaire) offerts par un composant angulaire dans les événements. L’exemple le plus courant qui capture l’événement de clic sur un élément < button > pour appeler une méthode sur un composant angulaire :
<button (click)="console.log('Clicked')">Push me!</button>
Dans et de lui-même, cela est approprié, mais il ne fournit pas toute installation pour capturer l’entrée — pour que cela soit utile pour l’entrée de données, une des deux choses doit se produire : Le code dans le composant a la possibilité pour les contrôles sur la page à l’intérieur du composant (c'est-à-dire que ASP.NET Web Forms, parmi d’autres infrastructures, faire), ou que le code appelé doit être en mesure de recevoir les données d’entrée en tant que paramètre de référence. Toutefois, cela peut prendre deux formes différentes.
Premier et plus générique, l’instruction de modèle angulaire peut référencer l’objet $event, qui est essentiellement des objets d’événement du DOM, générés pendant la session utilisateur. Cela nécessite simplement faisant référence au paramètre dans le cadre de l’instruction, telles que :
<button (click)="capture($event)" >Save</button>
L’inconvénient, toutefois, est que l’objet passé est l’événement DOM représentant l’action de l’utilisateur ; Dans ce cas, un MouseEvent le suivi de l’emplacement sur l’écran où le clic de souris a été effectué et il ne capture réellement l’état des autres éléments sur la page. Il serait certainement possible de naviguer dans la hiérarchie du DOM pour rechercher les éléments de contrôle et de l’extraction des valeurs à partir de celles-ci, il est également pas vraiment la façon angulaire. Les composants doivent être isolées en s’éloignant de DOM, et l’instruction de modèle doit être en mesure d’obtenir les données dont il a besoin et passer à une méthode sur le composant à utiliser.
Cette approche suggère qu’angulaire a besoin d’un moyen d’identifier les champs d’entrée dans la page, afin que l’instruction de modèle peut extraire des valeurs et les transmettre. La nécessité d’être en mesure d’identifier l’élément de formulaire prend la forme d’un « identificateur » sur l’élément < input > lui-même, ce qui angulaire appelle une « variable de référence modèle ». Comme certains des autres syntaxes angulaire, il utilise délibérément la syntaxe qui ne ressemble pas à HTML :
<input #firstName>
Cela sera créer un champ d’entrée au format HTML, conformément à la balise HTML normale du même nom, mais ensuite introduire une nouvelle variable dans l’étendue du modèle, appelée firstName, ce qui peut être référencé à partir de l’instruction de modèle liée à un événement à partir d’un champ, comme suit :
<button (click)="addSpeaker(firstName, lastName)" >Save</button>
Cela est assez explicite : Sur un bouton, cliquez sur, appeler la méthode addSpeaker du composant, en passant les variables firstName et lastName, en conséquence, comme indiqué dans Figure 1.
Figure 1, appelez la méthode addSpeaker
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-speaker-edit',
templateUrl: './speaker-edit.component.html',
styleUrls: ['./speaker-edit.component.css']
})
export class SpeakerEditComponent implements OnInit {
constructor() { }
ngOnInit() { }
addSpeaker(fname: string, lname: string) {
console.log("addSpeaker(", fname, ",", lname, ")")
}
}
Toutefois, écrit comme suit, ce qui s’affiche dans la console du navigateur n’est pas les chaînes attendus de l’entrée ; au lieu de cela, les valeurs telles que < _ngcontent d’entrée-FRC-2 > affichent à la place de chacune de ces valeurs. C’est pour une raison simple : La console du navigateur retourne les représentations sous forme angulaires réelles de l’élément DOM, plutôt que les données d’entrée qui a été tapées dans. La solution qui est tout aussi simple : Rendre permet d’obtenir les données, l’utilisateur a entré dans de la propriété « value » de chaque côté de l’instruction de modèle.
Par conséquent, si j’ai besoin de créer un composant de création de nouveaux haut-parleurs, je peux créer un composant qui affiche deux champs < input >, un bouton < > qui a un (clic) qui appelle addSpeaker, en passant firstName.value et lastName.value et que vous utilisez cette méthode à appeler le SpeakerService (à partir d’un article précédent) pour l’enregistrer dans la base de données. Mais ce concept de « création d’un nouvel utilisateur » est conceptuellement très proche « un haut-parleur existant, Édition « tellement ainsi que certaines bases de données modernes ont commencé à communiquer sur les opérations d’insertion et de mise à jour comme étant essentiellement le même : l’upsert. Il peut être très intéressant et orienté composant, si le composant SpeakerEdit pourrait servir en tant que créer ou modifier dans le même composant.
Grâce à la puissance des @Input et directives de @Output que vous l’avez vu précédemment, il s’agit en fait assez facile à faire. Ajouter un champ de @Input pour le haut-parleur pour être passés dans et un champ @Output pour permettre aux utilisateurs de savoir quand l’utilisateur clique sur Enregistrer. (Ce dernier n’est pas nécessaire, si vous apportez à la décision qui enregistre toujours le composant SpeakerEdit à la base de données, et il n’existe aucune autre action par un client du composant jamais faire. Ce serait une conversation hautement contextuelle dans la réunion d’équipe.)
Cela laisse me Nouveautés Figure 2 pour le code du composant SpeakerEdit.
Figure 2 le composant SpeakerEdit
export class SpeakerEditComponent implements OnInit {
@Input() speaker: Speaker;
@Output() onSave = new EventEmitter<Speaker>();
constructor(private speakerService: SpeakerService) { }
ngOnInit() {
if (this.speaker === undefined) {
this.speaker = new Speaker();
}
}
save(fn: string, ln: string) {
this.speaker.firstName = fn;
this.speaker.lastName = ln;
this.onSave.emit(this.speaker);
}
}
Et, comme vous pourriez vous attendre donné mes compétences en matière de conception, le modèle est réduite automatique mais fonctionnel :
<div>
Speaker Details: <br>
FirstName: <input #firstName><br>
LastName: <input #lastName><br>
<button (click)="save(firstName.value, lastName.value)">Save</button>
</div>
Là encore, notez qu’utiliser la « valeur » pour extraire les valeurs de chaîne en dehors des champs d’entrée firstName et lastName.
(Dans cet exercice, à partir de la AppComponent principal) à l’aide de ce composant est assez simple :
<h3>Create a new Speaker</h3>
<app-speaker-edit (onSave)="speakerSvc.save($event)"></app-speaker-edit>
Dans ce cas, j’ai choisi de ne pas enregistrer le haut-parleur de dans le composant, mais les clients à le faire à partir de l’événement émis. L’objet speakerSvc est un SpeakerService par injection de dépendance, à partir de l’article précédent sur la création de services dans angulaire (msdn.microsoft.com/magazine/mt826349).
Voici les composants réutilisables achète vous : La capacité de créer l’interface utilisateur « contrôles » qui vous pouvez ensuite déplacer et utiliser simplement, plutôt que se soucier de leur fonctionnement en interne.
Déclenchement d’événements
Il peut être intéressant de conclusion ici, mais il existe un piège n sur les événements dans angulaire qui mérite une attention particulière. Il est assez courant pour les développeurs à intercepter des éléments tels que les séquences de touches et réagir les données entrées, par exemple, pour afficher des suggestions de saisie semi-automatique des valeurs. Les événements DOM classiques à ce sont des méthodes telles qu’onBlur ou onKeyUp. Par exemple, qu'il peut être intéressant effectuer le suivi de chaque séquence de touches et les afficher comme l’utilisateur tape. Les développeurs à angulaire peuvent s’y attendre cela fonctionne :
@Component({
selector: 'loop-back',
template: `
<input #box>
<p>{{box.value}}</p>
`
})
export class LoopbackComponent { }
Lorsque vous exécutez, toutefois, ce code n’affichera pas chaque caractère telle qu’elle est tapée, en fait, il allez ne rien faire du tout. Il s’agit, car angulaire ne déclenche des événements, sauf si le navigateur déclenche un événement. Pour cette raison, angulaire a besoin d’un événement se déclenche, même si le code qui se déclenche est dans ce cas une non-opération complète, telles que l’instruction de modèle 0, comme dans :
@Component({
selector: 'loop-back',
template: `
<input #box (keyup)="0">
<p>{{box.value}}</p>
`
})
export class LoopbackComponent { }
Notez que la liaison de « keyup ». Cela indique angulaire pour enregistrer des événements clés sur l’élément d’entrée, et qui permet d’angulaire pour déclencher des événements, qui met ensuite à jour de la vue. Il est un peu plus difficile à utiliser au départ, mais cette façon angulaire n’est pas d’interrogation pour n’importe quel type d’événement tout le temps et, par conséquent, ne doit pas consommer aussi grand nombre de cycles de processeur.
Pour résumer
Certains développeurs Web expérimentés peut se trouver toutes un peu confus et incorrects : « Pourquoi ne pouvons pas nous simplement revenir au formulaire HTML vieille de bonne ? » La façon d’angulaire n’est pas toujours évidente, mais de nombreuses manières, une fois que le raisonnement et les raisons clair, ils sont généralement faciles à comprendre et raisonnable. Dans ce cas particulier, l’angulaire consiste à adopter le concept de composants et pensez en termes de construction utilisable « construit » qui savent comment capturer des entrées et de le traiter. Cela permet à un degré de souplesse qui n’a pas été réellement présent dans le « Web ancien » façon de penser, telles qu’avoir plusieurs de ces composants sur une seule page. (Lorsque vous devez actualiser la page entière pour afficher les résultats, vous obtenez ainsi un cycle d’entrée-validation-save-rendu par les conditions d’entrée.)
Toutefois, il existe certains autres problèmes, tels que le fait de savoir comment mettre à jour les autres parties du système lorsqu’un utilisateur modifie un haut-parleur existant. Angulaire dispose d’une solution pour cela, mais il existe quelques étapes supplémentaires pour atteindre avant d’être en mesure d’obtenir dans le monde de programmation réactive. Étirement accueil est près, bien que, par conséquent, respectez avec me pour un certain nombre. Mais, comme toujours, ils sont en entre-temps... Amusez-vous !
Ted Neward* est consultant de polytechnology de basée à Seattle, haut-parleur et un responsable, chargée en tant que le directeur des Relations de développeur à Smartsheet.com. Il a écrit une multitude d’articles, créés et écrit une dizaine d’ouvrages et fonctionne dans le monde entier. Contacter à l’adresse ted@tedneward.com ou lire son blog à adresse blogs.tedneward.com.*
Merci à l'expert technique Microsoft suivant d'avoir relu cet article : James Bender