ngRoute는 구성되지 않은 링크를 지원할 수 있습니까?

Question

기존 구현을 수정하려고하지만 모든 것을 한 번에 수행 할 수 없습니다. ngRoute을 직접 해킹 할 것으로 예상되는 오래된 링크를 지원하기 위해 해킹 일지라도 어쨌든 얻을 수 있습니까?

이

<a href="/Home">Home</a> 
<a href="/Home/AddItem">New Task</a> 
<a href="/Home/Complete">Complete Task</a> 

"홈"과 "새 작업은"이 좋은 물어하고, 각 ngRoute을 사용해야합니다

여기 내 말은 무엇을, 우리는이 이상한 예 TODO 앱의 세 가지 연결되는 링크를 제공하고 있습니다. "Complete"와 같은 다른 링크는 항상 왕복과 같이 일해야합니다.

그러나 작동하지 않습니다

angular.module('TodoApp', [ 
     // Angular modules 
     'ngRoute' 
     // Custom modules 

     // 3rd Party Modules 
]).config(['$locationProvider', '$routeProvider', 
    function config($locationProvider, $routeProvider) { 
     $routeProvider.when('/', { 
       templateUrl: 'Templates/index.html', 
       controller: 'TodoController' 
      }) 
      .when('/Home/AddItem', { 
       templateUrl: 'Templates/AddItem.html', 
       controller: 'AddItemController' 
      }); 
     // Otherwise, continue to the link like normal. 
     $locationProvider.html5Mode(true); 
    } 
]); 

, 지금까지, 여기에 내가 해봤 옵션의 전체 목록은 다음과 같습니다 :

처음에 나는이 함께 ngRoute을 구성

달리 구성하지 마십시오

ngRoute이 브라우저에서 http 요청을 차단하고 있기 때문에이 페이지는 비어있는 페이지만을 제공합니다.

내가 숨기거나 렌더링되는 어떤 URL에 따라 div의를 표시하는 라우터를 구성하려고했습니다

숨기기/표시보기 DIV이 거의 작동합니다. 북마크 된 페이지로 이동하면 렌더링되지만 링크를 클릭하여 웹 사이트를 탐색 할 수는 없습니다. ngRoute가 다시 차단 했으므로 같은 빈 페이지가 나타납니다.

구성 그렇지 않으면

나는 작동하지 않습니다는 "NoView"컨트롤러를 시도했다. 또한 내가

redirectTo: function() { 
    return undefined; 
} 

에이 코드를 넣으면 내가 적어도 오류없이 렌더링을 얻을 수 있다는 것을 발견,하지만 다시 ngRoute 블록 HTTP 요청을 만들기에서 브라우저.

안 ngRoute

는 I 구성된 경로가 사용되는 경우에만 다음 I는 각 활성화 것이 검출 시도. 콘솔에 오류가 있지만 적어도 북마크 된 링크에서 작동합니다. 다시 한번 말하지만, ngRoute가 활성화되면 사이트를 클릭하면서 링크를 차단하기 시작합니다. 대신 공백 페이지가 표시되기 시작합니다.

나는 다른 각도 -ui- 경로를 시도 할 것이지만이 경우 지원하는지 모르겠습니다. 라우팅은 전부 또는 아닌 것으로 보입니다. 이 경우를 지원하는 프레임 워크 나 다른 프레임 워크를 피하기위한 해킹이 있습니까?

링크가 너무 많아서 이전 버전으로 되돌아 갈 때까지 새로운 기능 만 사용할 수 있습니다.

최종 접근

호기심 사람들을 위해 추가, 나는 호르스트 Jahns 응답 내 시도 중 하나를 병합 끝났다.기본적으로 다음과 같이 보입니다.

var angularConfigs = [ 
    // Set all configs here, routing will be conditionally added later. 
    // Angular modules 

    // Custom modules 

    // 3rd Party Modules 
]; 

var routeSettings = [{ 
     entry: '/', 
     template: 'Templates/index.html', 
     controller: 'TodoController' 
    }, { 
     entry: '/Home/AddItem', 
     template: 'Templates/AddItem.html', 
     controller: 'AddItemController' 
    } 
]; 

// Check current url matches routes being registered. If so enable routing. 
var enableRotues = false; 
for (var i = 0; i < routeSettings.length; i++) { 
    if (routeSettings[i].entry === window.location.pathname) { 
     enableRotues = true; 
     break; 
    } 
} 

if (enableRotues) { 
    // Attach the module to existing configurations. 
    angularConfigs.push('ngRoute'); 
    var todoApp = angular.module('TodoApp', angularConfigs); 

    todoApp.config([ 
     '$locationProvider', '$routeProvider', 
     function config($locationProvider, $routeProvider) { 
      var provider = $routeProvider; 

      // Go through each setting and configure the route provider. 
      for (var i = 0; i < routeSettings.length; i++) { 
       var route = routeSettings[i]; 

       provider = provider.when(route.entry, 
       { 
        templateUrl: route.template, 
        controller: route.controller 
       }); 
      } 

      // This enables links without hashes, gracefully degrades. 
      $locationProvider.html5Mode(true); 
     } 
    ]); 

    // This directive will disable routing on all links NOT 
    // marked with 'data-routing-enabled="true"'. 
    todoApp.directive('a', function() { 
     return { 
      restrict: 'E', 
      link: function(scope, element, attrs) { 
       if (attrs.routingEnabled) { 
        // Utilize the ngRoute framework. 
       } else { 
        // Disable ngRoute so pages continue to load like normal. 
        element.bind('click', function(event) { 
         if (!scope.enabled) { 
          event.preventDefault(); 
          window.location.href = attrs.href; 
         } 
        }); 
       } 
      } 
     }; 
    }); 
} else { 
    // In this case we still want angular to properly be stood 
    // up and register controllers in my case for backward 
    // compatibility. 
    angular.module('TodoApp', angularConfigs); 
} 

Answer 1

지시어를 작성하고 구성되지 않은 모든 링크에 설정할 수 있습니다.

각도

app.directive('nonConfig', function() { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     element.bind('click', function(event) { 
      if(!scope.enabled) { 
       event.preventDefault(); 
       window.location.href = attrs.href; 
      } 
     }); 
    } 
}; 
}); 

HTML

<a href="test.html" data-non-config>test</a>