Maison >interface Web >js tutoriel >Améliorez votre application en composants angulaires 1.5 et au-delà!
Améliorez votre application en composants angulaires 1.5 et au-delà!
- Christopher Nolanoriginal
- 2025-02-18 11:37:10270parcourir
Cet article a été révisé par Dan Prince et Michaela Lehr. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!
Avec chaque nouvelle version d'AngularJS, l'équipe de développement essaie de combler l'écart entre AngularJS 1.x et 2. Avec la libération d'AngularJS 1.5, les développeurs pourront écrire des applications structurellement similaires à AngularJS 2.0.
Dans ce tutoriel, nous allons créer une directive de grille dans AngularJS 1.4. Nous allons ensuite parcourir les étapes pour la mettre à niveau à 1,5, puis voir comment nous pourrions le convertir en fonctionnant avec la version 2.0.
Les plats clés
- Commencez par AngularJS 1.4: Commencez par créer une directive de grille simple dans AngularJS 1.4 pour afficher un tableau JSON, en utilisant un bootstrap pour la conception de mise en page.
- Metgraque vers AngularJS 1.5: Transitionz votre directive AngularJS 1.4 à 1.5 en remplaçant la référence du script et en utilisant la nouvelle méthode d'assistance directive des composants, qui simplifie la configuration et se prépare pour de futures mises à niveau.
- Avantages des composants dans AngularJS 1.5: Les composants dans AngularJS 1.5 offrent du sucre syntaxique sur les directives, fournissant des configurations par défaut et une approche rationalisée, ce qui est bénéfique pour la transition vers AngularJS 2.0.
- Transition vers AngularJS 2.0: Comprenez la nécessité de commencer à zéro lors du passage à AngularJS 2.0 en raison de ses différences architecturales par rapport aux versions 1.x, nécessitant des bibliothèques supplémentaires et une nouvelle configuration.
- Utiliser les composants AngularJS 2.0: implémentez les composants dans AngularJS 2.0 à l'aide de TypeScript, ce qui améliore la maintenabilité et la testabilité du code, reconnaissant qu'AngularJS 2.0 est basé sur les composants et prend en charge des fonctionnalités avancées telles que l'injection de dépendance hiérarchique et le chargement dynamique.
Pour commencer
Commençons par créer un répertoire de projet appelé angularMigrateApp. Dans ce dossier, créez une page HTML appelée index.html. Voici à quoi devrait ressembler la page:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
ainsi que le cadre angulaire, nous utiliserons également Bootstrap pour concevoir notre disposition de directive. Nous incluons ces deux fichiers directs à partir des CDN.
Création d'une directive de grille
Créons une directive de grille simple pour afficher un tableau JSON. Nous allons commencer par créer un module angularjs.
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
Nous avons défini une constante appelée employés qui détient un éventail d'exemples de données. Nous injectons ensuite ce tableau dans Homectl et le rendons disponible sur la portée du contrôleur.
Créons une directive appelée MyGrid, que nous utiliserons pour afficher le tableau JSON ci-dessus.
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
Nous voulons utiliser la directive via un nom de balise, comme ceci:
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Donc, nous allons ajouter l'option de restriction pour spécifier que:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>
Ensuite, nous voulons transmettre les données des employés de la vue à la directive. Donc, nous allons l'ajouter comme une liaison:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Maintenant, nous serons en mesure de transmettre les données des employés à la directive en tant qu'attribut:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
Enfin, nous avons besoin d'un modèle HTML pour afficher les données:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
Ajoutez le script de modèle HTML suivant dans le corps d'index.html.
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Comme vous pouvez le voir dans le code ci-dessus, nous itons sur la propriété Info et affichons chacun des éléments de la liste des employés.
Utilisons la directive MyGrid dans index.html. Ajoutez le code suivant:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>
Nous avons spécifié le contrôleur Homectl et à l'intérieur, il a utilisé notre directive. Enregistrez les modifications et parcourez la page index.html. Voici une démo de la grille de données en action:
Voir la démo de Pen Angularjs 1.4 par SitePoint (@SitePoint) sur Codepen.
Mise à niveau vers 1,5
Jusqu'à présent, nous avons créé une directive AngularJS utilisant la version 1.4 et cela fonctionne assez bien. Maintenant, essayons d'utiliser le même code avec AngularJS 1.5 et voyez si quelque chose se casse.
Remplacement de la référence de script existante par un lien CDN vers la version 1.5. Si vous essayez de rafraîchir la page, tout devrait continuer à fonctionner correctement. Avec cette nouvelle version de la ligne 1.x, le cadre se rapproche de la façon dont AngularJS 2.0 fonctionnera, en utilisant des composants, et nous pouvons en profiter dans notre code, ce qui facilite la transition éventuelle vers la version 2.0.
Dans AngularJS 1.5, les composants sont du sucre syntaxique pour les directives qui s'occupent des valeurs par défaut et ont une configuration plus simple. Ils devraient être favorisés en remplacement, en particulier pour ceux qui souhaitent mettre à niveau à l'avenir.
Lorsque vous travaillez avec AngularJS, les développeurs ont généralement tendance à travailler avec une approche basée sur le contrôleur, mais cela peut créer de nombreux problèmes à mesure que l'application commence à croître. Une approche basée sur le contrôleur et la vue conduit à un contrôleur / vue NG répété, mais une approche basée sur les composants résout le problème en créant des composants qui peuvent être composés en composants plus grands sans répéter le code.
Essayons d'utiliser la nouvelle méthode d'assistance directive des composants et de modifier notre code existant. Nous allons commencer par créer un composant:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>}
</span> <span>}
</span><span>})
</span>
Contrairement à la méthode directive - qui prend une fonction - la méthode du composant prend un objet. Nous passerons les mêmes objets que nous avions dans notre directive avec un modèle différent. Voici le modèle HTML:
<span><span><span><my-grid</span> info<span>="employees"</span>></span><span><span></my-grid</span>></span> </span>
Voici le code du composant modifié:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>},
</span> <span>templateUrl : '/directiveGrid.html'
</span> <span>}
</span><span>})
</span>
Comme le montre le code ci-dessus, nous avons transmis toutes les options que nous avions dans notre ancienne directive.
Créez un composant appelé MyComp dans la page index.html.
<span><span><span><script</span> type<span>="text/ng-template"</span> id<span>="/directiveGrid.html"</span>></span><span>
</span></span><span><span> <span><div class="panel panel-primary">
</span></span></span><span><span> <span><div class="panel-heading">Site Point Directive Grid</div>
</span></span></span><span><span> <span><table class="table">
</span></span></span><span><span> <span><thead>
</span></span></span><span><span> <span><tr>
</span></span></span><span><span> <span><th>FirstName</th>
</span></span></span><span><span> <span><th>Last Name</th>
</span></span></span><span><span> <span><th>Location</th>
</span></span></span><span><span> <span></tr>
</span></span></span><span><span> <span></thead>
</span></span></span><span><span> <span><tbody>
</span></span></span><span><span> <span><tr ng-repeat="employee in info">
</span></span></span><span><span> <span><td>{{ employee.firstName }}</td>
</span></span></span><span><span> <span><td>{{ employee.lastName }}</td>
</span></span></span><span><span> <span><td>{{ employee.location }}</td>
</span></span></span><span><span> <span></tr>
</span></span></span><span><span> <span></tbody>
</span></span></span><span><span> <span></table>
</span></span></span><span><span> <span></div>
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
Enregistrez les modifications et actualisez la page et vous devriez pouvoir voir que les données ne sont pas affichées mais aucune erreur dans la console du navigateur non plus.
Si nous examinons le tableau de comparaison entre le composant et la directive du site officiel, nous pouvons voir que la portée est toujours isolée dans les composants.
Ainsi, nous devons utiliser l'option de liaisons pour lier les données au contrôleur. L'option de restriction n'est plus requise, car les composants sont limités aux éléments uniquement.
Voici le code modifié:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Les informations de liaison seront liées au contrôleur. L'alias par défaut pour le contrôleur est $ ctrl et à l'intérieur du modèle, nous l'utiliserons pour accéder à la propriété Info:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
Maintenant, si vous actualisez la page, vous devriez pouvoir afficher les données affichées à l'aide du composant MyComp.
Voir la démo de Pen AngularJS 1.5 par SitePoint (@SitePoint) sur Codepen.
Mise à niveau vers 2.0
Remarque: AngularJS 2.0 est toujours en version bêta. La version que nous utilisons est Angular2.0.0-beta.8.
Remplacement de la version existante d'AngularJS dans notre application par un lien vers la version 2.0 du CDN et voyez si quelque chose se casse:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
Après avoir rafraîchi la page, rien n'apparaît sur la page et si nous vérifions la console du navigateur, nous pouvons également voir quelques erreurs.
Comme vous pouvez le voir, notre code de composant n'a pas bien fonctionné avec Angular 2.0!
Commençons à partir du même à zéro et voyons comment fonctionne la nouvelle version, alors nous essaierons de porter notre composant.
Alors qu'il est possible de commencer avec Angular 1.x en incluant le framework avec une seule balise de script, la situation avec Angular 2.0 a changé. Nous avons besoin de quelques autres bibliothèques pour fonctionner. Bien que les charges séparément via des balises de script soient ok pour le développement, elles sont destinées à être regroupées dans le cadre d'un processus de construction pour la production.
Si nous examinons le guide de démarrage rapide officiel, nous pouvons voir que nous aurons besoin d'autres bibliothèques et dépendances de développement pour commencer avec 2.0.
Créons un dossier appelé angularjs2.0component et créons un fichier package.json comme suit:
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span> </span>
Le fichier ci-dessus affiche toutes les dépendances requises par l'application AngularJS 2.0. Enregistrez les modifications et installez les dépendances requises à l'aide de NPM:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E'
</span> <span>}
</span><span>})
</span>
Créez un sous-dossier appelé application et à l'intérieur de la création d'un fichier appelé app ......coligez avec le code suivant:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>restrict: 'E',
</span> <span>scope: {
</span> <span>info: '=info'
</span> <span>}
</span> <span>}
</span><span>})
</span>
Dans le code ci-dessus, nous utilisons l'espace de noms de noyau angulaire ng.core pour créer un composant. Nous avons défini un sélecteur pour notre composant en tant que My-Comp. Nous utilisons le même HTML, Grid.html, que le modèle de notre application. Nous avons défini l'objet de nos employés dans le constructeur du composant.
Créez un fichier appelé main.js et collez-le dans le code suivant:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Cela dit à Angular de charger le composant que nous venons de créer.
Ensuite, créez un fichier appelé index.html en dehors du dossier de l'application et collez dans le code suivant:
angular<span>.module('myApp', [])
</span> <span>.constant('employees', [{
</span> <span>firstName: 'Rima',
</span> <span>lastName: 'George',
</span> <span>location: 'San Francisco'
</span> <span>}, {
</span> <span>firstName: 'Shaun',
</span> <span>lastName: 'John',
</span> <span>location: 'Germany'
</span> <span>}, {
</span> <span>firstName: 'Rahul',
</span> <span>lastName: 'Kurup',
</span> <span>location: 'Bangalore'
</span> <span>}, {
</span> <span>firstName: 'Samson',
</span> <span>lastName: 'Davis',
</span> <span>location: 'Canada'
</span> <span>}, {
</span> <span>firstName: 'Shilpa',
</span> <span>lastName: 'Agarwal',
</span> <span>location: 'Noida'
</span> <span>}])
</span>
<span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span> $scope<span>.employees = employees;
</span> <span>}])
</span>
La page index.html ci-dessus est le modèle de démarrage pour les applications AngularJS 2.0. Nous avons inclus toutes les dépendances requises, et au sein de la balise corporelle, nous avons utilisé notre composant.
Enregistrez les modifications et démarrez le serveur à l'aide de NPM Start. Cette commande exécute un serveur de développement local appelé lite-server qui charge index.html dans un navigateur.
mais toujours les données n'apparaissent pas!
Dans AngularJS 2.0, la syntaxe pour la boucle est un peu différente. Modifiez la partie de boucle dans la grille.html comme indiqué ci-dessous:
<span>.directive('myGrid', function() {
</span> <span>return {
</span> <span>}
</span><span>})
</span>
Enregistrez les modifications et redémarrez le serveur et vous devriez être en mesure de voir les données des employés affichées dans l'application.
l'enveloppement
Les composantssont une partie importante d'AngularJS 2.0 et il serait juste de dire que son cadre est basé sur les composants. Avec chaque nouvelle version de la ligne 1.x, nous nous rapprochons de la façon dont les applications sont développées à l'aide de la version 2.0.
Dans ce tutoriel, nous avons créé une directive AngularJS utilisant Verison 1.4 du cadre. Nous avons refactorisé la directive pour profiter de la syntaxe des composants de la version 1.5. Enfin, nous l'avons mis à niveau pour travailler avec la version 2.0 angulaire.
Pour un aperçu plus approfondi de migrer vos applications AngularJS, envisagez de lire le guide de migration officiel. Le code Angular 2 peut également être écrit en datte et en fléchettes, et si vous êtes intéressé, je recommande de lire le guide officiel pour commencer avec AngularJS 2 dans TypeScript ou Dart respectivement.
Partagez vos pensées et suggestions dans les commentaires ci-dessous!
Les questions fréquemment posées (FAQ) sur la mise à niveau vers les composants angulaires
Quelles sont les principales différences entre AngularJS et Angular?
AngularJS est un cadre d'applications Web frontal open-end basé sur JavaScript, tandis qu'Angular est une plate-forme pour créer des applications Web mobiles et de bureau. Angular est une réécriture complète de la même équipe qui a construit AngularJS. Les principales différences incluent le langage, l'architecture, la syntaxe d'expression, le support mobile et le routage. Angular utilise TypeScript, qui est plus compact et plus rapide que JavaScript utilisé dans AngularJS. Angular a une injection de dépendance hiérarchique, une charge dynamique et une compilation de matrices asynchrones, ce qui le rend plus efficace.
Pourquoi dois-je passer de la mise à niveau angularjs à Angular?
La mise à niveau vers Angular depuis AngularJS offre plusieurs avantages. Angular a de meilleures performances en raison de son injection de dépendance hiérarchique et de son architecture basée sur les composants. Il prend également en charge les appareils mobiles, contrairement à AngularJS. Angular utilise TypeScript, qui fournit un typage statique, des interfaces et des classes, ce qui rend le code plus maintenable et testable. Angular a également amélioré l'injection, la modularité et la testabilité de la dépendance.
Comment puis-je migrer mon application angularjs vers Angular?
Migrating d'AngularJS vers Angular implique plusieurs étapes. Tout d'abord, vous devez préparer votre application AngularJS pour la migration en suivant le guide de style AngularJS, en organisant votre code dans une structure de composants et en utilisant un chargeur de module. Ensuite, vous pouvez démarrer le processus de migration en bootstrap Angular dans votre application, en créant des composants angulaires pour vos composants AngularJS et en migrant vos services. Enfin, vous pouvez supprimer les AngularJS de votre application.
Quels sont les défis auxquels je pourrais faire face lors de la mise à niveau d'AngularJS à Angular?
La mise à niveau d'AngularJs à Angular peut être difficile en raison des différences d'architecture , langue et syntaxe. Vous pouvez faire face à des problèmes avec la migration de votre code AngularJS vers TypeScript, l'adaptation à la nouvelle architecture basée sur les composants et l'apprentissage de la nouvelle syntaxe pour les expressions. Vous devrez peut-être également réécrire votre configuration de routage et adapter votre processus de construction pour gérer TypeScript.
Puis-je utiliser AngularJS et Angular ensemble dans la même application?
Oui, vous pouvez utiliser AngularJS et Angular ensemble dans la même application pendant le processus de migration. Ceci est connu comme une application hybride. Vous pouvez bootstrap à la fois AngularJS et Angular dans votre application, et ils peuvent coexister et interagir les uns avec les autres. Cela vous permet de migrer votre application progressivement, composant par composant, au lieu de faire une réécriture complète.
Quel est le rôle de TypeScript dans Angular?
TypeScript est un sur-ensemble typiquement typique de JavaScript qui Compiles en JavaScript ordinaire. Dans Angular, TypeScript fournit un typage statique, des interfaces et des classes, ce qui rend le code plus maintenable et testable. TypeScript fournit également de meilleurs outils avec la complétion automatique, la vérification des types et la prise en charge des cartes source, ce qui améliore l'expérience de développement.
Comment l'architecture basée sur les composants en angulaire améliore-t-elle les performances?
La composante basée sur les composants est-ce que les composants. L'architecture dans Angular améliore les performances en permettant un flux de données unidirectionnel et une détection des changements. Chaque composant d'Angular a une interface clairement définie et résume son propre comportement et son rendu. Cela rend l'application plus facile à comprendre, à tester et à maintenir. Le flux de données unidirectionnel garantit que la vue est toujours une projection du modèle, qui simplifie le modèle de programmation et améliore les performances.
Comment Angular prend-il en charge les appareils mobiles?
Angular prend en charge les appareils mobiles en fournissant une mise en page réactive et une prise en charge tactile. Il fournit également des optimisations de performances pour les appareils mobiles, tels que le chargement paresseux et la compilation de modèles asynchrones. Angular prend également en charge les applications Web progressives (PWAS), qui peuvent être installées sur les appareils mobiles et travailler hors ligne.
Comment puis-je tester mon application angulaire?
Angular fournit un cadre de test appelé balise d'essai, qui Vous permet de créer un environnement de test dynamique pour vos composants. Vous pouvez également utiliser Jasmine, un cadre de développement axé sur le comportement pour tester le code JavaScript et Karma, un coureur de test. Angular prend également en charge les tests de bout en bout avec le protracteur.
Quelles ressources sont disponibles pour apprendre Angular?
Il existe de nombreuses ressources disponibles pour apprendre Angular, y compris la documentation angulaire officielle, les didacticiels en ligne, livres et cours. La communauté angulaire est également très active et solidaire, avec de nombreux forums, blogs et questions StackOverflow disponibles pour référence.
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript