Valeur de Liaison Entre le Service et le Contrôleur/Directive

Beaucoup de développeurs d’AngularJs connaissent les services, les contrôleurs et les directives d’angularjs. Comme vous le savez, le service angularjs est utilisé pour avoir des actions ou des variables globales. En général, les services sont utilisés comme des actions globales, parce que angularjs a déjà la fonctionnalité Value.

Parlons maintenant un peu de la configuration et de l'architecture des services et des contrôleurs. Imaginez que vous ayez un service qui représente une personne. Il a toutes les méthodes de getters et setters. Nous avons un autre service comme data manager (gestionnaire de données). Il obtient des données de n'importe où toutes les 1 minutes. Nous avons des contrôleurs et des directives et nous voulons y associer des données. Juste un exemple simple. Nous avons 3 contrôleurs et 2 directives. Certains d'entre eux ont besoin de lier des données et ils doivent utiliser nos services. Rappelez-vous que nous avons un service appelé Person et un service appelé DataManager. Que pouvons-nous faire pour résoudre notre probléme ? Voyons ce que nous avons.

angular.module('myModule')
    .service('Person', function() {
         var name = 'Default';
         var listCount = 0;

         this.getName = function() {
             return name;
         };
         this.setName = function(Name) {
             name = Name;
         };

         this.getListCount = function() {
             return listCount;
         };
         this.setListCount = function(ListCount) {
             listCount = ListCount;
         };
    })

angular.module('myModule')
    .service('DataManager', function($interval, $http, Person) {
       $interval(function(){
          $http.get([url])
              .then(function(data){
                  Person.setName(data.name);
                  Person.setListCount(data.count);
              });   // getting the data every 1 minute
          }, 60000);
    })

Les services suivants fournissent des données dans un contrôleur ou une directive. Voyons maintenant comment nous pouvons lier ces données, par exemple dans le contrôleur. Voici notre contrôleur.

angular.module('myModule')
    .controller("MyController",function($scope, Person){
       $scope.user = null;
        // here we need live data for person
    })

Comme vous le voyez, si nous voulions imprimer avec des données, nous aurions un problème, car nous ne pouvons définir l'écouteur sur aucune valeur pour lier les données (nous prenons les données du service). Mais comment faire cela ? Comment avoir des données en direct dans notre contrôleur?

Voici les solutions pour ce problème.

Solution 1

Cette solution est bonne si nous n'utilisons les données en direct que dans 1 contrôleur / directive. La solution est la suivante : on peut définir un intervalle dans notre contrôleur / directive et nous aurons une variable dans notre portée, qui contient les données du serveur. Nous pouvons imprimer cette valeur dans notre vue et AngularJs le fera automatiquement. On peut même y placer des écouteurs. C'est très simple. Ensuite, nous n'avons pas besoin du service DataManager. Voici un exemple.

angular.module('myModule')
    .controller("MyController",function($scope, Person, $interval){
       $scope.user = null;
        $interval(function(){
          $http.get([url])
              .then(function(data){
                  $scope.user.name = data.name;
                  $scope.user.count = data.count;
              });   // getting the data every 1 minute
          }, 60000);
    })

Peut-être que vous pensez, pourquoi avons-nous besoin du service Person ? En général, vous avez raison, mais nous pouvons l'utiliser dans notre contrôleur pour mettre à jour les données du service Person (pour d'autres composants).

Solution 2

La deuxième solution est bonne, si on a beacoup de composants et on a besoin d’utiliser le service (avoir live data (donnée directe)) dans nombreuses composants (contrôleur/directive). La solution se compose d'événements AngularJs .

Nous pouvons définir l'auditeur sur n'importe quel événement et lorsque le service obtient de nouvelles données en direct du serveur, il envoie un signal pour dire qu'il dispose de nouvelles données. Nous pouvons utiliser cet événement où nous voulons. Voyons comment on peut le faire.

angular.module('myModule')
    .service('DataManager', function($interval, $http, Person, $rootScope) {
       $interval(function(){
          $http.get([url])
             .then(function(data){
                 Person.setName(data.name);
                 Person.setListCount(data.count);
                  
                 // here we have to send signal that we have a new live data from the server
                 // we use Root Scope, because we don't know what scope architecture do we have
                 $rootScope.$broadcast("newPersonData");
             });   // getting the data every 1 minute
          }, 60000);
    })

Comme vous le voyez, on peut utiliser cet événement où nous voulons. Nous pouvons définir l'auditeur sur cet événement et lorsque le service a de nouvelles données, nous pouvons appeler les méthodes de Person pour le mettre à jour. Vous pouvez même envoyer les données à 'eventName'. Nous avons d’autres bonnes solutions. Si vous êtes intéressé, écrivez-nous sur Google+, Facebook et Twitter.