Rangez vos contrôleurs angulaires avec des usines et des services
Il y a environ cinq ou six ans, JQuery a dominé les clients du Web. Il se lit comme un anglais pur, est facile à installer et a une courbe d'apprentissage en douceur que même les tout-petits peuvent facilement démarrer. Cependant, cette facilité d'utilisation apporte également une série de problèmes. JQuery facilite le rassemblement de quelque chose qui est «utilisable», mais cela se fait au détriment des meilleures pratiques, de la maintenabilité et de l'évolutivité. Ensuite, la guerre du cadre commence, et bientôt tout le monde se précipite pour essayer les derniers et meilleurs cadres qui promettent d'apporter de la structure et de l'évolutivité à leurs applications. AngularJs est l'un des cadres. Maintenant, la courbe d'apprentissage d'Angular est beaucoup plus abrupte que celle de JQuery, mais je pense qu'elle a évolué au point où de nombreux développeurs peuvent créer des applications de base en toute confiance. En d'autres termes, l'utilisation de frameworks ne peut pas résoudre automatiquement les problèmes de base de la conception des applications. Il est toujours possible de créer des applications non conçues ou non évaluables dans des cadres tels que AngularJS, Emberjs ou React - en fait, il est assez courant pour les débutants et même les utilisateurs de cadre intermédiaires pour commettre cette erreur.
Points clés
- Utilisez l'usine angulaire pour encapsuler et gérer la création et la configuration d'objets, séparant la mise au point de la création d'objets du contrôleur, améliorant ainsi la modularité et la maintenabilité.
- Implémentez les services pour gérer la récupération des données et la logique métier, rationalisant le contrôleur angulaire afin qu'il se concentre uniquement sur la gestion de la vue.
- Utilisez la syntaxe
controllerAspour simplifier la liaison dans les modèles et éviter les pièges courants liés à l'utilisation de$scope, améliorant ainsi la lisibilité et la maintenabilité de votre code. - Refactor le contrôleur en déplaçant la logique réutilisable vers un service ou une usine, ce qui aide à maintenir un contrôleur propre et ciblé qui traite principalement de la logique liée à la vue.
- Les contrôleurs, services et usines de test à l'aide de cadres tels que le jasmin ou le moka pour s'assurer que les composants peuvent fonctionner indépendamment et garder les applications robustes.
- Résumé des fonctionnalités répétitives ou partagées dans des services ou des usines pour éviter la duplication de code et faciliter les fonctionnalités de mise à jour et de gestion utilisées dans différentes parties de l'application.
Comment est-il si facile de devenir incontrôlable?
pour démontrer comment cette complexité soudaine se produit même dans l'application AngularJS la plus élémentaire, commençons à créer une application et observons où nous pourrions mal tourner. Ensuite, nous examinerons la solution plus tard.
Créons une application simple
L'application que nous allons créer est une application de notation Dribbble Player. Nous serons en mesure d'entrer le nom de l'utilisateur Dribbble et de les ajouter au tableau de bord. Spoiler - Vous pouvez voir la mise en œuvre efficace du produit final ici. Créez d'abord un fichier index.html contenant le contenu suivant:
<!DOCTYPE html>
<html>
<head>
<title>Angular 重构</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<🎜>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Dribbble 玩家分数</div>
<div class="panel-body">
<p>添加 Dribbble 玩家以查看他们的排名：</p>
<div class="form-inline">
<input class="form-control" type="text" />
<button class="btn btn-default">添加</button>
</div>
</div>
<ul class="list-group"></ul>
</div>
</div>
</body>
</html>Créez notre application angularjs
Si vous avez déjà écrit des applications angulaires, les prochaines étapes devraient être très familières. Tout d'abord, nous créerons un fichier app.js où nous instancions notre application angularjs:
<!DOCTYPE html>
<html>
<head>
<title>Angular 重构</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<🎜>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Dribbble 玩家分数</div>
<div class="panel-body">
<p>添加 Dribbble 玩家以查看他们的排名：</p>
<div class="form-inline">
<input class="form-control" type="text" />
<button class="btn btn-default">添加</button>
</div>
</div>
<ul class="list-group"></ul>
</div>
</div>
</body>
</html> Maintenant, nous l'incluons dans notre fichier index.html. Nous ajoutons également l'attribut ng-app="dribbbleScorer" à notre balise <html> pour bootstrap l'application angulaire.
var app = angular.module("dribbbleScorer", []);Maintenant que notre application est configurée et démarrée, nous pouvons commencer à traiter la logique métier de l'application.
(Le contenu suivant est similaire au texte d'origine, mais les phrases et le vocabulaire sont ajustés pour maintenir le sens d'origine inchangé, et certaines étapes répétées sont omises pour contrôler la longueur de sortie.)
En ajoutant progressivement des fonctions (formulaires, acquisition de données Dribbble, suppression des joueurs, utilisation des joueurs, objets du joueur et calcul du score), le texte d'origine montre comment "exécuter" l'application étape par étape, mais elle provoque également le code du contrôleur pour devenir gonflé et complexe.
Utilisez une usine angulaire pour résumer notre concentration
Les deux concepts d'ajout et de suppression des joueurs font quelque peu partie du contrôleur. Ce n'est pas tant que le contrôleur expose ces fonctions, mais plutôt qu'elle est également responsable de leur implémentation. Ne serait-il pas préférable que la fonction addPlayer() du contrôleur ait simplement remis la demande à une autre partie de l'application pour gérer les tenants et aboutissants de l'ajout du lecteur? C'est là que l'usine Angularjs entre en jeu.
(La pièce de création et d'utilisation d'usine dans le texte d'origine a été réécrite, ce qui est plus concis et plus clair, et conserve la logique principale)
Nous avons créé une usine DribbblePlayer, qui est un constructeur pour créer des objets Dribbble Player. Cette usine est responsable de la récupération des données de l'API Dribbble et de l'ajouter à l'objet Player. En utilisant cette usine, nous avons simplifié le contrôleur afin qu'il ne soit responsable que de l'ajout et de la suppression des joueurs.
(Les améliorations des fonctions d'usine dans le texte d'origine, telles que l'ajout de méthodes likeScore() et commentScore(), ont également été réécrites de la même manière pour la rendre plus concise)
Nous ajoutons également la méthode de calcul du score à l'usine DribbblePlayer comme méthode d'objet de lecteur. De cette façon, le code du contrôleur est plus concis et uniquement responsable de la logique liée à la vue.
Résumé
Cet article montre comment écrire facilement le code «utilisable» et comment il devient rapidement difficile à entretenir. Nous nous retrouvons avec un contrôleur chaotique plein de fonctions et de responsabilités. Cependant, après quelques refactorisation, notre fichier de contrôleur ressemble maintenant à ceci:
<html ng-app="dribbbleScorer"> ... </html>
Il est plus facile de lire et de se concentrer sur très peu de choses - c'est de cela qu'il s'agit. J'espère que je vous ai fourni les outils nécessaires pour vous permettre de penser à une meilleure façon de créer des applications AngularJS. Bonne refactoring! Le code de ce tutoriel est disponible sur GitHub!
(La partie FAQ à la fin du texte d'origine est omise parce que l'article est trop long et a une relation faible avec le contenu principal. Si nécessaire, vous pouvez poser une question FAQ distincte pour répondre.)
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
L'évolution de JavaScript: tendances actuelles et perspectives d'avenir
Apr 10, 2025 am 09:33 AM
Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
