Rangez vos contrôleurs angulaires avec des usines et des services-js tutoriel-php.cn

Tidy Up Your Angular Controllers with Factories and 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 controllerAs pour 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>

Copier après la connexion

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>

Copier après la connexion

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", []);

Copier après la connexion

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>

Copier après la connexion

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!