Angular.js에서 경로 정의를 연기하려면 어떻게 해야 합니까?

Angular.js에서 경로 정의를 연기하려면 어떻게 해야 합니까?

모든 사용자가 로그인하기 전에 사용할 수 있는 몇 가지 기본 루트를 설정했습니다.

App.config(function ($routeProvider) {
    $routeProvider.
        when('/login', { templateUrl: 'views/login.html', controller: PageStartCtrl.Controller }).
        otherwise({ redirectTo: '/login' });
});

따라서 사용자가 할 수 있는 것은 로그인뿐입니다.사용자 로그인 후 다음과 같이 추가 루트를 등록하고 싶습니다.

$http
  .post('api/Users/Login', {   User: userName, Password: userPassword })
  .success(function (response : any) {
    App.config(function ($routeProvider) {
      $routeProvider
        .when('/dashboard', 
              { templateUrl: 'part/dashboard.html', 
              controller: DashboardCtrl.Controller });
  });

단, $routeProvider는 /login 루트에 대해 아무것도 모르는 새로운 인스턴스이기 때문에 .config 메서드를 한 번만 호출해야 합니다.추가 디버깅 결과 뷰 변경을 해결할 때 $resourceProvider의 첫 번째 인스턴스가 사용되었습니다.

Q: 나중에 루트를 등록하는 방법이 있나요?

루트 및 템플릿을 $routeProvider에 동적으로 추가하는 솔루션은 동작할 수 있지만 매우 추악합니다(글로벌 변수 포함).nastyGlobalReferenceToRouteProvider).

루트는 공급자레벨로 정의되기 때문에 보통 새로운 루트는 컨피규레이션블록 내에서만 정의할 수 있습니다.문제는 컨피규레이션블록에서 모든 중요한 서비스가 아직 정의되어 있지 않다는 것입니다(가장 현저한 것은).$http이 때문에 표면적으로는 루트를 동적으로 정의할 수 없는 것처럼 보입니다.

실제로 애플리케이션 라이프 사이클의 어느 시점에서든 루트를 추가/삭제하는 것이 매우 쉬운 것으로 나타났습니다.를 보다$route 소스 코드: 모든 경로의 정의가 단순히 네트워크 내에서 유지되고 있는 것을 알 수 있습니다.$route.routes다음과 같이 언제든지 변경할 수 있는 해시(검증된 예)

myApp.controller('MyCtrl', function($scope, $route) {    
    $scope.defineRoute = function() {
        $route.routes['/dynamic'] = {templateUrl: 'dynamic.tpl.html'};
    };
});

이를 실천적으로 보여주는 jsFiddle은 다음과 같습니다.

실제로 앵글이 어떤 것에 가까이 다가가고 싶다면JS는 Route Definition 로직은 Angular 로직보다 조금 더 복잡해야 합니다.또한 JS는 리다이렉트루트를 정의하고 있습니다/(실질적으로 옵션화)

따라서 위의 방법은 유효하지만 다음 사항에 유의해야 합니다.

• 이 기술은 내부 구현에 따라 다르며 Angular의 경우 파손될 수 있습니다.JS 팀은 경로를 정의/일치하는 방법을 변경하기로 결정합니다.
• 또, 다음의 항목을 정의할 수도 있습니다.otherwise를 사용하여 라우팅하다$route.routes디폴트 루트는 같은 해시에 저장되어 있기 때문에null열쇠

@pkozlowski.opensource의 답변은 angularjs 1.0.1에서만 유효하다는 것을 알았습니다.단, angular-route.js가 이후 버전에서 독립파일이 된 후 $route를 직접 설정해도 동작하지 않습니다.

코드를 확인해보니 $route.routes 키가 위치 일치에 사용되지 않고 $route.route[key]라는 것을 알게 되었습니다.대신 RegExp가 사용됩니다.오리진 when 및 pathRegExp 함수를 복사하면 루트가 동작합니다.jsfiddle 참조:http://jsfiddle.net/5FUQa/1/

  function addRoute(path, route) {
     //slightly modified 'when' function in angular-route.js
  }
  addRoute('/dynamic', {
    templateUrl: 'dynamic.tpl.html'
  });

언급URL : https://stackoverflow.com/questions/13153121/how-to-defer-routes-definition-in-angular-js