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>