ngRoute可以支持未配置的鏈接嗎？

Question

我想修復一個現有的實現，但是我不能一次完成。無論如何，我可以讓ngRoute，即使它是黑客，以支持希望提出直接請求的舊鏈接？

這裏就是我的意思是，我們在這個奇怪的例子TODO應用三個環節：

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

「家」和「新任務」應使用角ngRoute，使得它很好的和瞬間。我的其他鏈接，比如「完整」，需要像往常一樣運作，全程往返。

起初我配置ngRoute這個：

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從發送HTTP請求阻擋瀏覽器給了我一個空白頁。

隱藏/顯示視圖格

我試過配置路由器來隱藏或顯示基於所呈現什麼網址的div，這幾乎工程。我可以去書籤頁，它會呈現，但我不能通過點擊鏈接瀏覽網站。我得到了同樣的空白頁面，因爲ngRoute再次封鎖了它。

配置否則

我嘗試了 「NoView」 控制器，不起作用。還發現，如果我在

redirectTo: function() { 
    return undefined; 
} 

把這個代碼，我可以得到它沒有錯誤至少渲染，但同樣ngRoute阻止發送HTTP請求的瀏覽器。

禁用ngRoute

我試圖檢測正在使用的配置的路徑時，纔將啓用角。儘管控制檯中存在錯誤，但至少適用於書籤鏈接。但是，一旦啓用，ngRoute將在點擊站點時開始阻止鏈接。您將開始查看空白頁面。

我會嘗試替代angular-ui-route，但我不知道它是否支持這種情況。路由似乎是全部或沒有。有沒有什麼黑客可以繞過這個或另一個支持這種情況的框架？

有很多鏈接，所以我想讓他們獨自一人，只有啓用新功能，直到我們可以回去修復舊的功能。

最後進場

增加對那些誰是好奇，我結束了我的合併與嘗試霍斯特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>