AngularJS Aktien Fabriken mit $ rootScope & dann verwerfen $ rootScope

Ich möchte so Funktionen in meiner App, für die ich wenige Fabriken haben. Das Problem ist, dass ich alle diese Fabriken bei Bedarf in jedem Controller hinzufügen muss. Mit zunehmender Anzahl der Fabriken & Controller ist dies mühsame Aufgabe!

Also habe ich versucht, einen Weg zu finden, diese Redundanz zu reduzieren. In gerade SO für gleiche, Ich habe folgende Frage:

Can I make a function available in every controller in angular?

Dies ist, was ich suche, und die unten Antwort suchen am besten geeignet für mich:

https://stackoverflow.com/a/24714658/3375368

Nun möchte ich einen Schritt voraus gehen, indem ich die Notwendigkeit der Einfügung $rootScope entfernen muss!

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
    <script type="text/javascript"> 
     var myApp = angular.module('myApp', []); 

     myApp.factory('myService', function() { 
      return { 
       foo: function() { 
        alert("I'm foo!"); 
       } 
      }; 
     }); 

     myApp.run(function($rootScope, myService) { 
      $rootScope.appData = myService; 
     }); 

     myApp.controller('MainCtrl', ['$scope', '$rootScope', function($scope, $rootScope){ 

      appData.foo() //This wont work 
      $rootScope.appDate.foo() //This will work 

      //Is there a way to remove dependancy on $rootScope?? 

     }]); 

    </script> 
</head> 
<body ng-controller="MainCtrl"> 
    <button ng-click="appData.foo()">Call foo</button> 
    <!-- This works, but I wont be using this, its from original post --> 
</body> 
</html>

Eine andere Frage ist, ob dieser Ansatz gut ist? & Wie wirkt sich dies auf das Funktionieren der gemeinsamen Nutzung von Daten aus, d. H. Gibt es Fallstricke?

Quelle

2017-04-03 demonofthemist

Wahrscheinlich keine gute Idee, Ihre Ansicht direkt Ihre Dienste aufrufen zu lassen. Warum möchten Sie die $ rootScope-Abhängigkeit entfernen? – JLRishe

@JLRishe, um Abhängigkeit Injektion zu reduzieren, wenn möglich – demonofthemist

@JLRishe Ich bin ziemlich neu zu angularjs, nur angefangen, es in der Tiefe zu erkunden, wenn dies der geeignete Weg ist, um zu tun, dann bin ich damit einverstanden, ich bin nur neugierig, ob ich kann auf andere Weise gemacht werden und was sind Konsequenzen! – demonofthemist

Wenn Ihre Dienste auf der $rootScope sind, sollten sie von der $scope zugänglich sein. Es gibt also keine Notwendigkeit, eine Abhängigkeit von $rootScope enthalten:

<!doctype html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
 
    <script type="text/javascript"> 
 
     var myApp = angular.module('myApp', []); 
 

 
     myApp.factory('myService', function() { 
 
      return { 
 
       foo: function() { 
 
        alert("I'm foo!"); 
 
       } 
 
      }; 
 
     }); 
 

 
     myApp.run(function($rootScope, myService) { 
 
      $rootScope.appData = myService; 
 
     }); 
 

 
     myApp.controller('MainCtrl', ['$scope', function($scope){ 
 
      $scope.appData.foo() //This will work 
 
     }]); 
 

 
    </script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
    <button ng-click="appData.foo()">Call foo</button> 
 
    <!-- This works, but I wont be using this, its from original post --> 
 
</body> 
 
</html>

Allerdings ist es keine gute Idee, all das Zeug auf die $rootScope zu laden. AngularJS die Abhängigkeit Einspritzsystems besteht aus einem Grund, aber wenn man wirklich wollen vermeiden, wirklich tatsächlich Dienste wie sie gemeint waren, dann könnte man ein Aggregat Service erstellen, die anderen alle enthält:

<!doctype html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
 
    <script type="text/javascript"> 
 
     var myApp = angular.module('myApp', []); 
 

 
     myApp.factory('myService', function() { 
 
      return { 
 
       foo: function() { 
 
        alert("I'm foo!"); 
 
       } 
 
      }; 
 
     }); 
 

 
     myApp.factory('allMyServices', ['myService', function (myService) { 
 
      return { 
 
       myService: myService 
 
      }; 
 
     }]); 
 
     myApp.controller('MainCtrl', ['$scope', 'allMyServices', function($scope, allMyServices){ 
 
      allMyServices.myService.foo() //This will work 
 
     }]); 
 

 
    </script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
</body> 
 
</html>

Quelle

2017-04-03 08:40:50 JLRishe

Danke für die Mühe. Eine Frage dachte, wie individuell Abhängigkeitsinjektion anders ist als dieser zweite Ansatz? – demonofthemist

@demonofthemist in der zweiten Ansatz, müssen Sie nur "allMyServices" als Abhängigkeit injizieren, so die _tedious_ Aufgabe der Injektion aller verschiedenen Dienste in die Controller ist gelöst – tanmay

@tanmay: D, Ja das ist der wichtigste Punkt!Aber ich habe gefragt, weil wir die Dienste nicht so nutzen, wie sie vorgesehen sind. Gibt es Unterschiede in der Arbeitsweise oder im Verhalten? – demonofthemist

AngularJS Aktien Fabriken mit $ rootScope & dann verwerfen $ rootScope

Antwort

Verwandte Themen