2013-06-05 9 views
18

Diciamo che ho fatto un modulo con un servizio e un controllore in Angular.js, sono in grado di accedere a tale servizio all'interno del controller in questo modo:In che modo i nomi degli argomenti delle funzioni negli oggetti Angular.js si connettono ad altri oggetti?

var myapp = angular.module('my-app', []); 

myapp.factory('Service', function() { 
    var Service = {}; 
    Service.example = 'hello'; 
    //etc.. 
    return Service; 
}); 

myapp.controller('mainController', function($scope, Service) { 
    $scope.greeting= Service.example; 
}); 

In questo esempio, l'oggetto servizio sarà passato al controller, e strutturare il codice in questo modo non cambierà il comportamento del codice:

myapp.controller('mainController', function(Service, $scope) { 
    $scope.greeting= Service.example; 
}); 

così, come si fa Angular.js "sapere" che cosa significano gli argomenti della funzione?

+1

Sei proprio sicuro è possibile invertire gli argomenti del genere? Sarebbe * molto * sorprendente. –

+3

** Wow ** è la documentazione angolare bellissima .... e assolutamente impossibile da navigare se non si conosce già bene l'angolare. Diamine, non riesco nemmeno a trovare quella funzione nei documenti API. Posso trovare qualcosa che assomiglia vagamente [qui] (http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller), ma l'esempio è una "nota" e sta passando qualcosa di completamente diverso come il secondo argomento . –

+0

@ T.J.Crowder - Sì ... è un po 'un casino. Sono stato praticamente vivo lì da un paio di settimane e continuo a scoprire che è più semplice navigare il codice sorgente su GitHub. –

risposta

21

Angolare analizza semplicemente la rappresentazione toString() della funzione per i nomi delle dipendenze. Da the docs:

In JavaScript chiamando toString() su una funzione restituisce la definizione della funzione. La definizione può quindi essere analizzata e gli argomenti della funzione possono essere estratti.

Tuttavia, notare che questo approccio avrà esito negativo se il codice è limitato. Per questo motivo, angolare supporta alternativa (vorrei suggerire sempre usarlo) la sintassi, utilizzando una matrice:

myapp.controller('mainController', ["$scope", "Service", function($scope, Service) { 
    $scope.greeting= Service.example; 
}]); 
+1

Ovviamente non è standard. 'Funzione # toString' non è definita da nessuna parte come restituire la fonte. Funziona su tutti i browser desktop che abbia mai visto, ma ... –

+1

@ T.J.Crowder - In effetti, ma Angular ha una suite di test completa e 'Function.prototype.toString' funziona come previsto in tutti i suoi browser supportati. Ma io uso sempre la sintassi dell'array più sicuro. –

+0

Puoi spiegare come ciò che hai collegato riguarda la domanda? Non fraintendermi: conosco i tuoi contributi qui abbastanza bene da sapere (sulla fede) che sono imparentati. Ma un commento che spiega il collegamento potrebbe aiutare le persone che si dibattono nei documenti belli ma terribili ... :-) –

6

Questo si ottiene con il metodo abbastanza intelligente annotate (source) che prende una scansione regex sulla fonte firma di funzione (usando function.toString()) e spinge in modo iterativo ogni argomento di funzione nella funzione $inject array.

Lo stesso risultato si compie quando si specifica manualmente la matrice $inject come in:

var MyController = function($scope, myService) { 
    // ... 
} 
// Define function dependencies 
MyController.$inject = ['$scope', 'myCustomService']; 
Problemi correlati