Angular JS: rende il servizio accessibile a livello globale dai controller e dalla vista

Diciamo che abbiamo il seguente servizio:

myApp.factory('FooService', function () { ... 

Quindi, da un controller, direi:

 myApp.controller('FooCtrl', ['$scope', 'FooService', function ($scope, FooService) { ... 

La domanda in due parti è:

  1. Accessibilità globale : se ho 100 controllori e tutti hanno bisogno di accedere al servizio, non voglio iniettarlo esplicitamente 100 volte. Come posso rendere il servizio globalmente disponibile? L’unica cosa a cui riesco a pensare al momento è quella di ricomporla dall’ambito di root, che sconfigge lo scopo.
  2. Accessibilità dalla vista : come posso accedere al servizio dalla vista? Questo post suggerisce di includere il servizio all’interno del controller. Se sto andando a quella lunghezza, sembra che dovrei solo implementare la funzionalità direttamente sulla portata della radice?

Trovato una soluzione ragionevole. Iniettarlo nel metodo bootstrap (esecuzione) e aggiungerlo all’ambito di base. Da lì sarà disponibile per tutti i controller e le visualizzazioni.

 myApp.run(function ($rootScope, $location, $http, $timeout, FooService) { $rootScope.foo = FooService; .... 

Rileggendo il post che ho menzionato sopra, non ha detto “wrap” esattamente … solo “astratto”, quindi presumo che il poster si riferisse a questa stessa soluzione.

Per completezza, la risposta a (1) è quindi:

 myApp.controller('FooCtrl', ['$scope', function ($scope) { // scope inherits from root scope $scope.foo.doSomething(); ... 

e la risposta a (2) è semplicemente:

 {{doSomething()}} 

Aggiungendo il commento di Christopher per assicurarsi che sia visto:

@rob – Secondo le migliori pratiche, la fabbrica dovrebbe essere iniettata nei controllori che devono usarlo, piuttosto che nell’ambiente di root. Come richiesto, la domanda numero uno in realtà è l’antipattern. Se hai bisogno della fabbrica 100 volte, la inietti 100 volte. È quasi un codice in più quando è miniato, e rende molto chiaro dove viene utilizzata la fabbrica, e rende più facile (e più ovvio) testare quei controller con mock, avendo le fabbriche richieste tutte elencate nella firma della funzione. – Christopher WJ Rueber, 25 novembre 13 alle 20:06

Per quanto riguarda l’accesso al servizio direttamente nella vista, ciò sembra estremamente non angular. Associarlo a una variabile di ambito nel controller sembra una soluzione migliore rispetto all’utilizzo del servizio direttamente nell’interfaccia utente per mantenere la separazione delle funzioni.

Complementare la domanda n. 1 (Accesibillity globale), aggiungerò che per evitare problemi durante la minifigurazione del file (se questo è il caso), dovrebbe essere scritto in questo modo:

 this.app.run(["$rootScope", "Foo", function($rootScope, FooService) { return $rootScope.fooService = FooService; } ]);