template I servizi di Angularjs sono singleton?




angularjs template (4)

È singleton, c'è un solo oggetto, ma è iniettato in molti posti. (gli oggetti vengono passati facendo riferimento a un metodo)

Tutti i tuoi Animal sono puntatori di oggetti che si riferiscono allo stesso oggetto animale che è una funzione nel tuo caso. Il tuo Cat e Dog sono oggetti costruiti da questa funzione.

Nel reference ho letto:

Infine, è importante rendersi conto che tutti i servizi angolari sono singleton applicativi. Ciò significa che esiste una sola istanza di un determinato servizio per iniettore.

ma con questo semplice codice sembra non essere un singleton

'use strict';
            angular.module('animal', [])
                .factory('Animal',function(){
                    return function(vocalization){
                        return {
                            vocalization:vocalization,
                            vocalize : function () {
                                console.log('vocalize: ' + this.vocalization);
                            }
                        }
                    }
                });    
                angular.module('app', ['animal'])
                    .factory('Dog', function (Animal) {
                        return Animal('bark bark!');
                    })
                    .factory('Cat', function (Animal) {
                        return Animal('meeeooooow');
                    })
                .controller('MainCtrl',function($scope,Cat,Dog){
                     $scope.cat = Cat;
                     $scope.dog = Dog;
                     console.log($scope.cat);
                     console.log($scope.dog);
                    //$scope.cat = Cat;
                });

Sono un po 'confuso, mi puoi spiegare qual è il problema?

AGGIORNAMENTO 1 Può essere che non sono lo strumento più nitido nel capannone, ma dopo aver risposto @Khanh, sarebbe una spiegazione migliore nel riferimento, non è molto chiaro.

AGGIORNAMENTO 2

'use strict';
            angular.module('animal', [])
                .factory('Animal',function(){
                        return {
                            vocalization:'',
                            vocalize : function () {
                                console.log('vocalize: ' + this.vocalization);
                            }
                        }

                });
                angular.module('dog', ['animal'])
                    .factory('Dog', function (Animal) {
                        Animal.vocalization = 'bark bark!';
                        Animal.color = 'red';
                        return Animal;
                    });

                angular.module('cat', ['animal'])
                   .factory('Cat', function (Animal) {
                        Animal.vocalization = 'meowwww';
                        Animal.color = 'white';
                        return Animal;
                    });
                 angular.module('app', ['dog','cat'])
                .controller('MainCtrl',function($scope,Cat,Dog){
                     $scope.cat = Cat;
                     $scope.dog = Dog;
                     console.log($scope.cat);
                     console.log($scope.dog);
                    //$scope.cat = Cat;
                });

BOOM è un singleton!

AGGIORNAMENTO 3

Ma se ti piace

'use strict';
            angular.module('animal', [])
                .factory('Animal',function(){
                    return function(vocalization){
                        return {
                            vocalization:vocalization,
                            vocalize : function () {
                                console.log('vocalize: ' + this.vocalization);
                            }
                        }
                    }
                });    
                angular.module('app', ['animal'])
                    .factory('Dog', function (Animal) {
                        function ngDog(){
                            this.prop = 'my prop 1';
                            this.myMethod = function(){
                                console.log('test 1');
                            }
                        }
                        return angular.extend(Animal('bark bark!'), new ngDog());
                    })
                    .factory('Cat', function (Animal) {
                        function ngCat(){
                            this.prop = 'my prop 2';
                            this.myMethod = function(){
                                console.log('test 2');
                            }
                        }
                        return angular.extend(Animal('meooow'), new ngCat());
                    })
                .controller('MainCtrl',function($scope,Cat,Dog){
                     $scope.cat = Cat;
                     $scope.dog = Dog;
                     console.log($scope.cat);
                     console.log($scope.dog);
                    //$scope.cat = Cat;
                });

Funziona


Il tuo esempio utilizza una factory , non un service . Nota che anche il provider fa parte del gioco.

La migliore risorsa di apprendimento finora:

AngularJS: Service vs provider vs factory

C'è una spiegazione illuminante di Miško Hevery e un esempio pratico di factory , service e provider . Lo consiglio vivamente .


Sì, il servizio è singleton. Il seguente codice registra solo una "M" per console:

function M() { console.log('M'); }
function M1(m) { console.log(1); }
function M2(m) { console.log(2); }
angular.module('app', [])
.service('M', M)
.service('M1', ['M', M1])
.service('M2', ['M', M2])
.controller('MainCtrl',function(M1, M2){});

eseguilo in jsbin


Lasciatemi fare un esempio sui singleton in AngularJS. Supponiamo di avere 2 controller usati in diverse parti della nostra applicazione a pagina singola:

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

    $log.main = 'First Var';
    $log.log($log);

}]);

Quindi ora se siamo andati alla pagina che è controllata mainController controller di mainController , lo vedremo nel registro:

Come vedi, l'oggetto log ora contiene la mia prima variabile.

Ora ecco il mio secondo controller:

myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {

    $log.secondVar = 'Second Var';
    $log.log($log);

}]);

Quindi, se fai clic sulla seconda pagina controllata, vedrai questo:

Ora torna alla prima pagina:

Cosa ne pensi di quei 3 passi?

Il loro è un oggetto $log iniettato nell'app. E come ha detto Tony Alicea: questo è un grande risparmio di memoria.

Quindi questo servizio, è chiamato una volta, e ogni volta stiamo aggiungendo nuove variabili e parametri allo stesso oggetto e non aggiungendo oggetti diversi per parametri diversi.





angularjs