Obecnie używam Angulara 1.5. Używam routera ui jako głównego mechanizmu nawigacji. Korzystam z komponentów Angular.
Rozumiem, że mogę użyć .resolve na moich stanach, aby utworzyć wystąpienia usług, które są następnie przekazywane w dół przez moją hierarchię komponentów (głównie przy użyciu powiązań jednokierunkowych).
Jeden z moich komponentów nazywa się LiteraturaLista ijest używany w więcej niż jednej trasie / stanie. Składnik LiteraturaList korzysta z określonej usługi o nazwie LiteraturaListService. LiteraturaListService jest używana tylko przez literaturęList. LiteraturaListService potrzebuje trochę czasu na utworzenie instancji i używa obietnic itp.
W każdym z.definicje stanu, a następnie muszę mieć .resolve, który tworzy wystąpienia literaturyListService. Oznacza to, że muszę odwoływać się do tej literaturyListService w każdym z obiektów .state.resolve. To nie wydaje mi się bardzo SUCHE.
To, co naprawdę chciałbym zrobić, to usunąć odniesienia z literaturyListService z obiektów .state.resolve i „rozwiązać” usługę z „wewnątrz” samego składnika literaturyList.
Jak zakodować mechanizm „w stylu rozstrzygania” w składniku Literatura, który będzie obsługiwał asynchroniczny / obiecujący charakter usługi LiteraturyListycznej? Jaka jest najlepsza praktyka w tym zakresie?
Poniżej fragmenty kodu:
fragmenty stanu:
$stateProvider.state({
name: "oxygen",
url: "/oxygen",
views: {
"spofroot": { template: "<oxygen booklist="$resolve.literatureListSvc"></oxygen>" }
},
resolve:{
literatureListSvc: function(literatureListService){
return literatureListService.getLiterature();
}
}
});
$stateProvider.state({
name: "radium",
url: "/radium",
views: {
"spofroot": { template: "<radium booklist="$resolve.literatureListSvc"></radium>" }
},
resolve:{
literatureListSvc: function(literatureListService){
return literatureListService.getLiterature();
}
}
});
LiteraturaListService:
angular.module("literature")
.factory("literatureListService",function($http,modelService){
// Remember that a factory returns an object, whereas a service is a constructor function that will be called with "new". See this for a discussion on the difference: http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html
console.log("literatureListService factory is instantiating - this will only happen once for each full-page refresh");
// This is a factory, and therefore needs to return an object containing all the properties that we want to make available
var returnObject = {}; // Because this is a factory we will need to return a fully-formed object (if it was a service we would simply set properties on "this" because the "context" for the function would already have been set to an empty object
console.log("service instantiation reporting that modelManager.isDataDirty="+modelService.isDataDirty);
// The getLiterature method returns a promise, and therefore can only be consumed via a promise-based mechanism
returnObject.getLiterature = function($stateParams){
console.log("literatureService.getLiterature will now return a promise (via a call to $http)");
return $http({method: "GET", url: "http://localhost:3000/literature/"});
};
return returnObject;
});
składnik tlenu html:
<div>
This is the OXYGEN component which will now render a literature list, passing in bookList.data as books
<literature-list books="$ctrl.booklist.data"></literature-list>
</div>
składnik tlenowy js
angular.module("frameworks")
.component("oxygen",{
templateUrl:"frontend/framework/frameworks/oxygenComponent.html",
controller:function($http){
var $ctrl = this;
console.log("Hello from the oxygen component controller with literatureListSvc="+$ctrl.booklist); // Bound objects NOT YET AVAILABLE!!!!!!
this.$onInit = function() {
//REMEMBER!!!! - the bound objects being passed into this component/controller are NOT available until just before the $onInit event fires
console.log("Hello from the oxygen component controller onInit event with bookList="+JSON.stringify($ctrl.booklist));
};
}
,bindings:{ // remember to make these lowercase!!!
booklist:"<"
}
});
LiteraturaList, komponent html:
<div>
{{$ctrl.narrative}}
<literature-line ng-repeat="literatureItem in $ctrl.books" wizard="fifteen" book="literatureItem" on-tut="$ctrl.updateItemViaParent(itm)">555 Repeat info={{literatureItem.title}}</literature-line>
</div>
literaturaList składnik js
angular.module("literature")
.component("literatureList",{
templateUrl:"frontend/literature/literatureListComponent.html",
//template:"<br/>Template here33 {{$ctrl.listLocalV}} wtfff",
// controller:function(literatureListService){
controller:function(){//literatureListService){
var $ctrl=this;
this.narrative = "Narrative will unfold here";
this.updateItemViaParent = function(book){
this.narrative = "just got notified of change to book:"+JSON.stringify(book);
};
this.$onInit = function(){
console.log("literatureList controller $onInit firing with books="+JSON.stringify($ctrl.books));
};
this.$onChanges = function(){
console.log("literatureList controller $onChanges firing");
};
},
bindings: {
books:"<"
}
});
Odpowiedzi:
0 dla odpowiedzi № 1Ponieważ JavaScript jest oparty na referencjach, możesz utworzyć obiekt w swojej usłudze i uzyskać do niego dostęp we wszystkich trzech kontrolerach, których potrzebujesz.
Na przykład:
function serviceA() {
var vm = this;
vm.testObject = {};
vm.promise1().then(function(response) {
vm.testObject = response;
})
}
function ControllerA($scope, serviceA) {
$scope.testA = service.testObject;
}
W takim przypadku, gdy tylko obietnica zostanie rozwiązana, wszystkie kontrolery otrzymają wartość odpowiedzi i mogą być odpowiednio użyte w częściach podrzędnych