Dienstleistungen in angularJS ein kleines Beispiel.

Question

Ich gehe durch eine Reihe von Dokumentation, um Dienstleistungen und Fabriken zu verstehen. Kam über diesen Arbeitscode.

var app = angular.module('plunker', []); 
    app.value('cnt', 7); 
    app.service('foo', function(cnt) { 
     this.cnt = ++cnt; 
     this.inc = function(quan) { 
     this.cnt += quan; 
     }; 
    }); 
    app.controller('MainCtrl', function($scope, cnt, foo) { 
     $scope.cnt = cnt; 
     $scope.foo = foo; 
     $scope.inc = function() { 
     $scope.foo.inc(1); // why $scope used here 
     }; 
    }); 
    app.controller('TangentCtrl', function($scope, foo) { 
     $scope.jump = function() { 
     foo.inc(5); // Why $scope not used here and why it doesnot work when I add scope 
     }; 
    }); 

In TangentCtrl Controller $ scope.jump Funktion seiner nicht $ Umfang mit foo.inc zuzugreifen, wie Sie im Code sehen kann ich kommentiert habe. Ich denke, es gibt hier ein Konzept, das ich nicht verstehe, kann mich jemand zu diesem Thema erleuchten.

Answer 1

var app = angular.module("myApp",[]); 


function constructorFunction() { 
    this.getData = function() { 
    //bussiness logic 
    }; 
} 

/* 
    * your are registering service called myService 
    * service/factory uses singleton design pattern 
    * i.e. you have an object called myService in app 
*/ 
app.service('myService', constructorFunction); 
/* 
    * Here, you are passing sevice name (myService) and 
    * constructor Function (constructorFunction) to service 
    * provider 
    * which creates singleton object (myService) 
*/ 


/* 
    * angular uses injector to resolve dependencies 
    * your are actully tells injector to 
    * add these dependencies to your controller function 
*/ 
app.controller('myCtrl',function($scope, myService){ 
    /* 
    * Here, you get $scope and myService 
    * $scope and myService these are two different objects. 
    * It is not yet compulsory to inject $scope if you 
    * use controllerAs syntax, good practice 
    */ 
    //view specific logic 
}); 

/* 
    * Note: array syntax is useful in case of minification 
    * ['$scope', 'foo', function($scope, foo){}] 
    * angular maps minified variables with strings provided 
    * to resolve dependencies. 
*/ 

Answer 2

Das ist, weil Sie foo injiziert haben, während die Funktion controller

app.controller('TangentCtrl', function($scope, foo) {...} 

In der Steuerung erklärt, erhalten Sie Instanz des foo Service.

Idealerweise sollten Sie den Controller wie folgt schreiben. Also, wenn Sie Instanz des Dienstes innerhalb des Controllers selbst erhalten, warum benötigen Sie $scope, um auf die inc Funktion zuzugreifen?

app.controller('TangentCtrl', ['$scope', 'foo', function($scope, foo) { 
    .... 
}]); 

Answer 3

Schauen Sie diesen Code

app.service('foo', function(cnt) { 
    this.cnt = ++cnt; 
    this.inc = function(quan) { 
    this.cnt += quan; 
    }; 
}); 

Bild eine Klasse 'foo' haben, in diesem 'inc' Klasse ist eine Funktion, die Sie exportieren 'foo' als Dienst in der obigen 'foo' kann als Verbindung zwischen zwei Controllern verwendet werden, um Daten zwischen ihnen auszutauschen.

Sie sind also Injizieren foo nur in 'TangentCtrl' über diese Leitung

app.controller ('TangentCtrl', function ($ scope, foo) {......});

Also da Sie 'foo' ohne $ scope vor ihnen verwenden können, so foo.inc (5); wird die Methode inc inside foo service aufrufen und somit kann foo von anderen Controllern aufgerufen werden, um den Wert zu erhalten.