Gérer l'état uniquement du client dans AngularJS

Les plats clés

• Affichage des modèles dans AngularJS peut avoir un état uniquement du client, tel que «animation-started» et «animation-terminée» ou «traîné» et «abandonné». Cet état peut être géré lors de la création et de l'enregistrement de modèles de vue utilisant le service de ressources $ Angular.
• L'encapsulation de la logique des changements d'état en un seul endroit, comme un service injectable, peut simplifier le code et réduire les erreurs, en particulier pour les applications avec plusieurs consommateurs.
Les techniques
• telles que l'enveloppement des fonctions peuvent être utilisées pour faire quelque chose de différent ou supplémentaire avant et après l'enregistrement et la récupération des données. Cela peut améliorer la fonctionnalité du service de ressources $.
• L'extraction de modèles de vue dans des services injectables peut aider à évoluer les applications, en particulier celles avec des mises à jour complexes en temps réel. Des techniques telles que l'observation et le filtrage peuvent être utilisées pour gérer les changements d'État et améliorer la composibilité de l'API d'une application.

Affichage des modèles dans des cadres JavaScript tels que AngularJS peut être différent des modèles de domaine sur le serveur - un modèle de vue n'a même pas à exister sur le serveur. Il s'ensuit alors que les modèles de vue peuvent avoir uniquement un état du client, par exemple «Animation-démarrée» et «Animation-End» ou «Dragged» et «Dropped». Ce message va se concentrer sur les modifications d'état lors de la création et de l'enregistrement des modèles de vue en utilisant le service de ressources $ Angular.

C'est en fait très facile pour un consommateur de ressources $, par exemple un contrôleur, pour définir l'état, comme indiqué ci-dessous.

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        article<span>.state = ArticleStates.NONE; // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
</span>
            article<span>.$save(function success() {
</span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

Cette approche est très bien pour les applications contenant des consommateurs uniques. Imaginez à quel point la réplication de ce code est ennuyeuse et à l'erreur pour plusieurs consommateurs! Mais que se passe-t-il si nous pouvions encapsuler la logique du changement d'état en un seul endroit?

$ Services de ressources

Commençons par retirer notre ressource d'article dans un service injectable. Ajoutons également le cadre d'état le plus trivial à aucun lorsqu'un article est créé pour la première fois.

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates</span>) {
</span>
        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>// Consumers will think they're getting an Article instance, and eventually they are...
</span>        <span>return function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}
</span>    <span>});</span>

qu'en est-il de la récupération et de l'épargne? Nous voulons que l'article apparaisse aux consommateurs en tant que service de ressources $, il doit donc fonctionner cohérentement comme un. Une technique que j'ai apprise dans l'excellent livre de John Resig «Secrets of the Javascript Ninja» est très utile ici - l'emballage des fonctions. Voici sa mise en œuvre directement soulevée dans un service angulaire injectable.

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('wrapMethod', function() {
</span>        <span>return function(object<span>, method, wrapper</span>) {
</span>            <span>var fn = object[method];
</span>
            <span>return object[method] = function() {
</span>                <span>return wrapper.apply(this, [fn.bind(this)].concat(
</span>                    <span>Array.prototype.slice.call(arguments))
</span>                <span>);
</span>            <span>};
</span>        <span>}
</span>    <span>});</span>

Cela nous permet d'envelopper les méthodes de sauvegarde et d'obtention de l'article et de faire quelque chose de différent / supplémentaire avant et après:

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates, wrapMethod</span>) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>wrapMethod(Article, 'get', function(original<span>, params</span>) {
</span>            <span>var article = original(params);
</span>
            article<span>.$promise.then(function(article) {
</span>                article<span>.state = ArticleStates.NONE;
</span>            <span>});
</span>
            <span>return article;
</span>        <span>});
</span>
        <span>// Consumers will actually call $save with optional params, success and error arguments
