ngRouteは設定されていないリンクをサポートできますか？

Question

私は、しかし、私は一度それをすべて行うことができない、既存の実装を修正しようとしています。とにかく、私は直接リクエストを行うことを期待し、古いリンクをサポートするために、それはハックだ場合でも、ngRouteを得ることができますがありますか？

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

「ホーム」と「新しいタスクは」それは素晴らしく、てきぱきとなって、角度ngRouteを使用する必要があります。

は、ここで私が何を意味するかだ、我々はこの奇妙な例TODO Appで3つのリンクを持っています。 「Complete」などの私の他のリンクは、彼らが常に持っているように、完全な往復旅行をする必要があります。

は当初、私はこれで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

私は、これはほとんど機能し、レンダリングされているもののURLに基​​づいてdivを非表示にしたり、表示するルータを設定しようとしました。私はブックマークされたページに行くことができ、それはレンダリングされますが、リンクをクリックしてウェブサイトをナビゲートすることはできません。 ngRouteがもう一度ブロックしたので、同じ空白のページが表示されます。

を設定しそれ以外

私は動作しません、 "NoView" コントローラを試してみました。また、私は

redirectTo: function() { 
    return undefined; 
} 

にこのコードを入れた場合、私はそれが、少なくともエラーなしでレンダリングするために得ることができることがわかったが、再びngRouteブロックのHTTP要求を行ってからブラウザ。

無効ngRoute

Iが設定パスが使用されている場合にのみ、私は角可能にする検出を試みました。コンソールにはエラーがありますが、少なくともブックマークされたリンクには機能します。もう一度、有効になるとngRouteはサイトをクリックしながらリンクをブロックし始めます。代わりに空白のページが表示されます。

私は、代替角度-UI-ルートをしようとするだろうが、それはこのケースをサポートしている場合、私は知りません。ルーティングは、すべてまたは何もないようです。このケースやこのケースをサポートする別のフレームワークを回避するためのハックはありますか？私は一人でそれらを残して、我々は戻って、古いものを修正できるようになるまで、唯一の新機能を有効にしたいと思いますので、

リンクがたくさんあります。

あぷろーち興味がある人のための追加

、私はホルストJahnsの答えと私の試みの1をマージすることになりました。基本的には次のようになります。

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>