小さなサービスのangularJSのサービス。

Question

私はサービスと工場を理解するためにシリーズのドキュメントを読む予定です。 この作業コード全体に渡っています。 TangentCtrlコントローラの$ scope.jump機能で

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 
     }; 
    }); 

そのないあなたは、私がコメントしているコードに見ることができるようfoo.incにアクセスするには$スコープを使用して。 私は理解していないというコンセプトがいくつかあると思います。誰も私にこのことを教えてくれますか？あなたは、コントローラの機能でcontroller

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

を宣言しながら、あなたはfooサービスのインスタンスを取得fooを注入しているためである

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

。

理想的には、次のようにコントローラを記述してください。したがって、コントローラ自体の中でサービスのインスタンスが取得された場合、関数にアクセスするには、なぜ$scopeが必要ですか？

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

Answer 3

あなたはこのクラスの株式会社」に、クラスのfoo 'を持って、このコード

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

イメージの機能である、あなたは上記の中で、サービスとして「foo」を輸出しているのを見て'foo'は、2つのコントローラ間のデータを渡すために2つのコントローラ間の接続として使用できます。だから、あなたはこのラインを経由して 'TangentCtrl' に

app.controller FOOを注入している

（ 'TangentCtrl'、関数（$スコープ、FOOを）{......}）;

だから、あなたの前に$ scopeなしで 'foo'を使うことができるので、foo.inc（5）; fooサービス内でメソッドincを呼び出すため、他のコントローラからfooを呼び出して値を取得することができます。