Ich habe bereits einige Googling um diese, aber ich bin nicht in der Lage, eine Lösung zu finden, die funktioniert.Zeige Ladeindikator auf root-Ebene, bis alle Routenvervollständigungen abgeschlossen sind
Ich benutze AngularJS 1.5.5 und .NET Web API 2, um eine Webanwendung zu erstellen, und ich würde einfach das Element ng-view ausblenden, bis alle Verschlüsse auf der Route abgeschlossen sind.
Ich versuche, die $routeChangeStart und $routeChangeSuccess auf eine Variable auf den $rootScope zu verwenden, die im Index html verwendet wird, um die Ladeanzeige angezeigt werden und den Inhalt verstecken, bis die Variable false ist.
Hier ist mein Routing-Code für die routeChange Eigenschaften:
_app.config([
'$routeProvider', '$httpProvider', '$provide',
function ($routeProvider, $httpProvider, $provide) {
$routeProvider.when('/Account',
{
templateUrl: '/Content/js/areas/account/account.html',
controller: 'accountController',
resolve: {
$accountResolver: function (accountService) {
return accountService.getMyAccountData();
}
},
caseInsensitiveMatch: true
});
$routeProvider.otherwise({ redirectTo: '404' });
}
]);
_app.run(['$rootScope', '$location', '$window', '$q', 'authService',
function ($rootScope, $location, $window, $q, authService) {
$rootScope.$on("$routeChangeStart",
function (e, curr, prev) {
$rootScope.$loadingRoute = true;
});
$rootScope.$on("$routeChangeSuccess",
function (evt, next) {
$rootScope.$loadingRoute = false;
});
$rootScope.$on("$routeChangeError",
function (evt, next) {
$rootScope.$loadingRoute = false;
});
}]);
Und hier ist mein html mit, dass $loadingRoute Variable:
<body class="ng-cloak" data-ng-app="wishlist" data-ng-controller="appController">
<wl-header></wl-header>
<preloader ng-if="$loadingRoute"></preloader>
<section ng-view ng-if="!$loadingRoute" class="container ng-cloak"></section>
</body>
Ich verstehe, dass viele Artikel ganz es bedeckt das scheint aber bei mir nicht zu funktionieren. $loadingRoute wird auf "true" gesetzt, wenn die Routenänderung wie erwartet beginnt, was ich sehen werde, wenn ich {{$loadingRoute}} vor dem Tag zum HTML hinzufüge. Bevor jedoch die $accountResolver aufgelöst wird, wird die $routeChangeSuccess ausgelöst, Einstellung $rootScope.$loadingRoute = false, die unerwartet ist.
Ich hatte den Eindruck, dass $routeChangeSuccess nur ausgelöst wurde, nachdem alle Auflösungen auf der aktuellen Route abgeschlossen wurden.
Mache ich etwas wirklich offensichtlich falsch hier? Oder hat sich Angular einfach verändert?
Edit: Ich möchte auch hinzufügen, dass dieser Ansatz in früheren Projekten funktioniert hat, also bin ich ein echter Verlust, was schief läuft. I könnte$rootScope.$loadingRoute in jedem Seitencontroller manuell einstellen, aber das fühlt sich zu schmutzig und nicht zu halten.
Edit 2:
_app.factory('accountService', [
'accountResource',
function (accountResource) {
var _self = this;
return {
register: function (authData) {
return accountResource.register(authData);
},
getMyAccountData: function() {
return accountResource.getMyAccountData();
}
}
}
]);
_app.factory('accountResource', [
'$resource', 'rootUrl',
function ($resource, rootUrl) {
var api = rootUrl() + 'api/Account';
return $resource(api,
{},
{
register: {
method: 'POST',
url: '{0}/register'.format(api)
},
getMyAccountData: {
method: 'GET',
url: '{0}/GetMyAccountData'.format(api)
}
});
}
])
Wenn das nicht funktioniert, dann haben Sie etwas falsch gemacht. Es gibt zu viel Code, der relevant ist, aber nicht veröffentlicht wird. Wo sind accountService und accountController? – estus
AccountController ist in dieser Situation irrelevant, da nach dem Auflösen der Code im Controller ausgeführt wird. Was den Dienst betrifft, gibt es 'accountResource.getMyAccountData()' zurück, was ein sehr einfacher Angular $ -Ressourcenaufruf zu einer Get-Methode ist. Kurz gesagt, gibt es ein Versprechen zurück, das aufgelöst wird, nachdem die Web-API eine Antwort zurückgegeben hat. Der '$ routeChangeSuccess' wird ausgelöst, bevor das Versprechen aufgelöst wurde, was ich für falsch halte. Wenn Sie wirklich die paar Codezeilen im Service und in der Ressource sehen möchten, kann ich sie teilen. –
Es gibt keine Beweise, dass getMyAccountData wirklich ein Versprechen zurückgibt. Das, was du beschreibst, ist möglich, wenn es kein Versprechen gibt, und es ist sehr unwahrscheinlich, dass es anders passieren kann. Bitte geben Sie den relevanten Code an und überlegen Sie, ob Sie eine Plunk/Geige hinzufügen möchten, die das Problem reproduzieren kann. Siehe http://StackOverflow.com/Help/Mcve – estus