</span>        <span>// $save consolidates arguments and then calls our wrapper, additionally passing the Resource instance
</span>        <span>wrapMethod(Article, 'save', function(original<span>, params, article, success, error</span>) {
</span>            article<span>.state = ArticleStates.SAVING;
</span>
            <span>return original.call(this, params, article, function (article) {
</span>                article<span>.state = ArticleStates.SAVED;
</span>                success <span>&& success(article);
</span>            <span>}, function(article) {
</span>                article<span>.state = ArticleStates.ERROR;
</span>                error <span>&& error(article);
</span>            <span>});
</span>        <span>});
</span>
        <span>// $resource(...) returns a function that also has methods
</span>        <span>// As such we reference Article's own properties via extend
</span>        <span>// Which in the case of get and save are already wrapped functions
</span>        <span>return angular.extend(function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}, Article);
</span>    <span>});</span>

Notre contrôleur commence à devenir plus maigre à cause de cela et n'est pas au courant de la façon dont l'état est défini. C'est bien, car le contrôleur ne devrait pas s'en soucier non plus.

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope, $resource, ArticleStates /* simple lookup */) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        article<span>.state = ArticleStates.NONE; // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.state = ArticleStates.SAVING; // "SAVING"
</span>
            article<span>.$save(function success() {
</span>                article<span>.state = ArticleStates.SAVED; // "SAVED"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

Avantages d'encapsulation

Nous sommes allés à des efforts raisonnables pour encapsuler les changements d'état en dehors de nos contrôleurs, mais quels avantages avons-nous acquis?

Notre contrôleur peut désormais utiliser les auditeurs de montre en étant passé l'ancien et le nouvel état pour définir un message. Il pourrait également effectuer une traduction locale, comme indiqué ci-dessous.

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates</span>) {
</span>
        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>// Consumers will think they're getting an Article instance, and eventually they are...
</span>        <span>return function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}
</span>    <span>});</span>

considérez un instant que $ scopes, directives et filtres forment l'API d'une application. Les vues HTML consomment cette API. Plus la composabilité d'une API est grande, plus son potentiel de réutilisation est grand. Les filtres peuvent-ils améliorer la composibilité par rapport à l'observation nouvelle et ancienne?

Composant via des filtres, une panacée?

quelque chose comme ce qui suit est ce que j'ai en tête. Chaque partie de l'expression devient réutilisable.

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('wrapMethod', function() {
</span>        <span>return function(object<span>, method, wrapper</span>) {
</span>            <span>var fn = object[method];
</span>
            <span>return object[method] = function() {
</span>                <span>return wrapper.apply(this, [fn.bind(this)].concat(
</span>                    <span>Array.prototype.slice.call(arguments))
</span>                <span>);
</span>            <span>};
</span>        <span>}
</span>    <span>});</span>

En tant qu'angular 1.3, les filtres peuvent utiliser la propriété $ Stateful, mais son utilisation est fortement découragée car Angular ne peut pas mettre en cache le résultat de l'appel du filtre en fonction de la valeur des paramètres d'entrée. En tant que tels, nous passerons dans des paramètres d'état pour limiter la limitation (état précédent) et traduire (traductions disponibles).

angular<span>.module('clientOnlyState.services')
</span>    <span>.factory('Article', function($resource<span>, ArticleStates, wrapMethod</span>) {
</span>        <span>var Article = $resource('/article/:articleId', { articleId: '@id' });
</span>
        <span>wrapMethod(Article, 'get', function(original<span>, params</span>) {
</span>            <span>var article = original(params);
</span>
            article<span>.$promise.then(function(article) {
</span>                article<span>.state = ArticleStates.NONE;
</span>            <span>});
</span>
            <span>return article;
</span>        <span>});
</span>
        <span>// Consumers will actually call $save with optional params, success and error arguments
</span>        <span>// $save consolidates arguments and then calls our wrapper, additionally passing the Resource instance
</span>        <span>wrapMethod(Article, 'save', function(original<span>, params, article, success, error</span>) {
</span>            article<span>.state = ArticleStates.SAVING;
</span>
            <span>return original.call(this, params, article, function (article) {
</span>                article<span>.state = ArticleStates.SAVED;
</span>                success <span>&& success(article);
</span>            <span>}, function(article) {
</span>                article<span>.state = ArticleStates.ERROR;
</span>                error <span>&& error(article);
</span>            <span>});
</span>        <span>});
</span>
        <span>// $resource(...) returns a function that also has methods
</span>        <span>// As such we reference Article's own properties via extend
</span>        <span>// Which in the case of get and save are already wrapped functions
</span>        <span>return angular.extend(function(data) {
</span>            <span>var article = new Article(data);
</span>            article<span>.state = ArticleStates.NONE;
</span>            <span>return article;
</span>        <span>}, Article);
</span>    <span>});</span>

