저는 이미이 문제에 대한 인터넷 검색을하고 있었지만 제대로 작동하는 해결책을 찾지 못했습니다.모든 루트 확인이 완료 될 때까지 루트 수준에서로드 표시기를 표시하십시오.
저는 AngularJS 1.5.5와 .NET Web API 2를 사용하여 웹 응용 프로그램을 구축했습니다. 경로에서 모든 해결이 완료 될 때까지 ng-view 요소를 숨기려고합니다.
false 때까지 내용을 숨길 인덱스 HTML에서 사용되는
$rootScope에 변수를 설정
$routeChangeStart 및
$routeChangeSuccess를 사용하는 것을 시도하고있다. 여기
는 routeChange 속성에 대한 내 라우팅 코드 : 내 HTML을 사용하고 여기
_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;
});
}]);
그리고 그 $loadingRoute 변수 : 내가 다루는 기사를 꽤 많이 있다는 걸 이해
<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>
이것은하지만 내 경우에는 효과가없는 것 같습니다. $loadingRoute은 <section></section> 태그 앞에 HTML에 {{$loadingRoute}}을 추가하면 예상대로 경로 변경이 시작될 때 true로 설정됩니다. 그러나 이 해결되기 전에 $routeChangeSuccess이 실행되면 예상치 못한 $rootScope.$loadingRoute = false으로 설정됩니다.
나는 모든 해결이 현재 경로에서 완료된 후에 $routeChangeSuccess 만 해고 당했다는 인상을 받았다.
내가 여기서 분명히 잘못된 것을하고 있습니까? 또는 Angular가 단순히 변경 되었습니까?
편집 : 나는 이전 프로젝트에서이 접근법이 작동했다는 점을 추가하고 싶습니다. 그래서 나는 잘못되어 가고있는 것에 관해서는 실질적인 손실을보고 있습니다. I 은 각 페이지 컨트롤러에서 수동으로 $rootScope.$loadingRoute으로 설정할 수 있지만 너무 어둡고 유지 관리가 어렵다고 느낍니다.
편집 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)
}
});
}
])
그래도 문제가 해결되지 않으면 문제가 발생했습니다. 관련성이 있지만 게시되지 않은 코드가 너무 많습니다. accountService와 accountController는 어디에 있습니까? – estus
AccountController는 컨트롤러 내부의 모든 코드가 해결 된 후에 실행되므로이 상황에서는 부적합합니다. 이 서비스에 관해서는 Get 메소드에 대한 매우 간단한 Angular $ 리소스 호출 인'accountResource.getMyAccountData()'를 반환합니다. 즉, 웹 API가 응답을 리턴 한 후에 해결되는 약속을 리턴합니다. 약속이 해결되기 전에'$ routeChangeSuccess'가 실행되고 있습니다. 올바르지 않다고 생각합니다. 서비스 및 리소스에서 몇 줄의 코드를 실제로보고 싶다면 그 코드를 공유 할 수 있습니다. –
getMyAccountData가 실제로 약속을 반환한다는 증거는 없습니다. 당신이 묘사하고있는 것은 그것이 약속을 되풀이하지 않는다면 가능하며, 그렇지 않을 경우 일어날 가능성은 희박합니다. 모든 관련 코드를 제공하고 문제를 재현 할 수있는 큰소리로/덧붙이기를 추가하십시오. http://stackoverflow.com/help/mcve 참조하십시오. – estus