Główne pytanie - czy to możliwe? Próbowałem bez powodzenia ...
główna aplikacja.js
...
var app = angular.module('myApp', ['services']);
app.config(['customProvider', function (customProvider) {
}]);
...
sam dostawca
var services = angular.module('services', []);
services.provider('custom', function ($http) {
});
I mam taki błąd:
Uncaught Error: Unknown provider: $http from services
Jakieś pomysły?
Dzięki!
app.configczęści
Odpowiedzi:
Framework Angular ma 2-fazowy proces inicjalizacji:
W tej configfazie inicjowani są wszyscy dostawcy i configwykonywane są wszystkie sekcje. Te configsekcje mogą zawierać kod, który konfiguruje obiektów dostawcy i dlatego można je podawać z obiektami dostawcy. Ponieważ jednak dostawcy są fabrykami obiektów usług i na tym etapie dostawcy nie są w pełni zainicjowani / skonfigurowani -> na tym etapie nie możesz poprosić dostawcy o utworzenie usługi dla Ciebie -> na etapie konfiguracji nie możesz użyć / wstrzyknąć usługi . Po zakończeniu tej fazy wszyscy dostawcy są gotowi (po zakończeniu fazy konfiguracji nie można już konfigurować dostawców).
W runfazie wszystkie runsekcje są wykonywane. Na tym etapie dostawcy są gotowi i mogą tworzyć usługi -> podczas runfazy możesz korzystać z usług / wstrzykiwać .
$httpusługi do funkcji inicjalizacji dostawcy NIE BĘDZIE działać
//ERRONEOUS
angular.module('myModule').provider('myProvider', function($http) {
// SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
...
this.$get = function() {
// code to initialize/configure the SERVICE goes here (executed during `run` stage)
return myService;
};
});
Ponieważ próbujemy wstrzyknąć $httpusługę do funkcji, która jest wykonywana w tej configfazie, otrzymamy błąd:
Uncaught Error: Unknown provider: $http from services
Ten błąd w rzeczywistości mówi, że plik, $httpProviderktóry jest używany do tworzenia $httpusługi, nie jest jeszcze gotowy (ponieważ wciąż jesteśmy w tej configfazie).
$httpusługi do funkcji inicjalizacji usługi BĘDZIE zadziałało://OK
angular.module('myModule').provider('myProvider', function() {
// SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
...
this.$get = function($http) {
// code to initialize/configure the SERVICE goes here (executed during `run` stage)
return myService;
};
});
Ponieważ teraz wstrzykujemy usługę do funkcji inicjalizacji usługi, która jest wykonywana w runfazie, ten kod będzie działał.
<script>var config = <% = mySettings.toJson() %>;</script>.). Można to zrobić za pomocą silnika tworzenia szablonów, takiego jak Smarty for PHP, Jinja2 for Python, Nunchucks for NodeJS itp.
To może dać ci niewielką dźwignię:
var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
Ale bądź ostrożny, wywołania zwrotne sukcesu / błędu mogą utrzymywać Cię w sytuacji wyścigu między uruchomieniem aplikacji a odpowiedzią serwera.
angular.injector(['mymodule'])- ale nie jestem pewien, czy możesz zastosować to podejście do $httpusługi. Chcę powiedzieć, że tak. Nie jestem pewien, czy to pomoże, czy nie: - /
To stare pytanie, wydaje się, że mamy do czynienia z jajkiem kurzym, jeśli chcemy polegać na podstawowych możliwościach biblioteki.
Zamiast rozwiązać problem w fundamentalny sposób, zrobiłem obejście. Utwórz dyrektywę, która otacza całe ciało. Dawny.
<body ng-app="app">
<div mc-body>
Hello World
</div>
</body>
Teraz mc-bodymusi zostać zainicjowany przed renderowaniem (raz), np.
link: function(scope, element, attrs) {
Auth.login().then() ...
}
Auth jest usługą lub dostawcą, np.
.provider('Auth', function() {
... keep your auth configurations
return {
$get: function($http) {
return {
login: function() {
... do something about the http
}
}
}
}
})
Wydaje mi się, że mam kontrolę nad kolejnością ładowania początkowego, jest to po tym, jak zwykły program ładujący rozwiązuje całą konfigurację dostawcy, a następnie próbuje zainicjować mc-bodydyrektywę.
Wydaje mi się, że ta dyrektywa może wyprzedzać routing, ponieważ routing jest również wstrzykiwany za pośrednictwem dyrektywy ex. <ui-route />. Ale co do tego mogę się mylić. Potrzebuje więcej badań.
W odpowiedzi na Twoje pytanie „Jakieś pomysły?” Odpowiedziałbym „tak”. Ale czekaj, jest więcej!
Proponuję po prostu użyć JQuery w konfiguracji. Na przykład:
var app = angular.module('myApp', ['services']);
app.config(['$anyProvider', function ($anyProvider) {
$.ajax({
url: 'www.something.com/api/lolol',
success: function (result) {
$anyProvider.doSomething(result);
}
});
}]);