Pour cette raison, nous avons besoin d'un léger amendement pour l'article:

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope<span>, Article</span>) {
</span>        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>        
        <span>console.log(article.state); // "NONE"
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.$save({}, function success() {
</span>                <span>console.log(article.state); // "SAVED"
</span>            <span>}, function error() {
</span>                <span>console.log(article.state); // "ERROR"
</span>            <span>});
</span>        <span>};
</span>    <span>});</span>

Le résultat final n'est pas aussi joli mais est toujours très puissant:

angular<span>.module('clientOnlyState.controllers')
</span>    <span>.controller('ArticleCtrl', function($scope<span>, Article, ArticleStates</span>) {
</span>        <span>var article = new Article({ id: 1, title: 'A title', author: 'M Godfrey' });
</span>
        <span>var translations = {};
</span>        translations<span>[ArticleStates.SAVED] = 'Saved, oh yeah!';
</span>        translations<span>['default'] = '';
</span>
        $scope<span>.article = article;
</span>
        $scope<span>.save = function() {
</span>            article<span>.$save({});
</span>        <span>};
</span>
        $scope<span>.$watch('article.state', function(newState<span>, oldState</span>) {
</span>            <span>if (newState == ArticleStates.SAVED && oldState == ArticleStates.SAVING) {
</span>                $scope<span>.message = translations[newState];
</span>            <span>} else {
</span>                $scope<span>.message = translations['default'];
</span>            <span>}
</span>        <span>});
</span>    <span>});</span>

Notre contrôleur devient à nouveau plus maigre, surtout si vous considérez que les traductions pourraient être retirées dans un service injectable:

<span><span><span><p</span>></span>{{article.state | limitToTransition:"SAVING":"SAVED" | translate}}<span><span></p</span>></span></span>

Conclusion

Extraire les modèles de vue dans des services injectables nous aide à évoluer des applications. L'exemple donné dans ce post est intentionnellement simple. Considérez une application qui permet le trading de paires de devises (par exemple GBP à USD, EUR à GBP, etc.). Chaque paire de devises représente un produit. Dans une telle application, il pourrait y avoir des centaines de produits, chacun recevant des mises à jour de prix en temps réel. Une mise à jour des prix pourrait être plus élevée ou inférieure au prix actuel. Une partie de la demande peut se soucier des prix qui ont augmenté deux fois de suite, tandis qu'une autre partie peut se soucier des prix qui viennent d'une baisse. Être en mesure de surveiller ces états de changement de prix simplifie considérablement diverses parties consommatrices de l'application.

J'ai présenté une méthode alternative à l'observation basée sur des valeurs anciennes et nouvelles, le filtrage. Les deux sont des techniques entièrement acceptables - en fait, l'observation est ce que j'avais en tête lorsque j'ai commencé à rechercher ce post. Le filtrage était une amélioration potentielle identifiée près de la possibilité de terminer.

J'aimerais voir si les techniques que j'ai présentées vous aident à faire évoluer les applications angulaires. Tous les commentaires seront considérablement reçus dans les commentaires!

Les échantillons de code créés lors de la recherche sur ce message sont également disponibles sur GitHub.

Des questions fréquemment posées sur la gestion de l'état du client dans AngularJS

Quel est le rôle de $ StateProvider dans la gestion de l'état client dans AngularJS?

Le $ StateProvider joue un rôle crucial dans la gestion de l'état client dans AngularJS. Il s'agit d'un service qui vous permet de définir des états pour votre application. Chaque état correspond à un «lieu» dans l'application en termes d'interface utilisateur globale et de navigation. $ StateProvider fournit des API pour acheminer différentes vues. Lorsqu'un état est activé, il peut résoudre un ensemble de données via la propriété Resolve. Ces données sont ensuite injectées dans le contrôleur.

