Création de composants dans Angular 2 avec TypeScript et ES5

Points de base

• Angular 2.0 utilise TypeScript (un sur-ensemble de JavaScript) pour optimiser les performances, améliorer la vitesse de la page et l'automatisation du flux de travail. TypeScript permet aux développeurs d'utiliser des informations de type pour annoter le code JavaScript, aidant ainsi à attraper des erreurs dans la base de code.
• Angular 2.0 introduit le concept de composants, qui sont des blocs de code réutilisables qui contiennent des vues et de la logique. Les composants remplacent les instructions comme l'élément principal du cadre, garantissant qu'une partie du code de l'application n'interfère pas avec une autre partie du code.
• Création de composants dans Angular 2.0 Utilisation de TypeScript implique de définir des classes de composants et d'importer les fonctions nécessaires d'Angular. Ensuite, décorez la classe avec le décorateur @component et exportez-la pour une utilisation dans d'autres parties de l'application.
• Angular 2.0 prend également en charge ES5, qui est la version JavaScript standard qui s'exécute dans la plupart des navigateurs. Pour créer des composants utilisant ES5 dans Angular 2.0, les développeurs peuvent utiliser des méthodes sur des objets NG pour définir des composants et ajouter des fonctionnalités. Ensuite, vous pouvez exécuter le code directement dans le navigateur sans avoir besoin d'un serveur.

Cet article a été examiné par Stephan Max, Jeff Smith et Ravi Kiran. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!

À l'approche de la fin de l'année, l'équipe angulaire est plus proche que jamais de publier une version stable d'Angular 2.0. Cela remodelera la façon dont les applications angulaires sont développées, mais auront de meilleurs résultats. Dans cet article, je vais vous montrer certains des concepts de base d'Angular 2.0 et comment les utiliser. Plus précisément, je vous guiderai à travers le processus de construction de composants Angular 2 du début à la fin. Tout d'abord, nous allons en savoir plus sur la façon de le faire avec TypeScript, puis nous migrerons le composant angulaire afin qu'il puisse être exécuté avec Pure ES5.

Le code de ce tutoriel peut être trouvé dans notre base de code GitHub. La base de code a deux branches, une pour la version TypeScript et une pour la version ES5. Si vous souhaitez cloner une branche spécifique, utilisez git clone <url> --branch <branch></branch></url>.

Que sont les composants?

L'utilisation des composants en JavaScript a considérablement augmenté au cours des derniers mois. Ils sont utilisés dans des projets comme React, Knockout, Ember et plus encore, il n'est donc pas surprenant qu'Angular les intègre dans la version 2.0. La modularité du code a toujours été au centre de l'équipe angulaire, et l'utilisation de composants le souligne car ils nous permettent de casser le code en blocs encapsulés.

Alors, quelles sont les composants? Il s'agit essentiellement d'un morceau de code qui peut être réutilisé tout au long de l'application. Il contient deux parties: vue et logique. En tirant parti de l'attention de l'équipe de développement angulaire aux composants, nous pouvons profiter de certaines fonctionnalités très puissantes. Angular 2 facilite la création d'applications dynamiques composées de différents composants qui ont remplacé les instructions comme noyau du cadre. Dans Angular 2, les directives sont des composants légers qui ne sont utilisés que pour ajouter des fonctionnalités au DOM. Désormais, les développeurs angulaires n'ont pas à se soucier de gâcher leurs applications en raison de problèmes de conflit liés à l'isolement de $ Scope. Au lieu de cela, l'utilisation de composants est un moyen de s'assurer qu'une partie du code de l'application n'interfère pas avec une autre partie du code.

TypeScript

Angular 2.0 a été créé pour utiliser TypeScript, qui est un superset de JavaScript. Les développeurs angulaires ont passé beaucoup de temps à terminer cette version. Ils travaillent dur pour optimiser les performances, y compris la vitesse de la page et l'automatisation du flux de travail. TypeScript est similaire à d'autres transcodeurs, permettant aux développeurs d'écrire du code qui peut être facilement converti en JavaScript valide. Cela étant dit, il est devenu plus populaire au cours de la dernière année, donc l'équipe angulaire a décidé de l'utiliser pour créer des cadres.

L'un des avantages de l'utilisation de TypeScript est son système de type, qui permet aux développeurs de commenter JavaScript à l'aide d'informations de type. Ce code annoté exécutera le compilateur, ce qui aide à attraper des erreurs qui se cachent autrement dans la base de code en attendant la découverte de l'utilisateur. Jetons maintenant un œil à l'application pratique de TypeScript.

