Angularjs:$routeProvider에서 'resolve'를 사용할 때 loading-icon을 표시하는 방법은 무엇입니까?

Angularjs:$routeProvider에서 'resolve'를 사용할 때 loading-icon을 표시하는 방법은 무엇입니까?

다음 코드는 서비스를 통해 읽고 웹 페이지에 특정 '페이지 범주'(문자열)에 대한 '페이지' 개체 목록을 표시합니다.$routeProvider에서 해결 개체 속성을 사용합니다.( )의 경우, 새로운 값이 준비될 때까지 뷰 갱신을 연기할 수 있습니다.

두 가지 질문:

1. 새로운 페이지 리스트를 요청할 때 loading-icon을 보여주고 싶습니다.서버로부터의 판독이 개시되었을 때(및 loading-icon이 표시되어야 할 때) 이벤트를(해킹 이외의 방법으로) 검출하려면 어떻게 해야 합니까?$('pages-loading-icon') 같은 것도 할 수 있을 것 같아요.서비스에서는 show()이지만 서비스에서는 gui 의존도가 너무 높아집니다.

2. 새로운 값이 준비되면 오래된 것은 페이드 아웃하고 새로운 것은 페이드 인하고 싶다.이것을 '각선'으로 하는 방법은 무엇입니까?$watch를 사용하여 컨트롤러에서 시도했지만 페이드아웃이 시작되기 직전에 새로운 값이 표시됩니다.

코드:

app.filename:

$routeProvider.when('/:cat', { templateUrl: 'partials/view.html', controller: RouteCtrl, resolve: RouteCtrl.resolve});

controllers.controllers:

function RouteCtrl($scope, $routeParams, pages) {
        $scope.params = $routeParams;
        $scope.pages = pages;
    }

RouteCtrl.resolve={
    pages: function($routeParams, Pages){
        if($routeParams.hasOwnProperty('cat')){
            return Pages.query($routeParams.cat);
        }
    }
}

services.syslog:마지막으로 읽은 페이지는 currentPages 및 해당 카테고리는 lastCat에 저장됩니다.

factory('Pages', function($resource, $q, $timeout){
    return {
        res: $resource('jsonService/cat=:cat', {}, {
            query: {method:'GET', params:{cat:'cat'}, isArray:true}
        }),
        lastCat: null,
        currentPages: null,
        query: function(cat) {
            var res = this.res;
            if(cat != this.lastCat){
                var deferred = $q.defer();
                var p = res.query({'cat':cat}, function(){
                    deferred.resolve(p);
                });
                this.lastCat = cat;
                this.currentPages = deferred.promise;
            }
            return this.currentPages;
        }
    };
})

표시. 삭제

<ul >
    <li ng-repeat="page in pages">
        <a href="#{{params.cat}}/{{page.slug}}">{{page.title}}</a>
    </li>
</ul>

$resource 통합이 있기 때문에 이것이 당신의 코드로 동작할지는 확실하지 않습니다.가 있는 가치가 것이다.$routeChangeStart ★★★★★★★★★★★★★★★★★」$routeChangeSuccess.

html:

<span ng-show="isViewLoading"> loading the view... </span>

in controller(위 html의 범위를 정의합니다):

$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
  $scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
  $scope.isViewLoading = false;
});
$scope.$on('$routeChangeError', function() {
  $scope.isViewLoading = false;
});

앵귤러 라우팅 시스템은 조금 제한적인 것 같습니다.

이이로 this this this this 。
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htmhttpwww.bennadel.com/blog/.htm

또한 두 번 트리거하는 이벤트에 대해: 루트 맵을 "a/b/c"로 설정하면 각도가 자동으로 다른 루트 "a/b/c/"(후행 슬래시 포함)를 설정하여 첫 번째(및 그 반대)로 리디렉션하고 두 가지 이벤트를 트리거합니다.루트 파라미터가 존재하는지 테스트합니다.

라우팅 시스템의 제한적인 조건에 대해서: 각도에서 끌어당겨 성능을 확장합니다.

도 이렇게 것 같아요.$rootScope'모니터링'이$scope는 컨트롤러에 한정되어 있습니다.또한 어떤 뷰(컨트롤러)에서 다른 뷰(다른 컨트롤러)로 전환됩니다. 때문에 원코드핏올, 원코드핏올, 원코드핏올, 원코드핏올, 원코드핏올, 원코드핏올, 원코드핏올, 원코드핏올, 원코드핏핏올, 원코드핏핏핏핏올, 이 됩니다.

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... })

이 기능에서는,$rootScope.isLoadingState로딩 인디케이터가 표시됩니다.

그 후 사용

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

변수를 설정 해제하려면

자세한 참조는 이쪽

ng-show 디렉티브를 사용할 수도 있습니다.모델이 비어 있는지 확인하고 다음과 같이 DOM 서브셋을 표시하기만 하면 됩니다.

    <!-- model not ready -->
    <div style="width: 200" ng-show="lines == ''">
      <div class="progress progress-striped active">
         <div class="bar" style="width: 0%;"></div>
      </div>
    </div>

    <!-- your model code -->
    <ul class="nav nav-tabs nav-stacked">
      <li ng-repeat="line in lines">
        {{line.Id}}
      </li>
    </ul>

마음에 들어요.'ng-show'...그런데...'ui-if'각 UI 프로젝트의 IMHO가 더 우수합니다.HTML 코드를 DOM에서 삭제했으므로...

<span ui-if = "isViewLoading"> loading the view... </span>

_e

서비스 콜 전후에 송신하는 브로드캐스트에 근거해 표시되는 디렉티브를 작성할 수 있습니다.이 디렉티브는 $rootScope에 배치할 수 있습니다.따라서 일반적인 POST/GET 호출을 처리하기 위해 공장에 전화할 경우 호출 직전에 $rootScope.startLoading() 등의 함수를 호출할 수 있습니다.이러한 메서드가 종료되면 $rootScope.DoneLoading()을 호출하여 명령어로 이벤트를 브로드캐스트할 수 있습니다.그럼 사건을 파악하라는 지시만 하면 돼 "스코프"$on("start Loading"), func(...) 및 로딩 div 템플릿을 DOM에 삽입/표시하고 실행하도록 합니다.또한 로딩 완료에 대한 캐치가 있어 삭제/숨깁니다.

이렇게 하면 일반적인 로딩 오버레이를 멋지게 만들 수 있습니다.

언급URL : https://stackoverflow.com/questions/12352411/angularjs-how-to-display-loading-icon-when-using-resolve-in-routeprovider