Angular ui-router 라이프 사이클이란 무엇입니까(사일런트 오류 디버깅용)

Angular ui-router 라이프 사이클이란 무엇입니까(사일런트 오류 디버깅용)

제가 찾은 최고의 것은 http://www.ng-newsletter.com/posts/angular-ui-router.html입니다.예를 들어, 그 순서는 그다지 깊지 않다.$stateChangeStart,exampleState.onEnter,exampleState.resolve,그리고.exampleState.templateProvider불.

훌륭한 답변 형식은 깨끗할 것입니다.예를 들어 다음과 같습니다.

1. 상태 foo의 초기 페이지 로드:

   1. 각도 라이프 사이클 단계 1
   2. UI 라우터의 라이프 사이클 순서1
   3. UI 라우터의 라이프 사이클이 해결되다
   4. UI 라우터 라이프 사이클 on Enter fures
   5. 각도 라이프 사이클 스텝 2

2. 상태 변경 foo -> 바

   1. $stateChangeStart이벤트 화재
   2. 후우 onExit기동하다
   3. 막대기 onEnter파이어스
   4. templateUrl템플릿을 가져옵니다.
   5. UI 라우터는 다이제스트루프(또는 임의의 장소)의 각도 라이프 사이클에 다시 접속합니다.

3. 중첩된 상태

4. 여러 개의 명명된 보기:

5. ui-sref 클릭

기타... 감사합니다!

편집: 디버깅 기능을 통해 니즈를 충족시킬 수 있는 충분한 통찰력을 얻을 수 있었습니다.아래의 답변을 참고해 주십시오.

몇 가지 실험 후, 나는 내 앱을 디버깅하고 무슨 일이 일어나고 있는지 알 수 있을 정도로 라이프 사이클을 잘 들여다보는 방법을 알아냈다.여기서의 onEnter, onExit, stateChangeSuccess, viewContentLoaded 등의 모든 이벤트를 사용하여 기입된 라이프 사이클보다 더 유연하고 코드에 고유한 방식으로 언제 일이 발생하는지 알 수 있었습니다.앱 모듈의 "실행" 기능에서 다음을 배치했습니다.

이 코드를 사용하면 Angular와 UI-router를 처음 사용할 때 며칠간의 시간과 혼란을 줄일 수 있을 것입니다.UI 라우터에는 디폴트로 이것을 유효하게 하는 「디버깅」모드가 필요합니다.

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeStart to '+toState.name+'- fired when the transition begins. toState,toParams : \n',toState, toParams);
});
$rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams, error){
  console.log('$stateChangeError - fired when an error occurs during transition.');
  console.log(arguments);
});
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');
});
$rootScope.$on('$viewContentLoading',function(event, viewConfig){
   console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig);
});

/* $rootScope.$on('$viewContentLoaded',function(event){
     // runs on individual scopes, so putting it in "run" doesn't work.
     console.log('$viewContentLoaded - fired after dom rendered',event);
   }); */

$rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
  console.log('$stateNotFound '+unfoundState.to+'  - fired when a state cannot be found by its name.');
  console.log(unfoundState, fromState, fromParams);
});

애플리케이션 내에서 디버깅(인쇄에서 콘솔로의 전환)을 전환할 수 있도록 @Adam의 솔루션을 서비스로 정리했습니다.

템플릿:

<button ng-click="debugger.toggle()">{{debugger.active}}</button>

컨트롤러 내:

function($scope, PrintToConsole){ $scope.debugger = PrintToConsole; }

또는 스위치를 켜는 방법:

angular.module('MyModule', ['ConsoleLogger'])
.run(['PrintToConsole', function(PrintToConsole) {
    PrintToConsole.active = true;
}]);

서비스:

angular.module("ConsoleLogger", [])
.factory("PrintToConsole", ["$rootScope", function ($rootScope) {
    var handler = { active: false };
    handler.toggle = function () { handler.active = !handler.active; };
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (handler.active) {
            console.log("$stateChangeStart --- event, toState, toParams, fromState, fromParams");
            console.log(arguments);
        };
    });
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
        if (handler.active) {
            console.log("$stateChangeError --- event, toState, toParams, fromState, fromParams, error");
            console.log(arguments);
        };
    });
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        if (handler.active) {
            console.log("$stateChangeSuccess --- event, toState, toParams, fromState, fromParams");
            console.log(arguments);
        };
    });
    $rootScope.$on('$viewContentLoading', function (event, viewConfig) {
        if (handler.active) {
            console.log("$viewContentLoading --- event, viewConfig");
            console.log(arguments);
        };
    });
    $rootScope.$on('$viewContentLoaded', function (event) {
        if (handler.active) {
            console.log("$viewContentLoaded --- event");
            console.log(arguments);
        };
    });
    $rootScope.$on('$stateNotFound', function (event, unfoundState, fromState, fromParams) {
        if (handler.active) {
            console.log("$stateNotFound --- event, unfoundState, fromState, fromParams");
            console.log(arguments);
        };
    });
    return handler;
}]);

UI 라우터가 기본 $location 공급자 옆에 있는 URL을 관리하는 방법은 명확하지 않으므로 여기에 디버깅 코드를 추가합니다.도움이 됐으면 좋겠네요.이것들은 https://github.com/ryangasparini-wf/angular-website-routes 에서 온 것입니다.

$scope.$on('$routeChangeError', function(current, previous, rejection) {
    console.log("routeChangeError", currrent, previous, rejection);
});

$scope.$on('$routeChangeStart', function(next, current) {
    console.log("routeChangeStart");
    console.dir(next);
    console.dir(current);
});

$scope.$on('$routeChangeSuccess', function(current, previous) {
    console.log("routeChangeSuccess");
    console.dir(current);
    console.dir(previous);
});

$scope.$on('$routeUpdate', function(rootScope) {
    console.log("routeUpdate", rootScope);
});

ui-router-extras 스틱 상태 패키지와 함께 사용하던 ui-router를 디버깅해야 했습니다.스틱 스테이트에는 디버깅이 포함되어 있어 문제 해결에 도움이 되었습니다.상태 천이와 비활성/액티브 상태에 대한 정보를 기록합니다.

https://christopherthielen.github.io/ui-router-extras/#/http://http:/https://christopherthielen.github.io/ui-router-extras/

angular.module('<module-name>').config(function ($stickyStateProvider) {
    $stickyStateProvider.enableDebug(true);
});

UI 라우터가 전환 후크로 업데이트되었습니다.

$transition$ 서비스를 사용하여 onError 훅에 액세스하여 오류를 파악합니다.

후크 목록:

• on Before - 전환이 시작됩니다.
• onStart - 이행이 시작되었습니다.
• onExit - (스테이트이벤트)모든 기존 상태가 종료됩니다.
• onRetain - (스테이트이벤트)유지된 상태는 모두 유지됩니다.
• onEnter - (스테이트이벤트)모든 입력 상태가 입력됩니다.
• onFinish - 이행이 곧 종료됩니다.
• onSuccess - 전환이 완료되어 성공했거나 오류가 발생했습니다.
• onError - 이행이 완료되어 성공했거나 오류가 발생하였습니다.

개요에 대해서는, https://ui-router.github.io/guide/transitions 를 참조해 주세요.

Transition Hook 이벤트에 대해서는http://https://ui-router.github.io/guide/transitionhooks 의 메뉴얼을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/20745761/what-is-the-angular-ui-router-lifecycle-for-debugging-silent-errors