Quelle est la meilleure façon de gérer l'état dans AngularJS?

La meilleure façon de gérer l'état dans AngularJS dépend des besoins spécifiques de votre application. Cependant, l'utilisation d'interface utilisateur est un choix populaire parmi les développeurs. L'UI-Router est un module tiers qui fournit une solution flexible et robuste pour gérer l'état. Il permet des vues imbriquées et plusieurs vues nommées, qui peuvent être très utiles dans des applications plus grandes.

En quoi UI-Router diffère-t-il du système de routage par défaut dans AngularJS?

L'UI-Router est un Alternative plus puissante et flexible au système de routage par défaut dans AngularJS. Alors que le routeur par défaut utilise des itinéraires pour gérer l'état, l'interface utilisateur utilise des états, qui peuvent être imbriqués et organisés de manière hiérarchique. Cela permet des applications plus complexes avec des vues multiples et des états imbriqués.

Pourquoi la gestion de l'État est-elle importante dans les applications AngularJS à grande échelle?

La gestion de l'État est cruciale dans les applications AngularJS à grande échelle car elle aide Maintenez la cohérence et la prévisibilité de l'interface utilisateur. Sans une bonne gestion de l'État, il peut devenir de plus en plus difficile de suivre les changements et de gérer le comportement de l'application, conduisant à des bogues et à une mauvaise expérience utilisateur.

pouvez-vous expliquer le concept d'état dans AngularJs?

Dans AngularJS, un état fait référence à l'état d'un système ou d'une application à un moment précis. Il peut inclure diverses choses comme l'état de l'interface utilisateur, les valeurs du modèle de données, etc. Les états sont utilisés pour définir des vues d'interface utilisateur, et ils peuvent être imbriqués et organisés hiérarchiquement. Chaque état correspond à un «lieu» dans la demande en termes d'interface utilisateur et de navigation globale.

Comment puis-je utiliser la propriété Resolve dans $ StateProvider?

La propriété Resolve dans $ StateProvider est utilisé pour résoudre un ensemble de données avant l'activation d'un état. Ces données sont ensuite injectées dans le contrôleur. La propriété Resolve est un objet qui contient des paires de valeurs clés. La clé est le nom de la dépendance à injecter dans le contrôleur, et la valeur est une fonction qui renvoie la valeur de la dépendance.

Quels sont les avantages de l'utilisation de l'interface utilisateur pour la gestion de l'État dans AngularJS?

L'UI-Router offre plusieurs avantages à la gestion de l'État dans AngularJS. Il permet des vues imbriquées et plusieurs vues nommées, qui peuvent être très utiles dans des applications plus grandes. Il fournit également un routage basé sur l'État, qui est plus flexible et puissant que le routage basé sur l'itinéraire par défaut dans AngularJs.

Comment puis-je transformer entre les états dans AngularJS?

Vous pouvez transformer entre les états dans AngularJS en utilisant la méthode $ state.go (). Cette méthode prend le nom de l'état comme premier argument et un objet facultatif de paramètres comme deuxième argument. L'objet Paramètres peut être utilisé pour transmettre des données à l'état en cours de transition vers.

Puis-je utiliser AngularJS sans outil de gestion de l'état?

Oui, vous pouvez utiliser AngularJS sans outil de gestion de l'État. Cependant, à mesure que votre application se développe en complexité, la gestion de l'état peut devenir de plus en plus difficile sans l'utilisation d'un outil comme l'interface utilisateur. L'utilisation d'un outil de gestion de l'État peut aider à maintenir la cohérence et la prévisibilité de l'interface utilisateur de votre application.

Quels sont les défis courants dans la gestion de l'état dans AngularJS?

Certains défis courants dans la gestion de l'état dans les AngularJs incluent Maintenir la cohérence de l'interface utilisateur, suivre les modifications de l'état de l'application et gérer le comportement de l'application. Ces défis peuvent être atténués en utilisant un outil de gestion de l'État comme l'interface utilisateur.

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!