Ci-dessous, j'ai extrait un exemple de l'article de TJ Van Toll "The Rise of TypeScript". Dans cette fonction, nous constatons que les paramètres de hauteur et de largeur doivent être des types numériques. : number Avant que le corps de fonction spécifie le type de retour, qui est également un type numérique. Par conséquent, tout contenu non numérique transmis à cette fonction fera lancer le compilateur à un temps de compilation.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Les déclarations de type nous aident à documenter les API et à rendre notre code plus facile à maintenir au fil du temps.

Installation

Le processus de compilation de typescript en javascript est très simple. Obtenez d'abord le package TypeScript de NPM:

npm install -g typescript

Une fois l'installation terminée, compiler TypeScript en javascript est aussi simple que d'exécuter la commande suivante à partir de la ligne de commande (le fichier TypeScript est enregistré avec l'extension .ts):

tsc <filename.ts>

Maintenant, voyons comment Angular 2 peut tirer parti de la puissance de TypeScript pour créer facilement des composants personnalisés. Le code de notre premier exemple peut être trouvé dans la branche TypeScript de notre base de code GitHub.

Créer des composants dans TypeScript

Parce que TypeScript est un superset de JavaScript, tout JavaScript valide peut fonctionner correctement dans les fichiers .ts. En utilisant TypeScript, les développeurs peuvent étendre leur code JavaScript pour profiter des dernières fonctionnalités ES6. Dans cet exemple, nous utiliserons la classe.

Ci-dessous, j'ai créé un composant en utilisant le code TypeScript. J'ai d'abord importé angulaire à l'aide de la syntaxe d'importation ES6. Dans cet exemple, nous définirons un composant et une vue de ce composant. Une fois terminé, nous aurons besoin de la fonction bootstrap d'Angular pour faire exécuter Angular le code. Dans ce code, nous verrons le symbole @, qui est utilisé pour dire à Angular ce que nous essayons de construire.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Étant donné qu'Angular 2 est construit au-dessus de TypeScript, le framework reconnaît notre annotation @component et sait que nous essayons de créer un nouveau composant. De plus, il indique à Angular que chaque fois qu'il voit <user-name></user-name> dans notre HTML, nous voulons instancier un composant.

Comme mentionné ci-dessus, le composant contient deux parties:

• Voir
• logistique

Étant donné que le composant est défini, nous devons maintenant créer des vues et une logique.

Après notre composant, nous pouvons ajouter un code de type dactylographié pour définir notre vue. Jetons un coup d'œil à la continuation du code ci-dessus et voyons par vous-même à quel point Angular facilite l'ajout de vues aux composants personnalisés:

npm install -g typescript

Maintenant, lorsque j'ajoute <user-name></user-name> à mon fichier index.html, ce modèle est injecté dans le dom. Cela étant dit, la partie logique de notre composant est vide car notre classe UserComponent ne contient aucun code.

Dans l'exemple ci-dessus, je n'ai qu'une seule classe vide. Mais maintenant, je vais créer une variable de nom, puis rendre cette variable de nom dans notre vue en utilisant l'expression:

tsc <filename.ts>

Vous verrez également la fonction bootstrap que j'ai mentionnée plus tôt. Bien qu'ils partagent un nom, cette fonction est utilisée pour démarrer ou démarrer notre application angulaire et n'est pas liée au framework Bootstrap Twitter. Si nous oublions de transmettre notre composant dans cette fonction, Angular ne saura pas charger notre composant.

Je tiens également à noter rapidement que notre application doit utiliser une sorte de serveur pour afficher correctement. Si vous y accédez directement, System.js ne pourra pas charger notre module principal, qui contient notre code.

Maintenant, les utilisateurs utilisant le référentiel de cet exemple peuvent s'exécuter

dans le répertoire racine. Après avoir exécuté cette commande, nous pouvons afficher l'effet réel de nos composants en visitant node app.js https://www.php.cn/link/f74d6ef882234fd34400a296b1da6149 . Espérons que cela illustre à quel point Angular facilite l'ajout de la logique aux composants!

Migrez nos composants vers ES5

Pour ceux qui souhaitent utiliser ES5 pour profiter de la puissance de 2.0, l'équipe Angular 2 a créé une version framework qui peut être simplement placée dans le site Web. Cela est nécessaire car ES5 n'a pas de système de module, nous avons donc besoin d'une sorte de faisceau auto-exécutant. Si vous avez regardé le code pour le premier exemple, vous verrez que je dois ajouter trois balises de script différentes à l'application. Dans cet exemple, nous avons juste besoin d'ajouter le script suivant.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Avec ce script, les développeurs peuvent utiliser leur connaissance de l'ES5 sans se soucier de sacrifier les capacités du cadre. Voyons comment construire des composants angulaires en utilisant ES5. Le code de cet exemple peut être trouvé dans la branche ES5 de notre base de code GitHub. Autrement dit, commençons!

Pour recréer des composants en utilisant ES5 au lieu de TypeScript, j'utiliserai différentes approches. C'est fondamentalement la même chose que ce que j'ai fait dans l'exemple ci-dessus, mais nous utiliserons le lien de méthode sur l'objet NG au lieu d'utiliser le symbole @. Ceci est illustré dans le code suivant:

npm install -g typescript

Maintenant, nous pouvons continuer à ajouter des fonctionnalités à nos composants qui seront affichés lorsque notre application lit le sélecteur <user-name>.

Utilisons les méthodes de vue et de classe. Dans notre méthode de vue, nous avons juste besoin de passer dans la chaîne de modèle que nous avons utilisée plus tôt. Étant donné que les classes ne sont pas prises en charge dans ES5, nous simulerons notre utilisation dans la méthode de la classe en créant un constructeur simple qui contiendra notre attribut de nom.

tsc <filename.ts>

mais nous manquons quelque chose. Dans notre exemple de typeScript, nous avons utilisé la fonction bootstrap pour démarrer notre code angulaire. Voici comment faire de même dans ES5:

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

Ceci doit être placé sous notre code d'application personnalisé. Cela fera démarrer Angular notre application et charger les composants après le chargement de la page. Contrairement à notre exemple précédent (nécessite un serveur), cette page peut être affichée directement dans le navigateur.

Comme vous pouvez le voir, l'équipe angulaire fournit une solution claire aux utilisateurs qui souhaitent créer des applications 2.0 avec ES5. Si cela vous intéresse, je vous recommande fortement de consulter la bibliothèque A.JS, qui permet aux développeurs de créer des applications angulaires dans ES5 en utilisant une syntaxe de type type.

Conclusion

J'espère que cela vous donne un aperçu approfondi de divers aspects d'Angular qui apparaîtront dans la prochaine version du cadre. Si vous souhaitez créer davantage une application complète avec Angular 2 et TypeScript (dans ce cas, le babillard électronique), je vous suggère de consulter cet article: commencez avec Angular 2 avec TypeScript.

Je veux aussi connaître votre expérience avec Angular 2. L'avez-vous essayé? Avez-vous construit quelque chose que vous souhaitez partager? Veuillez me le faire savoir dans les commentaires.

FAQ sur la création de composants dans Angular 2 en utilisant TypeScript et es5

Comment créer des composants dans Angular 2 en utilisant TypeScript?

Création de composants dans Angular 2 L'utilisation de TypeScript implique plusieurs étapes. Tout d'abord, vous devez importer des symboles de composants de la bibliothèque Angular Core. Vous définissez ensuite une classe de composants et la décorez avec le décorateur @component. Le décorateur dit à Angular que la classe est un composant et fournit des métadonnées telles que les sélecteurs et les modèles. Enfin, vous exportez la classe de composants afin que vous puissiez l'utiliser dans d'autres parties de l'application. Voici un exemple de base:

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Quelle est la différence entre TypeScript et ES5 dans Angular 2?

TypeScript et ES5 sont les deux langages que vous pouvez utiliser pour écrire des applications Angular 2, mais elles ont des différences clés. TypeScript est un sur-ensemble typique de JavaScript qui ajoute des types et d'autres fonctionnalités à la langue. C'est le langage préféré pour Angular 2 car il rend le code plus robuste et plus facile à entretenir. ES5, en revanche, est une version JavaScript standard qui s'exécute dans la plupart des navigateurs. Les applications Angular 2 peuvent être écrites à l'aide d'ES5, mais vous manquerez certains des avantages de TypeScript.

(Les FAQ restantes sont liées à Angular et réagissent, et ne correspondent pas au sujet d'origine, donc ils sont omis.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!